Display the Revolut Promotional banner on your checkout page

The RevolutCheckout.upsell module of the Revolut Checkout Widget lets you display Revolut's promotional banner during and after checkout. Customers who eventually join Revolut will receive a reward and will be able to use their Revolut account to pay via Revolut Pay (if it's available on your checkout) in the future.

Options to display the promotional banner​

You have two options to display the promotional banner:

• Displaying the banner with the Revolut Checkout Widget (card field, pop-up)
• Displaying the banner after successful payment when the customer made the payment through a non-Revolut gateway

This tutorial will cover how to display the promotional banner when implementing a non-Revolut payment gateway. For more information about how to display the promotional banner with the Revolut Checkout Widget, see:

• Card field: Add promotional banner to the widget
• Card pop-up: Add promotional banner to the widget

Overview​

The promotionalBanner module in the Revolut Upsell Widget allows you to display and customise a promotional banner on your checkout page after a customer made a payment. With the banner, you can invite customers to join Revolut and offer new-joiners to receive a reward after registration.

Pre-requisites​

• Ensure you have the Revolut Checkout Widget installed in your project
• Obtain your Merchant API Public key from your Merchant account

How to display the Promotional banner​

1. Install and import the RevolutCheckout package​

Begin with installing the RevolutCheckout.js NPM package to your project by running:

npm install @revolut/checkout

Then, import the RevolutCheckout package into your project.

import RevolutCheckout from '@revolut/checkout'

2. Initialise the upsell module​

Use the .upsell() method to load the upsell module.

const { promotionalBanner } = await RevolutCheckout.upsell({
  locale: 'auto', // Optional, defaults to 'auto'
  mode: 'sandbox', // Optional, defaults to 'prod'
  publicToken: '<yourPublicApiKey>', // Merchant public API key
})

3. Define the banner options​

Configure and customise the promotional banner by defining the bannerOptions object with details like the transaction ID, currency, and reward amount.

const bannerOptions = {
  transactionId: '<uniqueTransactionId>', // Replace with the transaction ID from your system corresponding to the promotional offer
  currency: 'GBP', // Set the currency to be displayed on the banner
  amount: 500, // Maximum reward amount displayed on the banner (optional)
}

Optionally, you can provide further information about your customer using the bannerOptions.customer object.

(Optional) 4. Customise the banner style​

Optionally, you can customise the appearance of the banner using the style object within the bannerOptions.

bannerOptions.style = {
  border: '1px solid black',
  borderRadius: '0',
  backgroundColor: 'white',
  primaryColor: '#007681',
}

5. Mount the Promotional banner​

Finally, mount the banner to a target element on your page with the bannerOptions you defined.

promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)

Examples​

Example with minimal required parameters​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  transactionId: '<uniqueTransactionId>',
  currency: 'GBP'
}

promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)

Example with all parameters​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  transactionId: '<uniqueTransactionId>',
  currency: 'GBP',
  amount: 500,
  customer: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    phone: '+441234567890'
  },
  style: {
    border: '1px solid black',
    borderRadius: '0',
    backgroundColor: 'white',
    primaryColor: '#007681'
  }
}

promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)