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 }