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

Prerequisites​

This promotional widget requires Upsell module initialisation.

Use in combination with:

• Card gateway banner - During checkout
• Promotional banner - Post-checkout fallback for non-enrolled customers

Type signature​

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	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	No
promotionalBanner	Display promotional banner for non-enrolled customers. Default: false	boolean	No
promotionalBannerStyle	Customise promotional banner appearance	PromotionalBannerStyle	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​

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:

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

With promotional banner fallback​

Show promotional banner for customers who aren't enrolled:

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'
    }
  }
)

With customer pre-fill​

Pre-fill customer details for unfinished enrollment attempts:

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: '[email protected]',
      phone: '+441234567890'
    },
    promotionalBanner: true,
    promotionalBannerStyle: {
      border: '1px solid #e5e5e5',
      borderRadius: '8px',
      backgroundColor: '#ffffff',
      primaryColor: '#007681'
    }
  }
)

See also​

• Card gateway banner
• Promotional banner
• Upsell module initialisation