Embedded | Volt Docs

Integrating the Volt Embedded Checkout

Integration of our embedded checkout can be achieved in just three steps.

Request a payment (server-side)
Prepare your page by including our Javascript library and telling us where you would like the checkout rendered
Render the Volt Checkout in your page

Request a payment

Authenticate

The first thing you’ll need to do is to authenticate with the API, which will provide you with an access token to request a payment.

Find out more about API authentication

Payment request

The details of the request header and body are described the API documentation for embedded payments.

POST /dropin

{
    "currencyCode": "EUR",
    "amount": 100,
    "type": "OTHER",
    "uniqueReference": "123456789",
    "shopper": {
        "reference": "123456789",
        "email": "firstname.lastname@example.com",
        "firstName": "Firstname",
        "lastName": "Lastname",
        "ip": "150.160.170.180"
    },
    "callback": "order_id=662384a0&sample=parameter"
}

The shopper.reference is used by our systems to identify returning shoppers. We recommend using an identifier you already use, e.g. the user id in your own system. If you use sensitive data we would recommend hashing it before sharing it with Volt.

The ability to identify returning shoppers is especially useful for Circuit Breaker as it allows you to configure rules and limitations for specific shoppers to prevent abnormal or unwanted behaviour.

Try it yourself using our Postman collection

Additional data to return when redirecting

You can also define a string of parameters in the callback key of the JSON, which we’ll append to the payment return URLs.

For example, "callback": "order_id=662384a0&sample=parameter"will append the order_id and sample parameters to the URL when we redirect the shopper back to your checkout.

Please do not use volt, volt-signature or volt-timestamp as names for your callback parameters – these are reserved names used by the redirect process and will be ignored.

Find out more about the redirect return process

Payment response

A successful payment request returns an id and a token. The id is a unique identifier for this payment once it is created, which we recommend storing it in your system for any future reference.

The Volt Embedded Checkout requires both values to get rendered on the client. You will need to pass both values to your client application.

Example response

{
    "id": "509c7915-0e16-4927-9b73-efd629e9273a",
    "token": "eyJ...5sQ"
}

Payments created using Volt’s Embedded Checkout will only be visible in Fuzebox once the shopper has redirected to their bank.

Prepare your page

Add our JavaScript library

Add the Volt JavaScript library to your client-side HTML using the following code.

<script src="https://js.volt.io/v1"></script>

JavaScript library documentation

Add a placeholder for the checkout

Add a placeholder div with the id of volt-payment-component where you would the Volt Embedded Checkout rendered in your page.

Please note that for the iFrame containing the checkout to display properly, a minimum width is required of 320px. If this dimension is less than 320px, we cannot guarantee that all components will display correctly.

<div id="volt-payment-component">
    <!-- Volt embdedded checkout will be rendered here -->
</div>

Render the checkout

To initialise the Volt Components and render the Embedded Checkout, use the code below, setting the constant mode to the value of sandbox or production as appropriate.

Find out more about localisation

const mode = "sandbox" // Set to sandbox or production as required

const volt = new window.Volt({ mode })

function async init() {
  const response = fetch('https://api.your-page.com/create-volt-payment')
  const payment = await response.json();

  const paymentContainer = volt.payment({
    payment,
    language: "pl", // optional - ISO 639-1
    country: "PL", // optional - ISO 3166
  })

  const paymentComponent = paymentContainer.createPayment();
  paymentComponent.mount("#volt-payment-component");
}

Here we have an example page containing the code and elements required for a basic Embedded Checkout setup

Example HTML page for basic Embedded Checkout

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edg