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:
RevolutCheckout
package.token
of the order associated with the current checkout session..upsell()
method to load the upsell module. bannerOptions
containing the token
and other parameters.promotionalBanner
option to true
. Additionally, you can customise the look of the banner by defining the promotionalBannerStyle
object.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)
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
| 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 |
Methods
object:
Parameter | Description | Format | Required |
---|---|---|---|
destroy | Manually destroy the promotional widget if needed. | Function | No |
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)
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)