@payvision/checkout-library

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.

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

Use of library

Create an HTML element as 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 checkout custom options object (not required).

const options = {
  live: true,
  styles: {
    imageUrl: 'Logo Url',
    autoHeight: false,
    generalStyles: {
      backgroundColor: '#f6f7fb',
      fontFamily: 'Source Sans Pro',
      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 a 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]
styles	object	imageUrl: 'Logo Url' autoHeight: [false] generalStyles fontFamily ['"Source Sans Pro", "Arial", "Verdana"'] 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 to 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 production environvment with the option.live setted true.

Environment	Url
Live	https://checkout-web.prod.payvision.app
Staging	https://stag.checkout-web.dta.payvision.app

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()

Supported browsers

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

Copyright

Payvision © 2019