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: RevolutCheckout) => 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 are: 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), 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 popup (if it wasn't already set on the order via API).String
phoneCustomer's phone number if availableString
savePaymentMethodForIndicates in which case this saved payment method can be used for payments.

Possible values:
  • customer: This method is used only when the customer is on the checkout page.
  • merchant: This method can be used without the customer being on the checkout page, and the merchant can initiate transactions (e.g. take payments for recurring transactions). This 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.
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?