Merchant Web SDKs
Upsell.cardGatewayBanner
doc

Upsell.cardGatewayBanner

Revolut - Card gateway banner

Display the Revolut upsell banner together with the createCardField widget to drive customers to join Revolut.

When the banner is mounted it is displayed on the UI. If the card field is present on the page, communication is established between the card field and the banner widget. Upon successful submission of card data, an additional request is sent to register the user for the cashback offer (given the provided data is valid).

note

You can display the same banner on the payWithPopup widget, by setting the upsellBanner parameter to true. For more information, see: Card pop-up: Add promotional banner to the widget.

How to mount the upsell banner

To mount the Revolut upsell banner on the widget:

  1. First, import the RevolutCheckout package.
  2. Store the token of the order associated with the current checkout session.
  3. Initialise the card field. For more information, see: Instance.createCardField.
  4. Call the .upsell() method to load the upsell module.
  5. Define the bannerOptions containing the token.
  6. Initialise the cardGatewayBanner instance and mount the banner to allow your customers to access the upsell flow.

For more information about the implementation with card payments, see: Payment methods: Card payments.

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>'

// Initialise the card field here

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

const bannerOptions = {
orderToken
}

cardGatewayBanner.mount(target, bannerOptions)

Mount options

The mount method of the upsell module accepts two arguments:

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

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

type Options {
orderToken: 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

Returns

Methods object:

ParameterDescriptionFormatRequired
destroyManually destroy the upsell widget if needed.FunctionNo

Example with card field

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>' // assuming it is known at this point

async function init() {
const RC = await RevolutCheckout(orderToken)
const cardField = RC.createCardField({
target: document.getElementById('card-field'),
onError(error) {
console.error(`Something wrong happened. ${error}`)
},
onSuccess() {
setTimeout(window.alert, 1000, `Thank you!`)
}
})

const { cardGatewayBanner } = await RevolutCheckout.upsell({
publicToken: '<yourPublicApiKey>',
locale: 'auto'
})
cardGatewayBanner.mount(document.getElementById('card-gateway-banner'), {
orderToken
})
}

init()
Was this page helpful?