Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@payvision/checkout-library
Advanced tools
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.
[ ⚠ HTTPS protocol is required ]
Install Checkout npm package from Payvision repository:
# with npm package manager
npm i @payvision/checkout-library
# with yarn
yarn add @payvision/checkout-library
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.
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()
Type | Description | |
---|---|---|
live | boolean | The target environment [false: staging (default), true: production] |
events | object |
|
styles | object |
|
*[Default parameters]
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 |
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() |
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) |
IE / Edge | Firefox | Chrome | Safari | iOS Safari Opera |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Payvision © 2020
FAQs
Payvision Checkout javascript customization library.
The npm package @payvision/checkout-library receives a total of 736 weekly downloads. As such, @payvision/checkout-library popularity was classified as not popular.
We found that @payvision/checkout-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.