# Display the Revolut Promotional banner on your checkout page

Enhance your checkout experience by displaying Revolut's promotional banner on your website. The promotional banner invites your customers to learn more about Revolut Pay and its benefits or to join Revolut and receive a reward.

:::tip[Boost your conversions!]
Leveraging upsell flows, like offering rewards for new sign-ups, can be particularly effective. Analysis indicates that such flows **can increase conversion to payment by approximately 5%.**
:::

In this tutorial, we'll walk you through the process of implementing the Promotional banner using the [Revolut Checkout Widget](/docs/sdks/merchant-web-sdk/introduction). The Promotional banner allows you to provide additional information about Revolut Pay to your customers during checkout or to offer new Revolut users a reward after a successful purchase.

Customers who eventually join Revolut will receive a reward and will be able to use their Revolut account to pay via Revolut Pay (if it's available on your checkout) in the future.

- ![Small banner]

  ![Promotional banner - Small banner](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-small-banner.png 'Promotional banner - Small banner')

- ![Icon]

  ![Promotional banner - Icon](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-icon.png 'Promotional banner - Icon')

- ![Link]

  ![Promotional banner - Link](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-link.png 'Promotional banner - Link')

- ![Sign up form]

  ![Promotional banner - Sign up form](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-sign-up.png 'Promotional banner - Sign up form')

## How it works

The Promotional banner can be displayed in different variants, depending on where you want to place it in your checkout flow and what action you want your customers to take.

### About RevPoints

RevPoints is Revolut's loyalty rewards program that allows customers to earn points on transactions and redeem them for discounts. When you promote RevPoints through the promotional banner:

**For merchants:**

- Increase conversion rates by offering additional value
- Encourage repeat purchases through loyalty incentives
- Attract new Revolut customers to your platform

**For customers:**

- Earn points on purchases that can be used for future discounts
- Revolut customers earn higher RevPoints on transactions
- Immediate value proposition at checkout

### Promotional banner variants

The `promotionalBanner` module offers four variants:

| Variant   | Description                                                                                                                                                                                                                                                 | Placement                  |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `banner`  | Displays an informational banner with a brief description of Revolut Pay benefits. It allows your customer to open a pop-up with more details about the payment process and benefits.                                                                       | Before the payment         |
| `icon`    | Displays an icon which opens a pop-up with details on the Revolut Pay payment process and benefits.                                                                                                                                                         | Before the payment         |
| `link`    | Displays a **"Learn more"** link which opens a pop-up with details on the Revolut Pay payment process and benefits.                                                                                                                                         | Before the payment         |
| `sign_up` | Offers your customer to join Revolut, receive a reward, and gain access to Revolut Pay (if it's available on your checkout). This variant is shown after a successful purchase to promote registering with Revolut and encourage future use of Revolut Pay. | After a successful payment |

#### `banner`, `link`, and `icon` variants

These variants are directly related to **Revolut Pay**. They are designed to be displayed **before the payment** during your checkout process. When customers interact with these elements, they open a pop-up window providing additional information about Revolut Pay and its benefits.

- ![Existing Revolut user]

  ![Promotional banner - Pop-up, existing user](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-existing-user.png 'Promotional banner - Pop-up, existing user')

- ![New Revolut user]

  ![Promotional banner - Pop-up, new user](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/promotional-banner-new-user.png 'Promotional banner - Pop-up, new user')

#### `sign_up` variant

This variant is intended to be displayed **after a successful purchase**. It promotes registering with Revolut, offers customers a reward, and encourages them to use Revolut Pay for future purchases (if it's available on your checkout).

### Implementation Overview

To implement the Promotional banner on your website, you need to:

1. [Install the Revolut Checkout Widget](#1-install-the-revolut-checkout-widget)
1. [Initialise the upsell module](#2-initialise-the-upsell-module)
1. [Configure the Promotional banner](#3-configure-the-promotional-banner)
1. [(Optional) Customise the banner](#4-optional-customise-the-banner)
1. [Mount the banner](#5-mount-the-promotional-banner)

### Before you begin

Before you start this tutorial, ensure you have completed the following steps:

- [Get started: 1. Apply for a Merchant account](/docs/guides/merchant/get-started)
- [Get started: 2. Generate the API keys](/docs/guides/merchant/get-started)

## Implement the Promotional banner

### 1. Install the Revolut Checkout Widget

First, ensure the Revolut Checkout Widget is installed in your project. This widget is necessary to display the Promotional banner. You can install the widget via your project's package manager.

```install
npm install @revolut/checkout
```

:::info
Alternatively, you can add the embed script directly to your page. For more information, see: [Installation](/docs/sdks/merchant-web-sdk/introduction#installation).
:::

### 2. Initialise the upsell module

Import the `RevolutCheckout` package into your project and use the `.upsell()` method to load the upsell module with your [Merchant API Public key](https://business.revolut.com/settings/merchant-api).

- ![With async await]

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

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

  // Further initialisation and configuration code will go here
  ```

- ![Without async await]

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

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

    // Further initialisation and configuration code will go here
  })
  ```

### 3. Configure the Promotional banner

Depending on the variant you choose, you'll need to configure the `bannerOptions` object accordingly and mount the banner to a target element on your page.

##### Choosing a variant

Decide which variant of the Promotional banner you want to implement:

- **Before payment:** To provide more information about Revolut Pay during the checkout process, choose one of the `banner`, `link`, or `icon` variants.
- **After payment:** To offer new Revolut users a reward after a successful purchase, choose the `sign_up` variant.

#### 3.1 Implementing the `banner`, `link`, or `icon` variants

These variants are designed to be displayed **before the payment**. They provide customers with information about Revolut Pay and its benefits.

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>', // Merchant public API key
  })

  const bannerOptions = {
    variant: 'banner', // Choose 'banner', 'link', or 'icon'
    currency: 'GBP', // ISO 4217 currency code
    amount: 1000, // Amount in minor units (e.g., pence for GBP)
  }

  // Mounting code will go here
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>', // Merchant public API key
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: 'banner', // Choose 'banner', 'link', or 'icon'
      currency: 'GBP', // ISO 4217 currency code
      amount: 1000, // Amount in minor units (e.g., pence for GBP)
    }

    // Mounting code will go here
  })
  ```

##### Displaying the pop-up

When customers interact with the `banner`, `link`, or `icon`, a pop-up window opens, providing more details about Revolut Pay and its benefits.

#### 3.2 Implementing the `sign_up` variant

The `sign_up` variant is designed to be displayed **after a successful payment**. It invites customers to join Revolut, receive a reward, and use Revolut Pay for future purchases.

:::info
Optionally, you can provide further information about your customer using the `bannerOptions.customer` object.
:::

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>', // Merchant public API key
  })

  const bannerOptions = {
    variant: 'sign_up',
    transactionId: '<uniqueTransactionId>', // Unique ID from your system
    currency: 'GBP',
    amount: 500, // Optional: Reward amount in minor units
    customer: {
      name: 'Example Customer',
      email: 'example.customer@example.com',
      phone: '+441234567890',
    },
  }

  // Mounting code will go here
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>', // Merchant public API key
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: 'sign_up',
      transactionId: '<uniqueTransactionId>', // Unique ID from your system
      currency: 'GBP',
      amount: 500, // Optional: Reward amount in minor units
      customer: {
        name: 'Example Customer',
        email: 'example.customer@example.com',
        phone: '+441234567890',
      },
    }

    // Mounting code will go here
  })
  ```

:::info
For a complete list of parameters and their function, see: [Promotional banner](/docs/sdks/merchant-web-sdk/promotional-widgets/promotional-banner).
:::

### 4. (Optional) Customise the banner

Optionally, you can customise the appearance of the banner using the `style` object within the `bannerOptions`.

#### `sign_up` variant

```js
const bannerOptions = {
  variant: 'sign_up',
  currency: 'GBP',
  amount: 1000,
  style: {
    border: '1px solid #ccc',
    borderRadius: '5px',
    backgroundColor: '#f9f9f9',
    primaryColor: '#007681',
  },
}
```

#### `icon` variant

```js
const bannerOptions = {
  variant: 'icon',
  currency: 'GBP',
  amount: 1000,
  style: {
    size: 'small', // 'regular' or 'small'
    color: 'black', // 'blue' or 'black'
    outline: true, // true or false
  },
}
```

#### `link` variant

By default, the `link` variant displays a "Learn more" link that opens a pop-up with information about Revolut Pay benefits.

```js
const bannerOptions = {
  variant: 'link',
  currency: 'GBP',
  amount: 1000,
}
```

##### RevPoints messaging

Optionally, you can customise the link text to promote RevPoints benefits by adding the `style.text` property:

- ![Get discounts]

  Use this when your customers are likely existing Revolut users with RevPoints to spend. This encourages them to use their accumulated points for discounts on the current purchase.

  ```js
  const bannerOptions = {
    variant: 'link',
    currency: 'GBP',
    amount: 1000,
    style: {
      text: 'get_discounts',
    },
  }
  ```

- ![Earn as customer]

  Use this to attract new customers by highlighting that Revolut customers earn higher RevPoints on transactions. This incentivizes non-Revolut customers to sign up.

  ```js
  const bannerOptions = {
    variant: 'link',
    currency: 'GBP',
    amount: 1000,
    style: {
      text: 'earn_as_customer',
    },
  }
  ```

### 5. Mount the Promotional banner

Finally, mount the banner to a target element on your page with the `bannerOptions` you defined.

```js
promotionalBanner.mount(
  document.getElementById('promotional-banner'),
  bannerOptions,
)
```

## Examples

### Example with minimal required parameters (defaults to `sign_up` variant)

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>',
  })

  const bannerOptions = {
    transactionId: '<uniqueTransactionId>',
    currency: 'GBP',
  }

  promotionalBanner.mount(
    document.getElementById('promotional-banner'),
    bannerOptions,
  )
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    publicToken: '<yourPublicApiKey>',
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      transactionId: '<uniqueTransactionId>',
      currency: 'GBP',
    }

    promotionalBanner.mount(
      document.getElementById('promotional-banner'),
      bannerOptions,
    )
  })
  ```

### Example with all parameters - `banner` variant

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  })

  const bannerOptions = {
    variant: `banner`
    currency: 'GBP',
    amount: 500
  }

  promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: `banner`
      currency: 'GBP',
      amount: 500
    }

    promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  })

  ```

