Upsell.enrollmentConfirmationBanner

Revolut - Enrollment confirmation banner

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.

To mount the Revolut enrollment confirmation banner on your page:

First, import the RevolutCheckout package.
Store the token of the order associated with the current checkout session.
Call the .upsell() method to load the upsell module.
Define the bannerOptions containing the token and other parameters.
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.
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)