Revolut Pay

Revolut Pay

Provider key: Revolut:RevolutPay

Renders: a Revolut Pay button using the Revolut Checkout Payments SDK.

Options — RevolutPayOptions

Required

Field	Type	Description
publicToken	string	Revolut public API key. Use pk_sbox_... for sandbox, pk_live_... for production.
currency	string	ISO 4217 currency code (e.g. 'EUR', 'GBP').
totalAmount	number	Amount in minor units (e.g. 19300 = €193.00).

Optional

Field	Type	Default	Description
isShippingCustomerDataRequired	boolean	false	When false (default), Revolut Pay collects the shipping address from the shopper (requestShipping: true). When true, the backend already supplies the address and Revolut Pay skips collection (requestShipping: false).
locale	string	—	Checkout UI locale. Accepts collana pay format (de-DE) or Revolut format (de).

Checkout flow flags

isShippingCustomerDataRequired follows the shared CheckoutFlowFlags convention used across providers: false = PSP collects the data, true = backend already has it. The flag maps inverted to the Revolut SDK: requestShipping = !isShippingCustomerDataRequired.

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
height	string	Button height as CSS value (e.g. '40px', '3rem'). SDK default when omitted.
action	'donate' | 'pay' | 'subscribe' | 'buy'	Label shown on the button face. Default: 'pay'.

Example

<div id="revolut-container"></div>

const buttons = CollanaPay.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
        // isShippingCustomerDataRequired: false  → Revolut collects shipping (default)
        // isShippingCustomerDataRequired: true   → backend already has shipping address
      },
    },
  ],

  onClick: async (identity, options) => {
    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: identity, options }),
    });
    const transaction = await res.json();
    return transaction.checkoutData;
  },

  onCancel: (identity) => {
    console.log('Revolut Pay cancelled', identity);
  },

  onError: (identity, error) => {
    console.error('Revolut Pay error', error);
  },
});

buttons.render();