Upsell.cardGatewayBanner

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

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

Returns​

Methods object:

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

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()