npm package: @payvision/paymentlink-library
Description: PaymentLink javascript customization library.
Author: Payvision
Latest version: 1.0.1

# 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.

[![npm version](https://badge.fury.io/js/%40payvision%2Fpaymentlink-library.svg)](https://badge.fury.io/js/%40payvision%2Fpaymentlink-library)

[![NpmLicense](https://img.shields.io/npm/l/%40payvision%2Fpaymentlink-library.svg)](https://www.npmjs.com/package/%40payvision%2Fpaymentlink-library)

[![npm](https://img.shields.io/npm/dt/%40payvision%2Fpaymentlink-library.svg)](https://www.npmjs.com/package/%40payvision%2Fpaymentlink-library)

## Installation

[ ⚠ **HTTPS** protocol is required ]

### Install NPM package

> Install PaymentLink npm package from Payvision repository:

```bash
# 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:

```html
<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](https://developer.mozilla.org/en-US/docs/Web/Security/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.

```html
<div id="paymentlink-container"></div>
```

> Import the library in your javascript code

```javascript
import PaymentLink from '@payvision/paymentlink-library'
```

> Get a **link id** via API.

```javascript
const linkId = '6741b7d4-f413-4c98-8f5a-724f7d3192f7' // Retrieved from PaymentLink API
```

> Create PaymentLink custom options object (not required).

```javascript
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.

```javascript
const paymentLink = new PaymentLink(linkId, 'paymentlink-container', options)
```

> use **render** method to display the PaymentLink in payment link container HTML element.

```javascript
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  | <ul><li>imageUrl: 'Logo Url'</li><li>autoHeight: [*false*]</li><li>generalStyles <ul> <li>fontFamily [_'"Source Sans Pro", "Arial", "Verdana"'_]</li><li>fontFamilyUrl [' ']</li> <li>backgroundColor[<span style="color: #f6f7fb">_'#f6f7fb'_</span>]</li> <li>primaryThemeColor[<span style="color: #213d8f">_'#213d8f'_</span>]</li> <li>accentThemeColor[<span style="color: #909ec7">_'#909ec7'_</span>]</li> <li>secondaryThemeColor[<span style="color: #909ec7">_'#909ec7'_</span>]</li> <li>infoThemeColor[<span style="color: #1db9de">_'#1db9de'_</span>]</li> <li>warningThemeColor[<span style="color: #fec61f">_'#fec61f'_</span>]</li> <li>errorThemeColor[<span style="color: #e6493a">_'#e6493a'_</span>]</li> <li>successThemeColor[<span style="color: #35ba6">_'#35ba6'_</span>]</li> </ul> </li> <li> formStyles <ul> <li>backgroundFormColor[<span style="color: #ffffff">_'#ffffff'_</span>]</li> <li>backgroundFormContainerColor[<span style="color: #ffffff">_'#ffffff'_</span>]</li> <li>fontSize[<span>_14px_</span>]</li> <li>borderWidth[<span >_1px_</span>]</li> <li>borderRadius[<span>_2px_</span>]</li> </ul> </li> <li> paymentButtonStyles <ul> <li>fontColor[<span style="color: #ffffff">_'#ffffff'_</span>]</li> <li>backgroundColor[<span style="color: #8ec03f">_'#8ec03f'_</span>]</li> <li>borderColor[<span style="color: #8ec03f">_'#8ec03f'_</span>]</li> <li>fontSize[<span>_16px_</span>]</li> <li>borderWidth[<span >_1px_</span>]</li> <li>borderRadius[<span>_2px_</span>]</li> </ul> </li> <li> declineButtonStyles <ul> <li>fontColor[<span style="color: #213d8f">_'#213d8f'_</span>]</li> <li>backgroundColor[<span style="color: #ffffff">_'#ffffff'_</span>]</li> <li>borderColor[<span style="color: #909ec7">_'#909ec7'_</span>]</li> <li>fontSize[<span>_16px_</span>]</li> <li>borderWidth[<span >_1px_</span>]</li> <li>borderRadius[<span>_2px_</span>]</li> </ul> </li> <li> iframe <ul> <li> width ['100%'] </li> <li> heigth ['780px'] </li> </ul> </ul> </li> |

\*_[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

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari </br>Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                                                          |

## Copyright

Payvision © 2019