New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@payvision/checkout-library

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@payvision/checkout-library

Payvision Checkout javascript customization library.

  • 1.2.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
778
decreased by-5.01%
Maintainers
1
Weekly downloads
 
Created
Source

Checkout.js

Checkout.js is a javascript library to easily embed Payvision checkout into your website. We directly send customers sensitive data to Payvision's servers so cardholder data does not hit your server, reducing PCI compliance requirements. Additionally, you can use the library to customize the checkout layout with your own styles.

npm version

NpmLicense

npm

Installation

[ ⚠ HTTPS protocol is required ]

Install NPM package

Install Checkout npm package from Payvision repository:

# with npm package manager
npm i @payvision/checkout-library

# with yarn
yarn add @payvision/checkout-library

Install from Payvision CDN

Import the library from Payvision CDN:

<script
  src="https://cdn.payvision.com/checkout/1.2.0/checkout-library.js"
  integrity="sha384-EY45vPLgYiHuuQOzW+lJzVl0h7uQAAfy3Nxlfhjfwap1QrvXXD8R9RqSl9i0BG9L"
  crossorigin="anonymous"
></script>

Note that:

Use corresponding integrity "sha384-EY45vPLgYiHuuQOzW+lJzVl0h7uQAAfy3Nxlfhjfwap1QrvXXD8R9RqSl9i0BG9L" to ensure subresource integrity.

Use of library

Create an HTML element as the container for the checkout. The container id will be used to embed the checkout using the library.

<div id="checkout-container"></div>

Import the library in your javascript code

import Checkout from '@payvision/checkout-library'

Get a checkout id via API.

const checkoutId = '6741b7d4-f413-4c98-8f5a-724f7d3192f7' // Retrieved from Checkout API

Create the checkout custom options object (not required).

const options = {
  live: true,
  styles: {
    imageUrl: 'Logo Url',
    autoHeight: false,
    generalStyles: {
      backgroundColor: '#f6f7fb',
      fontFamily: 'Source Sans Pro',
      fontFamilyUrl: 'Font family url',
      primaryThemeColor: '#213d8f',
      accentThemeColor: '#909ec7',
      secondaryThemeColor: '#909ec7',
      infoThemeColor: '#1db9de',
      warningThemeColor: '#fec61f',
      errorThemeColor: '#e6493a',
      successThemeColor: '#35ba6d',
    },
    formStyles: {
      backgroundFormColor: '#ffffff',
      backgroundFormContainerColor: '#ffffff',
      fontSize: '14px',
      borderWidth: '1px',
      borderRadius: '2px',
    },
    paymentButtonStyles: {
      fontSize: '16px',
      borderWidth: '1px',
      borderRadius: '2px',
      fontColor: '#ffffff',
      backgroundColor: '#8ec03f',
      borderColor: '#8ec03f',
    },
    iframe: {
      width: '100%',
      height: '780px',
    },
  },
}

Create the checkout object with parameters from above.

const checkout = new Checkout(checkoutId, 'checkout-container', options)

use render method to display the checkout in checkout container HTML element.

checkout.render()

Options

TypeDescription
livebooleanThe target environment [false: staging (default), true: production]
eventsobject
  • onReady: Function emitted when the checkout is ready.
  • onSuccess: Function emitted when the checkout is completed.
  • onError: Function emitted when an error has occurred.
stylesobject
  • imageUrl: 'Logo Url'
  • autoHeight: [false]
  • generalStyles
    • fontFamily ['"Source Sans Pro", "Arial", "Verdana"']
    • fontFamilyUrl [' ']
    • backgroundColor['#f6f7fb']
    • primaryThemeColor['#213d8f']
    • accentThemeColor['#909ec7']
    • secondaryThemeColor['#909ec7']
    • infoThemeColor['#1db9de']
    • warningThemeColor['#fec61f']
    • errorThemeColor['#e6493a']
    • successThemeColor['#35ba6']
  • formStyles
    • backgroundFormColor['#ffffff']
    • backgroundFormContainerColor['#ffffff']
    • fontSize[14px]
    • borderWidth[1px]
    • borderRadius[2px]
  • paymentButtonStyles
    • fontColor['#ffffff']
    • backgroundColor['#8ec03f']
    • borderColor['#8ec03f']
    • fontSize[16px]
    • borderWidth[1px]
    • borderRadius[2px]
    • width ['100%']
    • heigth ['780px']

*[Default parameters]

Environments

You can configure the library for development purposes if set the option.live to false. If you want to release your build to production you have to set the target to live environment with the option.live set to true.

EnvironmentUrl
Livehttps://connect.acehubpaymentservices.com/gateway/v3/web/checkouts
Staginghttps://stagconnect.acehubpaymentservices.com/gateway/v3/web/checkouts

Helper methods

Checkout.js provides the following helper methods to manipulate Checkout UI.

MethodParametersDescriptionExample
show()noneDisplays Checkoutshow()
hide()noneHides Checkouthide()
render()noneRenders Checkout UIrender()

Events

Checkout.js provides the following helper methods to manipulate Checkout UI.

MethodParametersDescriptionExample
onReadyCheckoutCheckout ready to be displayedonReady: checkout => checkout.show()
onErrorErrorError in checkoutonError: error => console.log(error.message)
onSuccessRedirectCheckout completedonSuccess: redirect => redirect.method === 'GET' ? window.location.assign(redirect.url) : submitForm(redirect.url, redirect.fields)
onMobileIntentMobileIntentMobile intent dispatchedonMobileIntent: intent => launchMobileIntent(intent)

Supported browsers

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Opera
IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

Payvision © 2020

FAQs

Package last updated on 12 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc