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

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

Options object:

Returns​

Methods object:

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