### Example with all parameters - `icon` variant

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  })

  const bannerOptions = {
    variant: `icon`
    currency: 'GBP',
    amount: 500,
    style: {
      size: 'small',
      color: 'blue',
      outline: true
    }
  }

  promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: `icon`
      currency: 'GBP',
      amount: 500,
      style: {
        size: 'small',
        color: 'blue',
        outline: true
      }
    }

    promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  })

  ```

### Example - `link` variant (default)

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>',
  })

  const bannerOptions = {
    variant: 'link',
    currency: 'GBP',
    amount: 500,
  }

  promotionalBanner.mount(
    document.getElementById('promotional-banner'),
    bannerOptions,
  )
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>',
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: 'link',
      currency: 'GBP',
      amount: 500,
    }

    promotionalBanner.mount(
      document.getElementById('promotional-banner'),
      bannerOptions,
    )
  })
  ```

### Example - `link` variant with RevPoints text options

- ![Get discounts]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>',
  })

  const bannerOptions = {
    variant: 'link',
    currency: 'GBP',
    amount: 500,
    style: {
      text: 'get_discounts',
    },
  }

  promotionalBanner.mount(
    document.getElementById('promotional-banner'),
    bannerOptions,
  )
  ```

- ![Earn as customer]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>',
  })

  const bannerOptions = {
    variant: 'link',
    currency: 'GBP',
    amount: 500,
    style: {
      text: 'earn_as_customer',
    },
  }

  promotionalBanner.mount(
    document.getElementById('promotional-banner'),
    bannerOptions,
  )
  ```

