PaymentLink.js

PaymentLink.js is a javascript library to easily embed Payvision PaymentLink 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 PaymentLink layout with your own styles.

Installation

[ ⚠ HTTPS protocol is required ]

Install NPM package

Install PaymentLink npm package from Payvision repository:

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

# with yarn
yarn add @payvision/paymentlink-library

Install from Payvision CDN

Import the library from Payvision CDN:

<script
  src="https://cdn.payvision.com/paymentlink/1.0.1/paymentlink-library.js"
  integrity="sha384-gyUFNd0dxmXvGxJoFuGPzl8y7w3UYm8rrDotHnhHoR9oquGiPmj7O0GM0gEMO9JM"
  crossorigin="anonymous"
></script>

Note that:

Use corresponding integrity "sha384-gyUFNd0dxmXvGxJoFuGPzl8y7w3UYm8rrDotHnhHoR9oquGiPmj7O0GM0gEMO9JM" to ensure subresource integrity.

Use of library

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

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

Import the library in your javascript code

import PaymentLink from '@payvision/paymentlink-library'

Get a link id via API.

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

Create PaymentLink custom options object (not required).

const options = {
  live: true,
  showDeclineButton: 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',
    },
    declineButtonStyles: {
      fontSize: '16px',
      borderWidth: 1,
      borderRadius: 2,
      fontColor: '#213d8f',
      backgroundColor: '#ffffff',
      borderColor: '#909ec7',
    },
    iframe: {
      width: '100%',
      height: '780px',
    },
  },
}

Create a PaymentLink object with parameters from above.

const paymentLink = new PaymentLink(linkId, 'paymentlink-container', options)

use render method to display the PaymentLink in payment link container HTML element.

paymentLink.render()

Options

| | Type | Description | | --------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | live | boolean | The target environment [false: staging (default), true: production] | | showDeclineButton | boolean | Show or hide the decline button [true] | | 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] declineButtonStyles fontColor['#213d8f'] backgroundColor['#ffffff'] borderColor['#909ec7'] fontSize[16px] borderWidth[1px] borderRadius[2px] iframe 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://connect.acehubpaymentservices.com/gateway/v3/web/paymentlinks | | Staging | https://stagconnect.acehubpaymentservices.com/gateway/v3/web/paymentlinks |

Helper methods

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

| Method | Parameters | Description | Example | | ------------ | ---------- | ----------------------- | -------- | | show() | none | Displays Payment Link | show() | | hide() | none | Hides Payment Link | hide() | | render() | none | Renders Payment Link 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