Volt JavaScript library

Volt's JavaScript library

This is a reference guide to the objects defined in https://js.volt.io/v1 library for Embedded Checkout. Please see our integration guide and details on how to tailor the checkout to your requirements.

How to integrate Volt’s Embedded Checkout

The Volt object

The Volt object is the entry point to use Volt client-side JavaScript library.

Parameters

mode
required string
"sandbox" | "production"

const volt = new window.Volt({ "production" }); // Setting Volt to production mode

Payment Container object

Payment Container is required to create a Volt payment. The Container object groups and manages a group of elements.

Parameters

`payment` required	PaymentResponse Full response from payment creation endpoint
`language`	string two-letter language code
`country`	string two-letter country code
`theme`	object all parameters are optional

Methods

`setLanguage(languageCode: string)` void	This method can be used to update the language after drop-in initialisation
`setCountry(countryCode: string)` void	This method can be used to update the country after drop-in initialisation
`createPayment(paymentComponentOptions: object)` void	This method creates the payment component object. `paymentComponentOptions: { "autoHeight": boolean, "displayPayButton": boolean, "disaplyQRCode": boolean }`
`createQR(qrOptions: object)` void	This method creates the QR code object. `qrOptions: { "qrSize": number }`
`createTerms()` void

Events

languageChange

Triggered when Drop-in language gets changed

event: { language: string }

countryChange

Triggered when Drop-in country gets changed

event: { country: string }

error

Triggered when any error occurs

event: {
    "code": "INVALID_STATUS",
    "status": "BANK_REDIRECT",
    "paymentId": "b406e998-0083-4335-b137-69c949fea831",
    "message": "Incorrect payment status"
}

Payment Component

The Payment Component is an iFrame-based component, displaying:

The UI that allows users to select a bank and provide additional bank details
- Including an “Express payment” toggle which allows a faster checkout experience for returning users by remembering their payment data
Pay button (optional)
Terms statement (optional)

Parameters

`autoHeight`	boolean default: `true`
`displayPayButton`	boolean default: `true`
`displayQRCode`	boolean default: `true`

Methods

mount(el)
void

Mount the component in your DOM tree at the given location. Note that “p” elements are not accepted – the suggested target element is a DIV with an id.

Arguments:

el: DOM element or CSS selector.

Example: paymentComponent.mount(“#volt-payment-component”);

Events

`change`	Triggered when the user’s input is changed; complete flag indicates the user data completeness. It should be used to control the external pay button state: enabling/showing if the value is true disabling/hiding it when it’s false `event: { complete: boolean }`
`ready`	Triggered when the Component is fully rendered and can accept user-input `event: {}`
`redirect`	Triggered when the user is redirected (bank redirection), the drop-in will handle the redirection `event: { url: string }`
`heightChange`	Triggered when the content of an iFrame changes size `event: { value: number }`