# `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.

![Revolut - Card gateway banner](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/card-gateway-banner.png)

**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](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/card-field#5-add-promotional-banner-to-the-widget) | [Add to card pop-up](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/pop-up#5-add-promotional-banner-to-the-widget)
:::

## Prerequisites

This promotional widget requires [Upsell module initialisation](/docs/sdks/merchant-web-sdk/initialisation/upsell-module).

The card gateway banner works with:

- [Card field](/docs/sdks/merchant-web-sdk/payment-methods/card-field) - Mount the banner on the same page
- [Card pop-up](/docs/sdks/merchant-web-sdk/payment-methods/pop-up) - Set `upsellBanner: true` in pop-up options

## Type signature

```typescript
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`](#cardgatewaybanneroptions-interface) | Yes      |

### `CardGatewayBannerOptions` interface

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

## Return value

```typescript
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:

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

#### JavaScript structure

- ![With async/await]

  ```typescript
  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,
  })
  ```

- ![Without async/await]

  ```typescript
  import RevolutCheckout from '@revolut/checkout'

  const orderToken = '<token>'

  // Initialise card field
  RevolutCheckout(orderToken, 'prod').then((instance) => {
    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
    RevolutCheckout.upsell({
      publicToken: process.env.REVOLUT_PUBLIC_KEY,
      mode: 'prod',
      locale: 'auto',
    }).then(({ cardGatewayBanner }) => {
      cardGatewayBanner.mount(document.getElementById('card-gateway-banner'), {
        orderToken,
      })
    })
  })
  ```

:::info
For more details, see: [Card field: Add promotional banner](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/card-field#5-add-promotional-banner-to-the-widget)
:::

### 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:

```typescript
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](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/pop-up#5-add-promotional-banner-to-the-widget)
:::

## See also

- [Card field](/docs/sdks/merchant-web-sdk/payment-methods/card-field)
- [Card pop-up](/docs/sdks/merchant-web-sdk/payment-methods/pop-up)
- [Upsell module initialisation](/docs/sdks/merchant-web-sdk/initialisation/upsell-module)
- [Add promotional banner to card field](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/card-field#5-add-promotional-banner-to-the-widget)
- [Add promotional banner to card pop-up](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/pop-up#5-add-promotional-banner-to-the-widget)