Home › Checkout › Embedded › 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 }
← Previous Error handling