Merchant Web SDKs
Instance.payWithPopup
doc

Instance.payWithPopup

Open a payment pop-up window, which is available on the Instance.

Options​

Use the Options object to specify the pages where the customer should be redirected, and any additional information related to the payment of the customer:

type InstancePayWithPopup = (
  options: Options
) => {
  destroy: () => void;
};


type RevolutCheckoutError = {
  type: string;
  message: string;
  code?: number;
}

type Options = {
  onSuccess?: () => void;
  onError?: (error: RevolutCheckoutError) => void;
  onCancel?: () => void;
  name?: string;
  email?: string;
  phone?: string;
  locale?: string;
  upsellBanner?: boolean;
  savePaymentMethodFor?: string;
  billingAddress?: {
    countryCode: string;
    region?: string;
    city?: string;
    postcode: string;
    streetLine1?: string;
    streetLine2?: string;
  };
  shippingAddress?: {
    countryCode: string;
    region?: string;
    city?: string;
    postcode: string;
    streetLine1?: string;
    streetLine2?: string;
  };
};
OptionDescriptionFormat
onSuccessCallback when the payment is successfully completed.Function
onErrorCallback if the transaction fails to complete. The reason for the failure is available in the message parameter.Function
onCancelCallback if a user did not complete the transaction and cancelled the authorisation or closed the payment pop-up window.Function
localeControls the language of the text in the widget.

Possible values
  • auto (default) - Detect using browser locale,
  • en (English)
  • en-US (English - US),
  • es (Spanish),
  • de (German),
  • fr (French),
  • it (Italian),
  • nl (Dutch),
  • pl (Polish),
  • pt (Portuguese),
  • cs (Czech),
  • hu (Hungarian),
  • sk (Slovak),
  • ja (Japanese),
  • sv (Swedish),
  • bg (Bulgarian),
  • el (Greek),
  • ro (Romanian),
  • ru (Russian),
  • lt (Lithuanian),
  • hr (Croatian)
String
upsellBannerControls if the upsell banner is displayed on the pop-up window.Boolean
nameCardholder's name in the format of FirstName LastName. This value is optional. If not sent, it will be dynamically asked in the popup.String
emailCustomer's email. This is optional. If not sent, it will be dynamically asked in the pop-up (if it wasn't already set on the order via API).String
phoneCustomer's phone number if availableString
savePaymentMethodForControls if and how the payment method should be saved after a successful payment.

A customer.id must be associated with the order to save a payment method. If not provided during initialisation, then the SDK will create a new customer and link it to the order associated with the payment session.

Possible values:
  • customer (default): A checkbox is displayed in the pop-up, allowing the customer to choose whether to save their card details for future payments. The checkbox is unchecked by default. This is intended for Customer Initiated Transactions (CIT).
  • merchant: A message is displayed in the pop-up, informing the customer that their card details will be saved so the merchant can charge them later without their presence. This is intended for Merchant Initiated Transactions (MIT), e.g. take payments for recurring transactions. This payment method is saved as the new default payment method for merchant initiated transactions, regardless of the number of saved payment methods stored against the customer.
  • none: No checkbox or message is displayed. The payment method is not saved.
Enum
billingAddressCustomer's billing address, which is required if not set on order via API.Object
billingAddress.countryCodeCountry code (e.g. GB). If sending the billingAddress, this is required.String
billingAddress.regionState, county or region. For US states, the 2-digit abbreviation should be used (e.g. AL for Alabama)String
billingAddress.cityName of the city (e.g. London)String
billingAddress.postcodePostal code (e.g. EC2V 6DN). If sending the billingAddress, this is required.String
billingAddress.streetLine1Address line 1 (e.g. 1 Canada Square)String
billingAddress.streetLine2Address line 2 (optional)String
shippingAddressThe same object as the billingAddress object. However, it is displayed only in the order details on the Merchant Dashboard.Object

Returns​

Methods object:

FieldDescriptionFormat
methods.destroyManually destroy payment pop-up if neededFunction

Examples​

Example with minimal required parameters​

RevolutCheckout("<token>").then(function (instance) {
  instance.payWithPopup({
    onSuccess() {
      window.alert("Thank you!");
    },
    onError(message) {
      window.alert("Oh no :(");
    },
  });
});

Example with minimal required parameters, when billingAddress is not sent via API​

RevolutCheckout("<token>").then(function (instance) {
  instance.payWithPopup({
    onSuccess() {
      window.alert("Thank you!");
    },
    onError(message) {
      window.alert("Oh no :(");
    },
    locale: "es",
    billingAddress: {
      countryCode: "GB",
      region: "Greater London",
      city: "London",
      streetLine1: "Revolut",
      streetLine2: "1 Canada Square",
      postcode: "EC2V 6DN"
    },
  });
});

Example with all possible parameters​

RevolutCheckout("<token>").then(function (instance) {
  var popup = instance.payWithPopup({
    name: "John Smith",
    email: "customer@example.com",
    phone: "+447950630319",
    locale: "es",
    upsellBanner: true,
    billingAddress: {
      countryCode: "GB",
      region: "Greater London",
      city: "London",
      streetLine1: "Revolut",
      streetLine2: "1 Canada Square",
      postcode: "EC2V 6DN"
    },
    shippingAddress: {
      countryCode: "GB",
      region: "Greater London",
      city: "London",
      streetLine1: "Revolut",
      streetLine2: "1 Canada Square",
      postcode: "EC2V 6DN"
    },
    onSuccess() {
      window.alert("Thank you!");
    },
    onError(message) {
      window.alert("Oh no :(");
    }
  });


  // ...


  popup.destroy();
});

For a more in-depth example, see the pay with pop-up example.

PreviousThe checkout object
NextInstance.createCardField
Was this page helpful?