Skip to content

Revolut Pay

The Revolut:RevolutPay provider renders a Revolut Pay button using the Revolut Checkout Payments SDK.

Options — RevolutPayOptions

FieldTypeRequiredDefaultDescription
publicTokenstringYesRevolut public API key. Use pk_sbox_... for sandbox, pk_live_... for production
currencystringYesISO 4217 currency code (e.g. 'EUR', 'GBP')
totalAmountnumberYesAmount in minor units (e.g. 19300 = €193.00)
requestShippingbooleanNofalseRequest shipping information from the shopper

Style — RevolutPayStyle

FieldTypeDescription
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();

CollanaPay SDK Documentation