Merchant Web SDKs
Upsell.enrollmentConfirmationBanner
doc

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.

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
}
}
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:

ParameterDescriptionFormatRequired
orderTokenThe token of the order associated with the current checkout session.StringYes
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
promotionalBannerDetermines if the promotional banner is displayed if the user is not enrolled for the promotional offer.BooleanNo
promotionalBannerStyleObject 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

promotionalBannerStyle 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

Returns

Methods object:

ParameterDescriptionFormatRequired
destroyManually destroy the promotional widget if needed.FunctionNo

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)
Was this page helpful?