Merchant Web SDKs
Upsell.promotionalBanner
doc

Upsell.promotionalBanner

Display Revolut's promotional banner on your checkout page to provide more information about Revolut Pay, or 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 sign up banner even 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).

The following variants are available on the Upsell.promotionalBanner instance:

Revolut Promotional banner - Small banner

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 a needed variant.
    • For the sign_up variant, set 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 customers 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 = {
  variant: 'sign_up',
  transactionId: '<uniqueTransactionId>',
  amount: 500,
  currency: 'GBP'
}

promotionalBanner.mount(target, bannerOptions)
info

For more information about integrating the promotional banner, see: Display the Revolut Promotional banner on your checkout page.

Mount options​

The mount method of the upsell module accepts two arguments:

promotionalBanner.mount(target, bannerOptions)

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

Use the Options object to define how the banner should look and to connect it to the specific order associated with the current checkout session.

Available variants:

VariantDescriptionPlacement
sign_upDefault variant. Offers your customer to join Revolut, get reward and get access to Revolut Pay (if it's available on your checkout).After the payment was done
bannerDisplays informational banner with a brief description of Revolut Pay benefits, allowing your customer to open a pop-up with more details on the payment process and benefits.Before the payment
iconDisplays an icon which opens a pop-up with details on the Revolut Pay payment process and benefits.Before the payment
linkDisplays "Learn more" link which opens a pop-up with details on the Revolut Pay payment process and benefits.Before the payment
promotionalBanner.mount(target: HTMLElement, bannerOptions: Options)

type Options {
  variant: 'sign_up',
  transactionId: String,
  currency: String,
  amount: Number,
  customer: {
    name: String,
    email: String,
    phone: String
  },
  style: {
    border: String,
    borderRadius: String,
    backgroundColor: String,
    primaryColor: String
  }
} | {
  variant: 'banner',
  currency: String,
  amount: Number
} | {
  variant: 'link',
  currency: String,
  amount: Number
} | {
  variant: 'icon',
  currency: String,
  amount: Number,
  style: {
    size: String,
    color: String,
    outline: Boolean
  }
}
ParameterDescriptionFormatRequired
targetDetermines where the Revolut upsell widget will be rendered on your site (e.g., a DOM node like, document.getElementById("kiwi") or a CSS selector like, "#kiwi").StringYes

Options object - sign_up variant​

ParameterDescriptionFormatRequired
transactionIdUnique ID of the transaction associated with the current checkout session.StringYes
currencyISO 4217 currency code in uppercase displayed on the promotional banner.StringYes
amountTransaction amount, specified in minor currency units (e.g., cents for EUR).NumberNo
customerObject containing customer details the merchant already has.

note
  • If phone is passed, it is pre-filled on the banner and the user only needs to confirm their consent
  • If email is passed, instructions on how to claim the reward will be also sent to that address
ObjectNo
styleObject containing visual customisation parameters for the promotional banner.ObjectNo

customer object:​

ParameterDescriptionFormatRequired
nameCustomer's name. Example: 'Firstname Lastname'StringNo
emailCustomer's email. Example: 'example@email.com'StringNo
phoneCustomer's phone number, containing country code and '+' character. Example: '+441234567890'StringNo

style object:​

ParameterDescriptionFormatRequired
borderCSS string defining the border attributes of the banner.StringNo
borderRadiusCSS value for the border radius. Applies to the banner and interactive elements inside, for example, inputs and buttons.StringNo
backgroundColorCSS string defining the background colour of the banner.StringNo
primaryColorCSS string defining the primary colour of the banner.StringNo

Options object - banner variant​

ParameterDescriptionFormatRequired
currencyISO 4217 currency code in uppercase displayed on the promotional banner.StringYes
amountCheckout session payment amount, specified in minor currency units (e.g., cents for EUR).NumberNo

Options object - link variant​

ParameterDescriptionFormatRequired
currencyISO 4217 currency code in uppercase displayed on the promotional banner.StringYes
amountCheckout session payment amount, specified in minor currency units (e.g., cents for EUR).NumberNo

Options object - icon variant​

ParameterDescriptionFormatRequired
currencyISO 4217 currency code in uppercase displayed on the promotional banner.StringYes
amountCheckout session payment amount, specified in minor currency units (e.g., cents for EUR).NumberNo
styleObject containing visual customisation parameters for the promotional banner.ObjectNo

style object:​

ParameterDescriptionFormatRequired
sizeString defining the size of an icon. Default: regular
Possible values:
  • regular
  • small
StringNo
colorString defining the size of an icon. Default: blue
Possible values:
  • blue
  • black
StringNo
outlineBoolean defining whether an icon should be displayed filled or as an outline. Default: falseBooleanNo

Returns​

Methods object:

ParameterDescriptionFormatRequired
destroyManually destroy the promotional widget if needed.FunctionNo

Examples​

Example with minimal required parameters (defaults to sign_up variant)​

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 - banner variant​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  locale: 'en',
  mode: 'sandbox',
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  variant: `banner`
  currency: 'GBP',
  amount: 500
}

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

Example with all parameters - icon variant​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  locale: 'en',
  mode: 'sandbox',
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  variant: `icon`
  currency: 'GBP',
  amount: 500,
  style: {
    size: 'small',
    color: 'blue',
    outline: true
  }
}

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

Example with all parameters - link variant​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  locale: 'en',
  mode: 'sandbox',
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  variant: `link`
  currency: 'GBP',
  amount: 500
}

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

Example with all parameters - sign_up variant​

import RevolutCheckout from '@revolut/checkout'

const { promotionalBanner } = await RevolutCheckout.upsell({
  locale: 'en',
  mode: 'sandbox',
  publicToken: '<yourPublicApiKey>'
})

const bannerOptions = {
  variant: `sign_up`
  transactionId: '<uniqueTransactionId>',
  currency: 'GBP',
  amount: 500,
  customer: {
    name: 'Example Customer',
    email: 'example.customere@example.com',
    phone: '+441234567890'
  },
  style: {
    border: '1px solid black',
    borderRadius: '0',
    backgroundColor: 'white',
    primaryColor: '#007681'
  }
}

promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
PreviousUpsell.cardGatewayBanner
NextUpsell.enrollmentConfirmationBanner
Was this page helpful?