@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

    Keywords

    none

    Install

    npm i @payvision/checkout-library

    DownloadsWeekly Downloads

    1,095

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • payvision-ops