Revolut Pay
The Revolut:RevolutPay provider renders a Revolut Pay button using the Revolut Checkout Payments SDK.
Options — RevolutPayOptions
| Field | Type | Required | Default | Description |
|---|---|---|---|---|
publicToken | string | Yes | — | Revolut public API key. Use pk_sbox_... for sandbox, pk_live_... for production |
currency | string | Yes | — | ISO 4217 currency code (e.g. 'EUR', 'GBP') |
totalAmount | number | Yes | — | Amount in minor units (e.g. 19300 = €193.00) |
requestShipping | boolean | No | false | Request shipping information from the shopper |
Style — RevolutPayStyle
| Field | Type | Description |
|---|---|---|
variant | 'dark' | 'light' | 'light-outlined' | Button color variant |
radius | 'none' | 'small' | 'large' | 'round' | Button border radius |
size | 'small' | 'large' | Button size |
Example
html
<div id="revolut-container"></div>js
import { ExpressButtons } from 'collana-pay-js';
const buttons = ExpressButtons({
providers: [
{
providerProtocolType: 'Revolut',
paymentMethodType: 'RevolutPay',
container: '#revolut-container',
style: {
variant: 'dark',
radius: 'small',
size: 'large',
},
options: {
publicToken: 'pk_sbox_YOUR_TOKEN',
currency: 'EUR',
totalAmount: 19300, // €193.00
requestShipping: false,
},
},
],
onClick: async (identity, paymentMethodData) => {
const res = await fetch('/api/orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ provider: identity, paymentMethodData }),
});
const order = await res.json();
return { orderId: order.id };
},
onApprove: (data) => {
window.location.href = `/order/success?id=${data.orderId}`;
},
onCancel: (identity) => {
console.log('Revolut Pay cancelled', identity);
},
onError: (error) => {
console.error('Revolut Pay error', error);
},
});
buttons.render();