Upsell.promotionalBanner

Display Revolut's promotional banner on your checkout page after a payment has been made to offer your customers to join Revolut, get reward and get access to Revolut Pay (if it's available on your checkout) for future purchases.

Compared to the Upsell.cardGatewayBanner, the promotionalBanner module lets you display the banner when your customer used a non-Revolut payment method.

When a customer submits their details via the banner, a request is sent to register the user for the promotional offer (given the provided data is valid).

How to mount the promotional banner​

To mount the Revolut promotional banner on your page:

1. First, import the RevolutCheckout package.
2. Call the .upsell() method to load the upsell module.
3. Define the bannerOptions containing the ID of the transaction associated with the current checkout session.
4. Optionally, you can define the style object in the bannerOptions to customise the look of the banner.
5. Initialise the promotionalBanner instance and mount the banner to allow your customer to access the upsell flow.

import RevolutCheckout from '@revolut/checkout'

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

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

promotionalBanner.mount(target, bannerOptions)

Mount options​

The mount method of the upsell module accepts two argument:

promotionalBanner.mount(target, bannerOptions)

Use the target to define where the promotional banner will be rendered on your page.

Use the Options object to connect the banner to the specific order associated with the current checkout session.

promotionalBanner.mount(target: HTMLElement, bannerOptions: Options)

type Options {
  transactionId: String,
  currency: String,
  amount: Number,
  customer: {
    name: String,
    email: String,
    phone: String
  },
  style: {
    border: String,
    borderRadius: String,
    backgroundColor: String,
    primaryColor: String
  }
}

Options object:

customer object:

style object:

Returns​

Methods object:

Examples​

Example with minimal required parameters​

import RevolutCheckout from '@revolut/checkout'

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

const bannerOptions = {
  transactionId: '<unique-transaction-id>',
  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)