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
|
countryChange |
Triggered when Drop-in country gets changed
|
error |
Triggered when any error occurs
|
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:
|
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:
|
ready |
Triggered when the Component is fully rendered and can accept user-input
|
redirect |
Triggered when the user is redirected (bank redirection), the drop-in will handle the redirection
|
heightChange |
Triggered when the content of an iFrame changes size
|