Upsell.enrollmentConfirmationBanner

Use the enrollmentConfirmationBanner combined with the cardGatewayBanner to display additional messaging about promotional offers for customers.

When mounted the enrollment confirmation banner will display promotional widgets in different scenarios. The main function of the banner is to inform customers about their successful registration to the promotional offer after checkout.

Additionally, you can display a banner in case when a customer provided consent to participate in the offer, but didn't provide valid contact details. This scenario is called unfinished attempt.

Besides the unfinished attempt, you can display the promotional banner on your confirmation page after the customer finished the checkout. You can use this to remind customers that they can be eligible for the promotional offer even after finishing the checkout.

How to mount the enrollment confirmation banner​

To mount the Revolut enrollment confirmation banner on your page:

1. First, import the RevolutCheckout package.
2. Store the token of the order associated with the current checkout session.
3. Call the .upsell() method to load the upsell module.
4. Define the bannerOptions containing the token and other parameters.
5. Optionally, you can display the promotional banner by setting the promotionalBanner option to true. Additionally, you can customise the look of the banner by defining the promotionalBannerStyle object.
6. Initialise the enrollmentConfirmationBanner instance and mount the banner to allow your customer to access the upsell flow.

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>'

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

const bannerOptions = {
  orderToken
}

enrollmentConfirmationBanner.mount(target, bannerOptions)

Mount options

The mount method of the upsell module accepts two argument:

enrollmentConfirmationBanner.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.

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

type Options {
  orderToken: String,
  customer: {
    name: String,
    email: String,
    phone: String
  },
  promotionalBanner: Boolean,
  promotionalBannerStyle: {
    border: String,
    borderRadius: String,
    backgroundColor: String,
    primaryColor: String
  }
}

Parameter	Description	Format	Required
target	Determines 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").	String	Yes

Options object:

Parameter	Description	Format	Required
orderToken	The token of the order associated with the current checkout session.	String	Yes
customer	Object 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	Object	No
promotionalBanner	Determines if the promotional banner is displayed if the user is not enrolled for the promotional offer.	Boolean	No
promotionalBannerStyle	Object containing visual customisation parameters for the promotional banner.	Object	No

customer object:

Parameter	Description	Format	Required
name	Customer's name. Example: 'Firstname Lastname'	String	No
email	Customer's email. Example: 'example@email.com'	String	No
phone	Customer's phone number, containing country code and '+' character. Example: '+441234567890'	String	No

promotionalBannerStyle object:

Parameter	Description	Format	Required
border	CSS string defining the border attributes of the banner.	String	No
borderRadius	CSS value for the border radius. Applies to the banner and interactive elements inside, for example, inputs and buttons.	String	No
backgroundColor	CSS string defining the background colour of the banner.	String	No
primaryColor	CSS string defining the primary colour of the banner.	String	No

Returns​

Methods object:

Parameter	Description	Format	Required
destroy	Manually destroy the promotional widget if needed.	Function	No

Examples​

Example with minimal required parameters​

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>'

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

const bannerOptions = {
  orderToken
}

enrollmentConfirmationBanner.mount(document.getElementById('enrollment-confirmation-banner'), bannerOptions)

Example with all parameters​

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>'

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

const bannerOptions = {
  orderToken,
  customer: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    phone: '+441234567890'
  },
  promotionalBanner: true,
  promotionalBannerStyle: {
    border: '1px solid black',
    borderRadius: '0',
    backgroundColor: 'white',
    primaryColor: '#007681'
  }
}

enrollmentConfirmationBanner.mount(document.getElementById('enrollment-confirmation-banner'), bannerOptions)