@payvision/checkout-library
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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

Type Description
live boolean The target environment [false: staging (default), true: production]
events object
  • onReady: Function emitted when the checkout is ready.
  • onSuccess: Function emitted when the checkout is completed.
  • onError: Function emitted when an error has occurred.
styles object
  • 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]
  • iframe
    • 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.

Environment Url
Live https://connect.acehubpaymentservices.com/gateway/v3/web/checkouts
Staging https://stagconnect.acehubpaymentservices.com/gateway/v3/web/checkouts

Helper methods

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

Method Parameters Description Example
show() none Displays Checkout show()
hide() none Hides Checkout hide()
render() none Renders Checkout UI render()

Events

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

Method Parameters Description Example
onReady Checkout Checkout ready to be displayed onReady: checkout => checkout.show()
onError Error Error in checkout onError: error => console.log(error.message)
onSuccess Redirect Checkout completed onSuccess: redirect => redirect.method === 'GET' ? window.location.assign(redirect.url) : submitForm(redirect.url, redirect.fields)
onMobileIntent MobileIntent Mobile intent dispatched onMobileIntent: intent => launchMobileIntent(intent)

Supported browsers

IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari iOS SafariiOS Safari Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Copyright

Payvision © 2020

Readme

Keywords

none

Package Sidebar

Install

npm i @payvision/checkout-library

Weekly Downloads

998

Version

1.2.0

License

MIT

Unpacked Size

25.9 kB

Total Files

7

Last publish

Collaborators

  • payvision-ops