Volt JavaScript library

These objects are defined in the https://js.volt.io/v1 library.

Use it when you want to render Volt Checkout Embedded.

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. 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()` void
`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"
}

Setting Volt to Finland with Finnish language

paymentContainer = volt.payment({
    {
        id: "b406e987-0083-4335-b137-69c949fea831",
        token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2OTcyMTg4NzAsImV4cCI6MTY5NzIyMDY3MCwicGF5bWVudElkIjoiYjQwNmU5ODgtMDA4My00MzM1LWIxMzctNjljOTQ5ZmVhODMxIiwiY3VycmVuY3kiOiJFVVIiLCJjdXN0b21lcklkIjoiMjkyZDQ4ZjYtOTBmMy00NTBiLTkzZWItMGI0ODBiOGI3MGRkIn0.JtfuJiSTOdahge84DTB_Pac7zG2llTN2SVzF8PzCN1eTScJ9HaxpG9Xj_4x6A_iz6DGBk6vUa3uiORRYcT-xjWUOOmhsg_RYAsFVACuLPVW3wj7REzpv_cDB03NFgcp9roEdyz1nK6EpFvt-zl5GmhaFz1HK1Qjof1yv3D-uz0ufGBFvrAwpEGnS4A8soZeNrl78T1oocAx5bYikNwUwjPW9CAWgw-ZBw3mR-yro7CHEFx6PyKP7IYMlov-u3DsQqr9TjH-f984U2aFurhg2j-JPYqM-TmOtgBh_fkmIs_um0XzXsv3T1PH-CToUjRzOM_YnyOrhD9V82Tdb-CEpE2nX1OIM6xR6Is6dTo0SFpL2IvH_q-bnHQczJk1Z0phV7VMj9iqRCt-cnE5WP7G-Ie5cmpM1fKsn7Y3x5iH8QBTHkbp5s4-m7iAMaib3JGF0AQRb1nTt7bRbC1TTJALaLstE3PLxT498siQoU27TV2OSqNpW-efF2bPdKyjDBlRRy57oj_Rn-xwnWNijF0vqh9azPpNalHnrvrzWD3A7GAlRzxb51r57_K28MdWXT90geaq0-wail9NRcjKF7votrIGBwqZoWDYK7dfKLRYKyXOPoUz4pTpG6TRT6t6SM-Nn52kRTT2rC5L1UtxLO38r6KvfEKElHDpIiVdFwuyvSv4"
    },
    language: "fi", // optional - ISO 639-1 (language code in lower case)
    country: "FI", // optional - ISO 3166 (country code in upper case)
});

paymentContainer.on("languageChange",(e)=>{
    // Changed language to e.language
});
paymentContainer.on("countryChange",(e)=>{
    // Changed country to e.country
});
paymentContainer.on("error",(e)=>{
    // Error with e.paymentId, e.code, e.status, and e.message
});

Payment Component

iFrame-based component displaying:

UI allowing users to select a bank and provide additional bank details
- Express payment toggle which allows faster checkout for the returning users by remembering their payment data
Pay button (optional)
Terms statement (optional)

Parameters

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

Methods

mount(el)
void

Mount component in DOM tree.
Arguments:

el: DOM element or CSS selector

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 }`