### Example with all parameters - `sign_up` variant

- ![With async await]

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

  const { promotionalBanner } = await RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  })

  const bannerOptions = {
    variant: `sign_up`
    transactionId: '<uniqueTransactionId>',
    currency: 'GBP',
    amount: 500,
    customer: {
      name: 'Example Customer',
      email: 'example.customere@example.com',
      phone: '+441234567890'
    },
    style: {
      border: '1px solid black',
      borderRadius: '0',
      backgroundColor: 'white',
      primaryColor: '#007681'
    }
  }

  promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  ```

- ![Without async await]

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

  RevolutCheckout.upsell({
    locale: 'en',
    mode: 'sandbox',
    publicToken: '<yourPublicApiKey>'
  }).then(({ upsellInstance }) => {
    const promotionalBanner = upsellInstance.promotionalBanner

    const bannerOptions = {
      variant: `sign_up`
      transactionId: '<uniqueTransactionId>',
      currency: 'GBP',
      amount: 500,
      customer: {
        name: 'Example Customer',
        email: 'example.customere@example.com',
        phone: '+441234567890'
      },
      style: {
        border: '1px solid black',
        borderRadius: '0',
        backgroundColor: 'white',
        primaryColor: '#007681'
      }
    }

    promotionalBanner.mount(document.getElementById('promotional-banner'), bannerOptions)
  })

  ```

---

## Alternative solutions

Alternatively, if you're using the Revolut Checkout Widget for card payments, you can integrate the promotional banner directly within the widget. For more information, see:

- [Card field: Add promotional banner to the widget](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/card-field#5-optional-add-promotional-banner-to-the-widget)
- [Card pop-up: Add promotional banner to the widget](/docs/guides/merchant/accept-payments/online-payments/card-payments/web/pop-up#5-optional-add-promotional-banner-to-the-widget)

## What's next

- [Learn more about the Promotional banner](/docs/sdks/merchant-web-sdk/promotional-widgets/promotional-banner)
- [Explore the Revolut Checkout Widget SDK](/docs/sdks/merchant-web-sdk/introduction)
- [Implement Revolut Pay on your website](/docs/guides/merchant/accept-payments/online-payments/revolut-pay/web)
- [Accept online card payments](/docs/guides/merchant/accept-payments/online-payments/card-payments/introduction)