### Install RevolutCheckout.js
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Install the RevolutCheckout.js library using npm or yarn.
```bash
npm install @revolut/checkout
# or
yarn add @revolut/checkout
```
--------------------------------
### Install RevolutCheckout with npm
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/README.md
Install the RevolutCheckout library using npm. This is the standard package manager for Node.js.
```bash
npm install @revolut/checkout
```
--------------------------------
### Pay By Bank Example
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Demonstrates how to initialize and display the Pay By Bank payment flow with specific options.
```typescript
const payByBank = payments.payByBank({
createOrder: async () => ({ publicId: 'order123' }),
instantOnly: true,
location: 'GB'
})
payByBank.show()
```
--------------------------------
### Initialize RevolutCheckout with Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Example of initializing RevolutCheckout with a specific mode, such as 'sandbox' for testing.
```typescript
const instance = await RevolutCheckout(token, 'sandbox')
```
--------------------------------
### Full Example: HTML + JS Payment Checkout
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
A complete HTML and JavaScript example demonstrating the integration of RevolutCheckout for a payment button that triggers a popup.
```html
Payment Checkout
Checkout
```
--------------------------------
### Install RevolutCheckout with yarn
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/README.md
Install the RevolutCheckout library using yarn. Yarn is another popular JavaScript package manager.
```bash
yarn add @revolut/checkout
```
--------------------------------
### Example: Initialize Payment Request Button
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Demonstrates how to initialize a payment request button with specific options, such as requesting shipping and email, and customizing button style.
```typescript
instance.paymentRequest({
target: document.getElementById('payment-button'),
requestShipping: true,
requestPayerEmail: true,
buttonStyle: {
height: '50px'
}
})
```
--------------------------------
### Button Style Example
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Provides an example of how to define button style options for a payment button, including size, variant, and cashback settings.
```typescript
const buttonStyle: ButtonStyleOptions = {
size: 'large',
variant: 'dark',
action: 'pay',
cashback: true,
cashbackCurrency: 'GBP'
}
```
--------------------------------
### Example: Mount Revolut Pay with Currency and Amount
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Shows how to mount the Revolut Pay button using currency and total amount for order creation. Includes line items for detailed order information.
```typescript
payments.revolutPay.mount('#button', {
createOrder: async () => ({ publicId: 'order123' }),
currency: 'GBP',
totalAmount: 2999,
lineItems: [
{
name: 'Product',
unitPriceAmount: '25.00',
totalAmount: '25.00',
quantity: { value: 1, unit: 'PIECES' }
}
]
})
```
--------------------------------
### Example: Mount Revolut Pay with Session Token
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Demonstrates mounting Revolut Pay using a session token, which is an alternative to providing currency and total amount directly.
```typescript
payments.revolutPay.mount('#button', {
createOrder: async () => ({ publicId: 'order123' }),
sessionToken: 'session-token-from-api'
})
```
--------------------------------
### Example FieldStyles Configuration
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/types.md
Demonstrates how to configure custom CSS styles for different states of card input fields, including default, focused, invalid, and completed states.
```typescript
const styles: FieldStyles = {
default: {
fontSize: '14px',
padding: '10px'
},
focused: {
borderColor: 'blue',
boxShadow: '0 0 0 3px rgba(0, 0, 255, 0.1)'
},
invalid: {
borderColor: 'red'
},
completed: {
borderColor: 'green'
}
}
```
--------------------------------
### Complete Redirect URL Handler Example
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/7-helper-functions.md
A comprehensive example demonstrating how to handle payment redirects by checking for order ID, success, and failure parameters. This function should be called on page load to process the results of a redirect-based payment.
```typescript
import {
getRevolutPayOrderIdURLParam,
getRevolutPaySuccessURLParam,
getRevolutPayFailureURLParam
} from '@revolut/checkout'
// Call on page load to check redirect results
function handlePaymentRedirect() {
const orderId = getRevolutPayOrderIdURLParam()
const success = getRevolutPaySuccessURLParam()
const failure = getRevolutPayFailureURLParam()
if (!orderId) {
// No payment redirect parameters found
return
}
if (success) {
// Confirm payment succeeded
console.log('Payment successful for order:', orderId)
updateUI('success')
fetch('/api/confirm-order', {
method: 'POST',
body: JSON.stringify({ orderId })
})
} else if (failure) {
// Handle payment failure
console.log('Payment failed for order:', orderId)
updateUI('failure')
fetch('/api/fail-order', {
method: 'POST',
body: JSON.stringify({ orderId, reason: failure })
})
}
}
// Call on page load
handlePaymentRedirect()
```
--------------------------------
### Embedded Checkout Example
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Shows how to initialize the embedded checkout form with a public token, target element, locale, and order creation function.
```typescript
const checkout = await RevolutCheckout.embeddedCheckout({
publicToken: 'TOKEN_XXX',
target: document.getElementById('checkout'),
locale: 'en',
createOrder: async () => ({ publicId: 'order123' }),
email: 'customer@example.com'
})
```
--------------------------------
### Example: Initialize Payments Module Payment Request
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Initializes the Payment Request API in the payments module, specifying order details and preferred payment methods like Apple Pay and Google Pay.
```typescript
const paymentRequest = payments.paymentRequest(
document.getElementById('button'),
{
createOrder: async () => ({ publicId: 'order123' }),
amount: 2999,
currency: 'GBP',
preferredPaymentMethod: ['applePay', 'googlePay']
}
)
```
--------------------------------
### RevolutCheckoutLoader.mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Sets or gets the default environment mode for all RevolutCheckoutLoader calls. This property can be set once to globally change the default behavior.
```APIDOC
## RevolutCheckoutLoader.mode
Default mode used for all loader calls. Set once to change the default behavior globally.
### Signature
```typescript
RevolutCheckoutLoader.mode: Mode = 'prod'
```
### Example
```typescript
import RevolutCheckout from '@revolut/checkout'
RevolutCheckout.mode = 'sandbox'
RevolutCheckout('TOKEN').then(instance => {
// Will use sandbox mode by default
})
```
```
--------------------------------
### Access Embedded Checkout via RevolutCheckoutLoader
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/6-embedded-checkout.md
This example demonstrates accessing the `embeddedCheckout` function through the main `RevolutCheckout` loader, which might be useful for managing different checkout modes or configurations.
```typescript
import RevolutCheckout from '@revolut/checkout'
const checkout = await RevolutCheckout.embeddedCheckout({
mode: 'sandbox',
publicToken: 'TOKEN_XXX',
target: document.getElementById('checkout-container'),
createOrder: () => ({ publicId: 'order123' })
})
```
--------------------------------
### Basic Usage: Initialize and Pay with Popup
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Load the library with a token and mode, then initiate a payment using the popup method. The onSuccess and onError callbacks handle the payment outcome.
```typescript
import RevolutCheckout from '@revolut/checkout'
// Load the library
const instance = await RevolutCheckout('TOKEN_XXX', 'prod')
// Show payment popup
instance.payWithPopup({
email: 'customer@example.com',
onSuccess: () => console.log('Payment successful'),
onError: (error) => console.log('Payment failed:', error)
})
```
--------------------------------
### Get Customer Email for Payment
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Retrieve the customer's email from an input field and pass it to the payWithPopup method.
```typescript
const email = document.getElementById('email-input').value
instance.payWithPopup({
email: email,
onSuccess: () => { /* ... */ }
})
```
--------------------------------
### Get Revolut Pay Failure Confirmation from URL
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/7-helper-functions.md
Retrieve the Revolut Pay failure confirmation from redirect URL parameters. This parameter is found in `_rp_fr`.
```typescript
import { getRevolutPayFailureURLParam } from '@revolut/checkout'
const failure = getRevolutPayFailureURLParam()
if (failure) {
console.log('Payment failed')
// Update order status
fetch('/api/update-order-status', {
method: 'POST',
body: JSON.stringify({ status: 'failed' })
})
}
```
--------------------------------
### RevolutCheckoutLoader Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Static properties and methods available on the RevolutCheckoutLoader. Use these to initialize and interact with the loader.
```javascript
RevolutCheckoutLoader(token, mode?)
.mode // Static property
.payments(options) // Static method
.upsell(options) // Static method
.embeddedCheckout(options) // Static method
```
--------------------------------
### Initialize and Pay with Popup
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/2-revolut-checkout-instance.md
Use `payWithPopup` to display a full-screen payment modal. Configure locale, customer email, and callbacks for success, error, and cancellation.
```typescript
instance.payWithPopup({
locale: 'en',
email: 'customer@example.com',
onSuccess: () => {
console.log('Payment successful')
},
onError: (error) => {
console.error('Payment failed:', error.message)
},
onCancel: () => {
console.log('User cancelled payment')
}
})
```
--------------------------------
### Get Revolut Pay Success Confirmation from URL
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/7-helper-functions.md
Retrieve the Revolut Pay success confirmation from redirect URL parameters. This parameter is found in `_rp_s`.
```typescript
import { getRevolutPaySuccessURLParam } from '@revolut/checkout'
const success = getRevolutPaySuccessURLParam()
if (success) {
console.log('Payment confirmed as successful')
// Update order status
fetch('/api/update-order-status', {
method: 'POST',
body: JSON.stringify({ status: 'paid' })
})
}
```
--------------------------------
### RevolutCheckout Loader Initialization
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Use the default export to load the library and create a checkout instance by providing a token and an optional mode.
```typescript
import RevolutCheckout from '@revolut/checkout'
const instance = await RevolutCheckout(token, mode?)
```
--------------------------------
### Initialize RevolutCheckout
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Initialize the RevolutCheckout instance with a payment token obtained from your backend and the environment mode (sandbox or prod).
```typescript
// Get token from your backend
const paymentToken = 'your_public_id_from_create_order_api'
// Initialize checkout
const instance = await RevolutCheckout(paymentToken, 'sandbox')
// Use 'sandbox' for testing, 'prod' for production
```
--------------------------------
### Get Revolut Pay Order ID from URL
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/7-helper-functions.md
Retrieve the Revolut Pay order ID from redirect URL parameters. Use this function after redirect-based payment flows when using the `redirectUrls` option.
```typescript
import { getRevolutPayOrderIdURLParam } from '@revolut/checkout'
// When user is redirected back from payment
const orderId = getRevolutPayOrderIdURLParam()
if (orderId) {
// Confirm payment on backend
fetch('/api/confirm-order', {
method: 'POST',
body: JSON.stringify({ orderId })
})
}
```
--------------------------------
### Mount Pay By Bank Button
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
This snippet demonstrates how to initialize and display a Pay By Bank payment button. Configure it with order creation logic, preferred payment method options, and callbacks for success, error, and cancellation.
```typescript
const payByBank = payments.payByBank({
createOrder: async () => {
const { publicId } = await fetch('/api/create-order').then(r => r.json())
return { publicId }
},
instantOnly: true,
location: 'GB',
onSuccess: ({ orderId }) => {
console.log('Bank payment successful:', orderId)
},
onError: ({ error, orderId }) => {
console.error('Bank payment failed:', error)
}
})
payByBank.show()
```
--------------------------------
### Load RevolutCheckout and Create Instance
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Load the RevolutCheckout.js script and create a checkout instance for processing payments. This is the primary method for initializing the checkout flow.
```typescript
import RevolutCheckout from '@revolut/checkout'
RevolutCheckout('TOKEN_XXX', 'prod').then((instance) => {
// Use instance methods:
// instance.payWithPopup()
// instance.createCardField()
// instance.payments()
})
```
--------------------------------
### RevolutCheckoutLoader Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods available on the RevolutCheckoutLoader for initializing and interacting with the checkout service.
```APIDOC
## RevolutCheckoutLoader
### Description
Provides static methods for initializing and accessing Revolut Checkout functionalities.
### Methods
- `RevolutCheckoutLoader(token, mode?)`: Constructor to create a loader instance.
- `.mode`: Static property to access the current mode.
- `.payments(options)`: Static method to initiate payment flows.
- `.upsell(options)`: Static method to manage upsell functionalities.
- `.embeddedCheckout(options)`: Static method to configure embedded checkout experiences.
```
--------------------------------
### Payment Request Instance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
Provides methods to render the payment button, check payment capabilities, and destroy the instance. Use `render` to display the button and `canMakePayment` to check for supported payment methods.
```typescript
interface PaymentRequestInstance {
render(): Promise
canMakePayment(): Promise
destroy(): void
}
```
--------------------------------
### Initialize RevolutCheckout
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/README.md
Initialize the RevolutCheckout instance with a public token and API mode. This instance can then be used to interact with Revolut's payment services.
```javascript
import RevolutCheckout from '@revolut/checkout'
RevolutCheckout('TOKEN_XXX', 'prod').then((instance) => {
// Work with instance:
// instance.payWithPopup()
// instance.createCardField()
// ...
})
```
--------------------------------
### RevolutCheckoutLoader.upsell
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Creates an upsell module instance, which is used for displaying promotional banners and enrollment confirmations to users.
```APIDOC
## RevolutCheckoutLoader.upsell
Create an upsell module instance for displaying promotional banners and enrollment confirmations.
### Signature
```typescript
RevolutCheckoutLoader.upsell(options: {
publicToken: string
locale?: Locale | 'auto'
mode?: Mode
}): Promise
```
### Parameters
#### Request Body
* **publicToken** (string) - Required - Public token for the order
* **locale** (Locale | 'auto') - Optional - Language/locale for the UI
* **mode** (Mode) - Optional - Environment mode
### Returns
Promise resolving to `RevolutUpsellModuleInstance`
```
--------------------------------
### Import RevolutCheckout
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Import the RevolutCheckout library into your TypeScript project.
```typescript
import RevolutCheckout from '@revolut/checkout'
```
--------------------------------
### payWithPopup
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Shows the payment popup for initiating a transaction.
```APIDOC
## payWithPopup
### Description
Shows the payment popup for initiating a transaction.
### Method
`instance.payWithPopup(options)`
### Parameters
#### Request Body
- **options** (object) - Required - Configuration object for the payment popup.
- **email** (string) - Required - Customer's email address.
- **onSuccess** (function) - Optional - Callback function executed on successful payment.
- **onError** (function) - Optional - Callback function executed on payment failure.
- **onCancel** (function) - Optional - Callback function executed when the user cancels the payment.
### Request Example
```typescript
instance.payWithPopup({
email: 'customer@example.com',
onSuccess: () => console.log('Payment successful'),
onError: (error) => console.log('Payment failed:', error),
onCancel: () => console.log('Payment cancelled')
})
```
```
--------------------------------
### RevolutUpsellModuleInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods for the RevolutUpsellModuleInstance, managing various banner types for upsells.
```javascript
.cardGatewayBanner.mount(target, options)
.cardGatewayBanner.destroy()
.promotionalBanner.mount(target, options)
.promotionalBanner.destroy()
.enrollmentConfirmationBanner.mount(target, options)
.enrollmentConfirmationBanner.destroy()
.destroy()
.setDefaultLocale(locale)
```
--------------------------------
### Initialize Payments Module and Mount Revolut Pay
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/2-revolut-checkout-instance.md
Initializes the payments module with a public token and locale, then mounts the Revolut Pay component to a specified container. This is used for advanced payment options.
```typescript
const payments = instance.payments({
publicToken: 'TOKEN_XXX',
locale: 'en'
})
payments.revolutPay.mount('#container', {
createOrder: async () => ({ publicId: 'order123' })
})
```
--------------------------------
### Initialize Revolut Checkout in Sandbox Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Use this snippet to initialize the Revolut Checkout with your token in sandbox mode. This is ideal for testing your integration in a development environment without processing live payments.
```typescript
RevolutCheckout('TOKEN', 'sandbox')
```
--------------------------------
### Initiate Payment Request with Apple Pay/Google Pay
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
Use this snippet to create a payment request for platforms like Apple Pay or Google Pay. It requires a public token and an element to mount the payment button. The `createOrder` function should fetch a public ID for order creation.
```typescript
const payments = await RevolutCheckout.payments({
publicToken: 'TOKEN_XXX'
})
const paymentRequest = payments.paymentRequest(
document.getElementById('apple-google-pay'),
{
createOrder: async () => {
const { publicId } = await fetch('/api/create-order').then(r => r.json())
return { publicId }
},
amount: 2999,
currency: 'GBP',
preferredPaymentMethod: ['applePay', 'googlePay'],
requestShipping: true,
onSuccess: () => {
console.log('Payment successful')
}
}
)
const canPay = await paymentRequest.canMakePayment()
if (canPay) {
await paymentRequest.render()
}
```
--------------------------------
### payWithPopup
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/2-revolut-checkout-instance.md
Displays a full-screen payment modal with card field and customer email input. Returns the same instance for method chaining.
```APIDOC
## payWithPopup
### Description
Display a full-screen payment modal with card field and customer email input.
### Signature
```typescript
payWithPopup(options?: PopupOptions): RevolutCheckoutInstance
```
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
#### Options
- **options.locale** (Locale | 'auto') - Optional - Language for the UI, defaults to 'auto'
- **options.onSuccess** (() => void) - Optional - Callback when payment succeeds
- **options.onError** ((error: RevolutCheckoutError) => void) - Optional - Callback when payment fails
- **options.onCancel** (() => void) - Optional - Callback when user cancels
- **options.savePaymentMethodFor** ('merchant' | 'customer') - Optional - Who can use saved payment method
- **options.name** (string) - Optional - Cardholder name
- **options.email** (string) - Optional - Customer email
- **options.phone** (string) - Optional - Customer phone number
- **options.billingAddress** (Address) - Optional - Customer billing address
- **options.shippingAddress** (Address) - Optional - Customer shipping address
### Request Example
```typescript
instance.payWithPopup({
locale: 'en',
email: 'customer@example.com',
onSuccess: () => {
console.log('Payment successful')
},
onError: (error) => {
console.error('Payment failed:', error.message)
},
onCancel: () => {
console.log('User cancelled payment')
}
})
```
### Response
#### Success Response (200)
`RevolutCheckoutInstance` - Returns the same instance for method chaining.
#### Response Example
None provided.
```
--------------------------------
### RevolutCheckoutInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods available on a RevolutCheckoutInstance for managing payment actions and checkout state.
```APIDOC
## RevolutCheckoutInstance
### Description
Represents an instance of the Revolut Checkout interface, providing methods to control payment processes and UI elements.
### Methods
- `.payWithPopup(options)`: Initiates a payment using a popup.
- `.createCardField(options)`: Creates and configures a card input field.
- `.revolutPay(options)`: Initiates a Revolut Pay payment (Deprecated).
- `.openBanking(options)`: Initiates an Open Banking payment flow.
- `.paymentRequest(options)`: Handles payment requests for methods like Apple Pay or Google Pay.
- `.payments(options)`: General method for initiating payment flows.
- `.embeddedCheckout(options)`: Configures and manages an embedded checkout experience.
- `.destroy()`: Cleans up and destroys the checkout instance.
- `.setDefaultLocale(locale)`: Sets the default locale for the checkout instance.
```
--------------------------------
### RevolutUpsellModuleInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods for the RevolutUpsellModuleInstance to manage various banner types for upsell offers.
```APIDOC
## RevolutUpsellModuleInstance
### Description
Manages different types of banners for presenting upsell offers to customers.
### Methods
- `.cardGatewayBanner.mount(target, options)`: Mounts a card gateway banner.
- `.cardGatewayBanner.destroy()`: Destroys the card gateway banner.
- `.promotionalBanner.mount(target, options)`: Mounts a promotional banner.
- `.promotionalBanner.destroy()`: Destroys the promotional banner.
- `.enrollmentConfirmationBanner.mount(target, options)`: Mounts an enrollment confirmation banner.
- `.enrollmentConfirmationBanner.destroy()`: Destroys the enrollment confirmation banner.
- `.destroy()`: Destroys the upsell module instance.
- `.setDefaultLocale(locale)`: Sets the default locale for the upsell module.
```
--------------------------------
### RevolutPaymentsModuleInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods for the RevolutPaymentsModuleInstance, covering Revolut Pay, payment requests, and polling.
```javascript
.revolutPay.mount(target, options)
.revolutPay.on(event, callback)
.revolutPay.destroy()
.paymentRequest(target, options)
.payByBank(options)
.pollPaymentState(token, callbacks)
.destroy()
.setDefaultLocale(locale)
```
--------------------------------
### Initialize Revolut Checkout in Development Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Use this snippet for internal development and testing purposes. This mode connects to a specific development endpoint.
```typescript
RevolutCheckout('TOKEN', 'dev')
```
--------------------------------
### Mount Revolut Pay Button and Handle Payment
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
Mounts a Revolut Pay v2 button and sets up event handlers for payment success. It requires an async function to create an order and specifies currency, total amount, and customer details.
```typescript
const payments = await RevolutCheckout.payments({
publicToken: 'TOKEN_XXX',
locale: 'en'
})
payments.revolutPay.mount('#revolut-pay-button', {
createOrder: async () => {
const response = await fetch('/api/create-order', {
method: 'POST',
body: JSON.stringify({ amount: 2999, currency: 'GBP' })
})
const { publicId } = await response.json()
return { publicId }
},
currency: 'GBP',
totalAmount: 2999,
customer: {
email: 'customer@example.com'
}
})
payments.revolutPay.on('payment', (payload) => {
if (payload.type === 'success') {
// Confirm order on backend
fetch('/api/confirm-order', {
method: 'POST',
body: JSON.stringify({ orderId: payload.orderId })
})
}
})
```
--------------------------------
### Create Payments Module Instance
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Directly create a payments module instance for payment-specific functionalities like Revolut Pay, Apple Pay, Google Pay, and Pay By Bank. This method does not require creating a full checkout instance.
```typescript
const paymentsModule = await RevolutCheckout.payments({
publicToken: 'TOKEN_XXX',
locale: 'en'
})
paymentsModule.revolutPay.mount('#container', {
createOrder: () => ({ publicId: 'order123' })
})
```
--------------------------------
### RevolutCheckoutInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods available on a RevolutCheckoutInstance for handling payments, card fields, and checkout flows.
```javascript
.payWithPopup(options)
.createCardField(options)
.revolutPay(options) [Deprecated]
.openBanking(options)
.paymentRequest(options)
.payments(options)
.embeddedCheckout(options)
.destroy()
.setDefaultLocale(locale)
```
--------------------------------
### Initialize and Submit Card Field
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/3-card-field.md
Initialize the card field with target element and callbacks. Later, submit the card field with customer details and billing address when a user clicks a submit button.
```typescript
const cardField = instance.createCardField({
target: document.getElementById('card-field'),
onSuccess: () => {
console.log('Payment successful')
},
onError: (error) => {
console.error('Payment failed:', error)
}
})
// Later, when user clicks submit button
document.getElementById('pay-button').addEventListener('click', () => {
cardField.submit({
email: 'customer@example.com',
name: 'John Doe',
billingAddress: {
countryCode: 'GB',
postcode: 'SW1A 1AA',
city: 'London',
streetLine1: '123 Main St'
}
})
})
```
--------------------------------
### Add Payment Button - Full-Screen Popup
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Implement a click event listener on a button to trigger the payment popup. Handles success and error callbacks.
```typescript
const button = document.getElementById('pay-button')
button.addEventListener('click', () => {
instance.payWithPopup({
email: 'customer@example.com',
onSuccess: () => {
console.log('✓ Payment successful')
// Confirm on your backend
},
onError: (error) => {
console.log('✗ Payment failed:', error.type)
}
})
})
```
--------------------------------
### revolutPay
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
Mount a Revolut Pay v2 button for quick wallet-based payments. This method allows users to initiate payments using Revolut's wallet service.
```APIDOC
## revolutPay
### Description
Mount a Revolut Pay v2 button for quick wallet-based payments.
### Signature
```typescript
revolutPay: {
mount(target: string | HTMLElement | null, options: WidgetPaymentsRevolutPayOptions): void
on(event: T, callback: (payload: RevolutPayEventPayload) => void): void
destroy(): void
}
```
### Mount Parameters
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| target | string \| HTMLElement \| null | Yes | CSS selector or element to mount button into |
| options.createOrder | function | Yes | Async function returning `{ publicId: string }` |
| options.currency | string | Yes (or sessionToken) | ISO currency code (e.g., 'GBP') |
| options.totalAmount | number | Yes (or sessionToken) | Amount in lowest denomination |
| options.sessionToken | string | Yes (or currency + totalAmount) | Pre-created session token |
| options.lineItems | array | No | Order line items with details |
| options.locale | Locale \| 'auto' | No | Language for the UI |
| options.requestShipping | boolean | No | Request shipping address |
| options.redirectUrls | object | No | URLs for success/failure/cancel redirects |
| options.mobileRedirectUrls | object | No | Mobile-specific redirect URLs |
| options.appReturnUrl | string | No | App return URL for mobile |
| options.billingAddress | Address | No | Customer billing address |
| options.buttonStyle | ButtonStyleOptions | No | Button appearance options |
| options.customer | CustomerDetails | No | Pre-fill customer details |
| options.savePaymentMethodForMerchant | boolean | No | Save payment method for merchant |
| options.validate | function | No | Pre-payment validation function |
| options.onSuccess | function | No | Success callback |
| options.onError | function | No | Error callback |
| options.onCancel | function | No | Cancel callback |
### Events
Subscribe to payment events using the `on` method:
```typescript
revolutPay.on('payment', (payload) => {
if (payload.type === 'success') {
console.log('Payment successful, order:', payload.orderId)
} else if (payload.type === 'error') {
console.error('Payment failed:', payload.error)
} else if (payload.type === 'cancel') {
console.log('Payment cancelled at state:', payload.dropOffState)
}
})
revolutPay.on('click', (payload) => {
console.log('Revolut Pay button clicked')
})
```
### Example
```typescript
const payments = await RevolutCheckout.payments({
publicToken: 'TOKEN_XXX',
locale: 'en'
})
payments.revolutPay.mount('#revolut-pay-button', {
createOrder: async () => {
const response = await fetch('/api/create-order', {
method: 'POST',
body: JSON.stringify({ amount: 2999, currency: 'GBP' })
})
const { publicId } = await response.json()
return { publicId }
},
currency: 'GBP',
totalAmount: 2999,
customer: {
email: 'customer@example.com'
}
})
payments.revolutPay.on('payment', (payload) => {
if (payload.type === 'success') {
// Confirm order on backend
fetch('/api/confirm-order', {
method: 'POST',
body: JSON.stringify({ orderId: payload.orderId })
})
}
})
```
```
--------------------------------
### Initialize Revolut Checkout in Production Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Use this snippet to initialize the Revolut Checkout with your production token. This directs all payment processing to the live merchant API endpoint.
```typescript
RevolutCheckout('TOKEN', 'prod')
```
--------------------------------
### Callback Pattern for Operations
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Demonstrates the use of callbacks (onSuccess, onError, onCancel) for asynchronous operations in RevolutCheckout.
```typescript
instance.payWithPopup({
onSuccess: () => { }, // Payment succeeded
onError: (error) => { }, // Payment failed
onCancel: () => { } // User cancelled
})
```
--------------------------------
### Import Testing Utilities
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Import internal testing utilities for unit testing with the Revolut Checkout library. These are intended for testing purposes only.
```typescript
import {
triggerScriptOnLoad,
triggerScriptOnError,
settleVersionScript
} from '@revolut/checkout/src/testing'
```
--------------------------------
### RevolutCheckoutLoader
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Loads the RevolutCheckout.js script and returns a promise that resolves to a checkout instance. This instance can be used for various payment processing methods.
```APIDOC
## RevolutCheckoutLoader
Loads the RevolutCheckout.js script and creates a checkout instance for processing payments.
### Signature
```typescript
function RevolutCheckoutLoader(
token: string,
mode?: Mode
): Promise
```
### Parameters
#### Path Parameters
* **token** (string) - Required - The `public_id` token from the create payment order API request
* **mode** (Mode) - Optional - The environment: `'prod'`, `'sandbox'`, or `'dev'`
### Returns
`Promise` — Promise that resolves to a checkout instance with methods for payment processing.
### Example
```typescript
import RevolutCheckout from '@revolut/checkout'
RevolutCheckout('TOKEN_XXX', 'prod').then((instance) => {
// Use instance methods:
// instance.payWithPopup()
// instance.createCardField()
// instance.payments()
})
```
```
--------------------------------
### Initiate Revolut Pay
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/2-revolut-checkout-instance.md
Initiates the Revolut Pay payment flow. Use this method to integrate Revolut Pay with a specific HTML element and configure payment details and callbacks. Note: This method is deprecated.
```typescript
instance.revolutPay({
target: document.getElementById('revolut-pay-button'),
email: 'customer@example.com',
buttonStyle: {
size: 'large',
variant: 'dark'
},
onSuccess: () => {
console.log('Revolut Pay succeeded')
}
})
```
--------------------------------
### Configure Popup Options for Payment
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Customize the behavior and appearance of the full-screen payment popup. You can set the locale, define callbacks for success, error, and cancellation, and control payment method saving.
```typescript
interface PopupOptions extends CustomerDetails {
locale?: Locale | 'auto'
onSuccess?: () => void
onError?: (error: RevolutCheckoutError) => void
onCancel?: () => void
savePaymentMethodFor?: 'merchant' | 'customer'
}
```
```typescript
instance.payWithPopup({
locale: 'en',
email: 'customer@example.com',
savePaymentMethodFor: 'merchant',
onSuccess: () => console.log('Success'),
onError: (error) => console.log('Error:', error)
})
```
--------------------------------
### Pay By Bank Options Interface
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/configuration.md
Defines the structure for configuring Pay By Bank payment options. Includes callbacks for order creation, success, error, and cancellation.
```typescript
interface PaymentsModulePayByBankOptions {
createOrder: () => Promise<{ publicId: string }>
instantOnly?: boolean
location?: CountryCode
onSuccess?: (payload: { orderId: string }) => void
onError?: (payload: { error: RevolutCheckoutError; orderId: string }) => void
onCancel?: (payload: { orderId: string | undefined }) => void
}
```
--------------------------------
### Import TypeScript Definitions
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Import all available type definitions from the Revolut Checkout library for use in TypeScript projects.
```typescript
import {
RevolutCheckoutInstance,
RevolutPaymentsModuleInstance,
RevolutCheckoutError,
ValidationError,
FieldStatus,
Mode,
Locale
} from '@revolut/checkout'
```
--------------------------------
### Enums Reference
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Lists and describes the available enumerations for various settings and types.
```APIDOC
## Enums Reference
### Description
Defines enumerations used for various configurations and types within the Revolut Checkout API.
### Enums
- `Mode`: Specifies the operating environment ('prod', 'sandbox', 'dev').
- `Locale`: Represents supported language codes for localization.
- `ValidationErrorType`: Contains specific codes for different validation errors.
- `RevolutCheckoutErrorType`: Contains specific codes for payment processing errors.
- `PaymentRequestPaymentMethod`: Specifies payment methods for payment requests (e.g., 'applePay', 'googlePay').
- `RevolutPayDropOffState`: Indicates cancellation points in the Revolut Pay payment flow.
```
--------------------------------
### Mount Sign-Up Promotional Banner
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/5-upsell-module.md
Encourages customers to join Revolut and earn rewards by displaying a sign-up promotional banner. Requires transaction details and optional customer information.
```typescript
upsell.promotionalBanner.mount('#banner-container', {
variant: 'sign_up',
transactionId: 'tx-12345',
amount: 2999,
currency: 'GBP',
customer: {
email: 'customer@example.com'
},
style: {
backgroundColor: '#fff',
primaryColor: '#000'
}
})
```
--------------------------------
### Helper Functions
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Helper functions for generating URL parameters related to Revolut Pay.
```APIDOC
## Helper Functions
### Description
Utility functions to generate URL parameters for Revolut Pay integration.
### Functions
- `getRevolutPayOrderIdURLParam()`: Returns the URL parameter key for the order ID.
- `getRevolutPaySuccessURLParam()`: Returns the URL parameter key for the success callback.
- `getRevolutPayFailureURLParam()`: Returns the URL parameter key for the failure callback.
```
--------------------------------
### Provide Customer Details for Pre-filled Address
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/integration-patterns.md
Populate customer information such as email, name, phone, and billing/shipping addresses when initiating a payment to pre-fill forms.
```typescript
import RevolutCheckout from '@revolut/checkout'
const instance = await RevolutCheckout('TOKEN_XXX')
instance.payWithPopup({
email: 'john@example.com',
name: 'John Doe',
phone: '+44 7911 123456',
billingAddress: {
countryCode: 'GB',
postcode: 'SW1A 1AA',
city: 'London',
region: 'England',
streetLine1: '1 Parliament Street'
},
shippingAddress: {
countryCode: 'GB',
postcode: 'SW1A 1AA',
city: 'London',
streetLine1: '1 Parliament Street'
}
})
```
--------------------------------
### Set Global Sandbox Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/README.md
Configure the Revolut Checkout library to use sandbox mode globally. All subsequent calls will default to this mode.
```typescript
import RevolutCheckout from '@revolut/checkout'
RevolutCheckout.mode = 'sandbox'
// All subsequent calls use sandbox
RevolutCheckout('TOKEN').then(instance => {
// Uses sandbox mode
})
```
--------------------------------
### payByBank
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/4-payments-module.md
Mounts the Pay By Bank button for initiating bank account transfers. It allows configuration of order creation, payment type, location, and callbacks for success, error, and cancellation.
```APIDOC
## payByBank
### Description
Mount Pay By Bank button for bank account transfers.
### Method
`payByBank: { (options: PaymentsModulePayByBankOptions): PaymentsModulePayByBankInstance }`
### Parameters
#### Options
- **options.createOrder** (function) - Required - Async function to create order.
- **options.instantOnly** (boolean) - Optional - Only show instant bank payments.
- **options.location** (CountryCode) - Optional - Preferred payment location.
- **options.onSuccess** (function) - Optional - Success callback `{ orderId }`.
- **options.onError** (function) - Optional - Error callback `{ error, orderId }`.
- **options.onCancel** (function) - Optional - Cancel callback `{ orderId }`.
### PaymentsModulePayByBankInstance Methods
#### show
Display the payment flow.
#### destroy
Clean up.
### Example
```typescript
const payByBank = payments.payByBank({
createOrder: async () => {
const { publicId } = await fetch('/api/create-order').then(r => r.json())
return { publicId }
},
instantOnly: true,
location: 'GB',
onSuccess: ({ orderId }) => {
console.log('Bank payment successful:', orderId)
},
onError: ({ error, orderId }) => {
console.error('Bank payment failed:', error)
}
})
payByBank.show()
```
```
--------------------------------
### Define API Environment Mode
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/types.md
Specifies the environment for API interactions. Use 'prod' for production, 'sandbox' for testing, and 'dev' for development.
```typescript
type Mode = 'prod' | 'sandbox' | 'dev'
```
--------------------------------
### Define available payment request methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/types.md
Specifies the available payment methods that can be requested through payment requests, such as Apple Pay and Google Pay.
```typescript
type PaymentRequestPaymentMethod = 'applePay' | 'googlePay'
```
--------------------------------
### RevolutPaymentsModuleInstance Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods for the RevolutPaymentsModuleInstance to manage specific payment methods and status polling.
```APIDOC
## RevolutPaymentsModuleInstance
### Description
Provides methods for managing specific payment modules, such as Revolut Pay and Pay by Bank, and for polling payment status.
### Methods
- `.revolutPay.mount(target, options)`: Mounts the Revolut Pay component to a target element.
- `.revolutPay.on(event, callback)`: Attaches an event listener for Revolut Pay.
- `.revolutPay.destroy()`: Destroys the Revolut Pay component.
- `.paymentRequest(target, options)`: Handles payment requests for integrated payment methods.
- `.payByBank(options)`: Initiates a Pay by Bank payment flow.
- `.pollPaymentState(token, callbacks)`: Polls the payment status using a token.
- `.destroy()`: Destroys the payments module instance.
- `.setDefaultLocale(locale)`: Sets the default locale for the payments module.
```
--------------------------------
### RevolutCheckoutLoader.payments
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/1-revolut-checkout-loader.md
Creates a payments module instance directly, bypassing the need to create a full checkout instance. This is useful for payment-specific features like Revolut Pay, Apple Pay, Google Pay, and Pay By Bank.
```APIDOC
## RevolutCheckoutLoader.payments
Create a payments module instance directly without creating a checkout instance. Use this for payment-specific functionality including Revolut Pay, Apple Pay, Google Pay, and Pay By Bank.
### Signature
```typescript
RevolutCheckoutLoader.payments(options: {
publicToken: string
locale?: Locale | 'auto'
mode?: Mode
}): Promise
```
### Parameters
#### Request Body
* **publicToken** (string) - Required - Public token for the order
* **locale** (Locale | 'auto') - Optional - Language/locale for the UI, defaults to auto-detection
* **mode** (Mode) - Optional - Environment mode, defaults to `RevolutCheckoutLoader.mode`
### Returns
Promise resolving to `RevolutPaymentsModuleInstance`
### Example
```typescript
const paymentsModule = await RevolutCheckout.payments({
publicToken: 'TOKEN_XXX',
locale: 'en'
})
paymentsModule.revolutPay.mount('#container', {
createOrder: () => ({ publicId: 'order123' })
})
```
```
--------------------------------
### Initialize Embedded Checkout
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/6-embedded-checkout.md
Use this snippet to initialize the embedded checkout with order details, customer information, and event handlers. Ensure the target element exists and the public token is valid. The `createOrder` function is crucial for dynamic order creation.
```typescript
import RevolutCheckout from '@revolut/checkout'
const checkout = await RevolutCheckout.embeddedCheckout({
publicToken: 'TOKEN_XXX',
target: document.getElementById('checkout-container'),
locale: 'en',
createOrder: async () => {
const response = await fetch('/api/create-order', {
method: 'POST',
body: JSON.stringify({
amount: 2999,
currency: 'GBP',
description: 'Product purchase'
})
})
const { publicId } = await response.json()
return { publicId }
},
email: 'customer@example.com',
billingAddress: {
countryCode: 'GB',
postcode: 'SW1A 1AA',
city: 'London',
streetLine1: '123 Main St'
},
onSuccess: ({ orderId }) => {
console.log('Payment successful, order:', orderId)
// Redirect or confirm order
fetch('/api/confirm-order', {
method: 'POST',
body: JSON.stringify({ orderId })
})
},
onError: ({ error, orderId }) => {
console.error('Payment failed:', error.message)
// Handle error
},
onCancel: ({ orderId }) => {
console.log('Checkout cancelled')
}
})
// Clean up when needed
checkout.destroy()
```
--------------------------------
### Initiate Payment Request for Apple/Google Pay
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/QUICK-START.md
Create a payment request for Apple Pay or Google Pay, specifying the target element and an onSuccess callback.
```typescript
const paymentRequest = instance.paymentRequest({
target: document.getElementById('payment-button'),
requestShipping: true,
onSuccess: () => console.log('Payment successful')
})
```
--------------------------------
### RevolutCheckoutCardField Methods
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/INDEX.md
Methods for interacting with a RevolutCheckoutCardField, including submission and validation.
```javascript
.submit(meta?)
.validate()
[+ all RevolutCheckoutInstance methods]
```
--------------------------------
### Define button style options
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/types.md
Defines configuration options for button appearance and behavior, including height, size, border radius, color variant, action label, and cashback display.
```typescript
type ButtonStyleOptions = {
height?: string // Button height (e.g., '40px')
size?: 'large' | 'small' // Predefined size
radius?: 'none' | 'small' | 'large' | 'round' // Border radius
variant?: 'dark' | 'light' | 'light-outlined' // Color scheme
action?: 'donate' | 'pay' | 'subscribe' | 'buy' // Button label
cashback?: boolean // Show cashback indicator
cashbackCurrency?: string // Currency for cashback display
}
```
--------------------------------
### Mount Enrollment Confirmation Banner
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/api-reference/5-upsell-module.md
Displays an enrollment confirmation banner after sign-up. Can optionally show a promotional banner if the user is not enrolled. Requires order token.
```typescript
upsell.enrollmentConfirmationBanner.mount('#banner-container', {
orderToken: 'order-abc123',
customer: {
email: 'customer@example.com'
},
style: {
backgroundColor: '#f5f5f5'
},
promotionalBanner: true,
promotionalBannerStyle: {
primaryColor: '#000'
}
})
```
--------------------------------
### Manage Multiple Checkout Instances
Source: https://github.com/revolut-engineering/revolut-checkout/blob/master/_autodocs/integration-patterns.md
Create and manage separate Revolut Checkout instances for different orders on the same page, ensuring independent functionality and proper cleanup.
```typescript
import RevolutCheckout from '@revolut/checkout'
// Create separate instances for different orders
const order1Instance = await RevolutCheckout('TOKEN_ORDER_1')
const order2Instance = await RevolutCheckout('TOKEN_ORDER_2')
// Use them independently
order1Instance.payWithPopup({
onSuccess: () => console.log('Order 1 paid')
})
order2Instance.payWithPopup({
onSuccess: () => console.log('Order 2 paid')
})
// Clean up when done
order1Instance.destroy()
order2Instance.destroy()
```