# `enrollmentConfirmationBanner()`

Display confirmation messaging after checkout to inform customers about their enrollment status in promotional offers. The enrollment confirmation banner shows different messages based on whether the customer successfully enrolled, had an unfinished enrollment attempt, or is eligible for future enrollment.

**Key features:**

- Enrollment success confirmation
- Unfinished enrollment attempt messaging
- Optional promotional banner for non-enrolled customers
- Customer data pre-filling
- Customisable styling

![Revolut - Enrollment confirmation banner](/img/sdks/revolut-checkout-js/initialize-widget/revolut-checkout-upsell/enrollment-confirmation-banner1.png)

## Prerequisites

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

Use in combination with:

- [Card gateway banner](/docs/sdks/merchant-web-sdk/promotional-widgets/card-gateway-banner) - During checkout
- [Promotional banner](/docs/sdks/merchant-web-sdk/promotional-widgets/promotional-banner) - Post-checkout fallback for non-enrolled customers

## Type signature

```typescript
UpsellModuleEnrollmentConfirmationBannerInstance.mount(
  target: HTMLElement,
  options: EnrollmentConfirmationBannerOptions
): EnrollmentConfirmationBannerMethods

interface EnrollmentConfirmationBannerOptions {
  orderToken: string
  customer?: {
    name?: string
    email?: string
    phone?: string
  }
  promotionalBanner?: boolean
  promotionalBannerStyle?: {
    border?: string
    borderRadius?: string
    backgroundColor?: string
    primaryColor?: string
  }
}

interface EnrollmentConfirmationBannerMethods {
  destroy: () => void
}
```

## Parameters

| Parameter | Description                                                 | Type                                                                                    | Required |
| --------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------- | -------- |
| `target`  | DOM element where the banner should be mounted              | `HTMLElement`                                                                           | Yes      |
| `options` | Configuration object for the enrollment confirmation banner | [`EnrollmentConfirmationBannerOptions`](#enrollmentconfirmationbanneroptions-interface) | Yes      |

### `EnrollmentConfirmationBannerOptions` interface

| Parameter                | Description                                                                  | Type                                                  | Required |
| ------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------------- | -------- |
| `orderToken`             | The order token (`order.token`) associated with the current checkout session | `string`                                              | Yes      |
| `customer`               | Pre-fill customer details for enrollment attempts                            | [`CustomerDetails`](#customer-details)                | No       |
| `promotionalBanner`      | Display promotional banner for non-enrolled customers. Default: `false`      | `boolean`                                             | No       |
| `promotionalBannerStyle` | Customise promotional banner appearance                                      | [`PromotionalBannerStyle`](#promotional-banner-style) | No       |

#### Customer details

| Parameter | Description                                                                                           | Type     | Required |
| --------- | ----------------------------------------------------------------------------------------------------- | -------- | -------- |
| `name`    | Customer's full name (e.g., `'John Doe'`)                                                             | `string` | No       |
| `email`   | Customer's email address. Instructions for claiming rewards are sent to this address                  | `string` | No       |
| `phone`   | Customer's phone number with country code (e.g., `'+441234567890'`). Pre-filled on banner if provided | `string` | No       |

#### Promotional banner style

| Parameter         | Description                                                         | Type     | Required |
| ----------------- | ------------------------------------------------------------------- | -------- | -------- |
| `border`          | CSS border attributes (e.g., `'1px solid #000'`)                    | `string` | No       |
| `borderRadius`    | CSS border radius value. Applies to banner and interactive elements | `string` | No       |
| `backgroundColor` | CSS background colour                                               | `string` | No       |
| `primaryColor`    | CSS primary colour for branding                                     | `string` | No       |

## Return value

```typescript
EnrollmentConfirmationBannerMethods

interface EnrollmentConfirmationBannerMethods {
  destroy: () => void
}
```

The method returns an `EnrollmentConfirmationBannerMethods` object containing:

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

## How it works

The enrollment confirmation banner displays different messages based on the customer's enrollment status:

1. **Enrollment successful**: Shows confirmation that the customer successfully enrolled in the promotional offer
2. **Unfinished enrollment attempt**: Informs customers who gave consent but didn't provide valid contact details
3. **Not enrolled** (optional): If `promotionalBanner: true`, displays promotional banner to encourage enrollment

## Usage examples

### Basic enrollment confirmation

Display enrollment confirmation with minimal configuration:

- ![With async/await]

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

  const orderToken = '<token>'

  const { enrollmentConfirmationBanner } = await RevolutCheckout.upsell({
    publicToken: process.env.REVOLUT_PUBLIC_KEY,
    mode: 'prod',
  })

  enrollmentConfirmationBanner.mount(
    document.getElementById('enrollment-confirmation-banner'),
    {
      orderToken,
    },
  )
  ```

- ![Without async/await]

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

  const orderToken = '<token>'

  RevolutCheckout.upsell({
    publicToken: process.env.REVOLUT_PUBLIC_KEY,
    mode: 'prod',
  }).then(({ enrollmentConfirmationBanner }) => {
    enrollmentConfirmationBanner.mount(
      document.getElementById('enrollment-confirmation-banner'),
      {
        orderToken,
      },
    )
  })
  ```

### With promotional banner fallback

Show promotional banner for customers who aren't enrolled:

- ![With async/await]

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

  const orderToken = '<token>'

  const { enrollmentConfirmationBanner } = await RevolutCheckout.upsell({
    publicToken: process.env.REVOLUT_PUBLIC_KEY,
    mode: 'prod',
  })

  enrollmentConfirmationBanner.mount(
    document.getElementById('enrollment-confirmation-banner'),
    {
      orderToken,
      promotionalBanner: true, // Show promotional banner for non-enrolled customers
      promotionalBannerStyle: {
        border: '1px solid #e5e5e5',
        borderRadius: '8px',
        backgroundColor: '#ffffff',
        primaryColor: '#007681',
      },
    },
  )
  ```

- ![Without async/await]

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

  const orderToken = '<token>'

  RevolutCheckout.upsell({
    publicToken: process.env.REVOLUT_PUBLIC_KEY,
    mode: 'prod',
  }).then(({ enrollmentConfirmationBanner }) => {
    enrollmentConfirmationBanner.mount(
      document.getElementById('enrollment-confirmation-banner'),
      {
        orderToken,
        promotionalBanner: true,
        promotionalBannerStyle: {
          border: '1px solid #e5e5e5',
          borderRadius: '8px',
          backgroundColor: '#ffffff',
          primaryColor: '#007681',
        },
      },
    )
  })
  ```

### With customer pre-fill

Pre-fill customer details for unfinished enrollment attempts:

```typescript
const { enrollmentConfirmationBanner } = await RevolutCheckout.upsell({
  publicToken: process.env.REVOLUT_PUBLIC_KEY,
  mode: 'prod',
})

enrollmentConfirmationBanner.mount(
  document.getElementById('enrollment-confirmation-banner'),
  {
    orderToken: '<token>',
    customer: {
      name: 'John Doe',
      email: 'john.doe@example.com',
      phone: '+441234567890',
    },
    promotionalBanner: true,
    promotionalBannerStyle: {
      border: '1px solid #e5e5e5',
      borderRadius: '8px',
      backgroundColor: '#ffffff',
      primaryColor: '#007681',
    },
  },
)
```

## See also

- [Card gateway banner](/docs/sdks/merchant-web-sdk/promotional-widgets/card-gateway-banner)
- [Promotional banner](/docs/sdks/merchant-web-sdk/promotional-widgets/promotional-banner)
- [Upsell module initialisation](/docs/sdks/merchant-web-sdk/initialisation/upsell-module)