![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@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.
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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.