cardGatewayBanner()

Display a promotional banner alongside card payment widgets to encourage customers to join Revolut and earn rewards. The banner automatically communicates with card field or card pop-up widgets and registers users for promotional offers upon successful payment.

Key features:

• Automatic integration with card field and card pop-up
• Post-payment enrollment for RevPoints rewards
• Communication with card payment widgets
• Customisable placement and styling

Info

For complete implementation guides, see: Add to card field | Add to card pop-up

Prerequisites​

This promotional widget requires Upsell module initialisation.

The card gateway banner works with:

• Card field - Mount the banner on the same page
• Card pop-up - Set upsellBanner: true in pop-up options

Type signature​

UpsellModuleCardGatewayBannerInstance.mount(
  target: HTMLElement,
  options: CardGatewayBannerOptions
): CardGatewayBannerMethods

interface CardGatewayBannerOptions {
  orderToken: string
}

interface CardGatewayBannerMethods {
  destroy: () => void
}

Parameters​

Parameter	Description	Type	Required
target	DOM element where the banner should be mounted	HTMLElement	Yes
options	Configuration object for the banner	CardGatewayBannerOptions	Yes

CardGatewayBannerOptions interface​

Parameter	Description	Type	Required
orderToken	The order token (order.token) associated with the current checkout session	string	Yes

Return value​

CardGatewayBannerMethods

interface CardGatewayBannerMethods {
  destroy: () => void
}

The method returns a CardGatewayBannerMethods object containing:

Method	Description	Type
destroy	Remove the banner and clean up resources	() => void

How it works​

When the banner is mounted on a page with a card field or card pop-up:

1. The banner automatically establishes communication with the card payment widget
2. Customer completes their card payment
3. Upon successful payment, an enrollment request is sent to register the customer for promotional rewards
4. Customer receives confirmation and can claim their rewards by joining Revolut

Usage examples​

Card field with promotional banner​

HTML structure​

Add a container element for the banner in your HTML:

<div id="card-field"></div>
<div id="card-gateway-banner"></div>

JavaScript structure​

import RevolutCheckout from '@revolut/checkout'

const orderToken = '<token>'

// Initialise card field
const instance = await RevolutCheckout(orderToken, 'prod')
const cardField = instance.createCardField({
  target: document.getElementById('card-field'),
  onSuccess: () => {
    console.log('Payment successful!')
    window.location.href = '/confirmation'
  },
  onError: (error) => {
    console.error('Payment failed:', error.message)
  }
})

// Initialise upsell module and mount banner
const { cardGatewayBanner } = await RevolutCheckout.upsell({
  publicToken: process.env.REVOLUT_PUBLIC_KEY,
  mode: 'prod',
  locale: 'auto'
})

cardGatewayBanner.mount(document.getElementById('card-gateway-banner'), {
  orderToken
})

Info

For more details, see: Card field: Add promotional banner

Card pop-up with promotional banner​

For card pop-up, you don't need to mount the banner separately. Instead, enable it via the upsellBanner option:

const instance = await RevolutCheckout(orderToken, 'prod')

instance.payWithPopup({
  upsellBanner: true, // Enable promotional banner in pop-up
  onSuccess: () => {
    window.location.href = '/confirmation'
  },
  onError: (error) => {
    console.error('Payment failed:', error.message)
  }
})

Info

For more details, see: Card pop-up: Add promotional banner

See also​

• Card field
• Card pop-up
• Upsell module initialisation
• Add promotional banner to card field
• Add promotional banner to card pop-up