Skip to main content

Accept payments via Revolut Pay

The Revolut Pay payment method enables your users to pay with their Revolut account directly after they authorize this payment method on the Revolut App.

In this way, you can accept payments without having to ask your users to enter their card details. This improves the checkout experience for your users greatly.

How Revolut Pay works#

See how the Revolut Pay works the first time a user is directed to a checkout page on a web browser:

  1. The user finds the Revolut Pay payment method on the checkout page, and scans the QR code. This starts the authorization process of paying with their Revolut account.

    note

    If the user doesn't have the Revolut app installed on the phone, the user is redirected to a promotional page to download the app and open an account.

  2. The user receives a notification on their Revolut app to authorize this payment method.

  3. After the user makes the first payment successfully on the checkout page, the Revolut checkout widget saves a token in local storage of the browser.

  4. The next time the user visits your site or any other site with the Revolut Pay payment method, the user doesn't need to scan the QR code, and the notification for authorization appears directly on their Revolut app.

    note

    So that the user can skip scanning the QR code, the same phone and/or email used as the first time must be filled in the checkout form.

You can check the payment process in the following diagram:

Implement Revolut Pay#

Because the Revolut Pay method is included in the Revolut Checkout Widget, the steps to accept a payment via Revolut Pay are similar to those to accept a card payment.

Check the following high-level procedure to integrate a Revolut Checkout Widget for the Revolut Pay method with the Merchant API:

  1. Server side: Create an order via the Merchant API request
  2. Client side: Install the widget by adding RevolutCheckout to your application
  3. Client side: Choose the option to load Revolut Pay and call the appropriate widget instance.
note

As you can see, the only difference is in Step 3 where you need to insert the Revolut Pay button to call the widget instance. Check the following implementation details below.

Calling the widget instance#

Insert the Revolut Pay button using the code snippet below that contains an example with minimum required parameters, where:

  • RevolutCheckout is the widget instance
  • <PUBLIC_ID> is the public_id passed as the parameter to call the widget instance. You can find the value of public_id in the response that the Merchant API returns when you create an order successfully.
  • The onSuccess and onError options are used to redirect the user to the right pages when the payment has been processed.
<div id='revolut-pay'></div>
RevolutCheckout("<PUBLIC_ID>").then(function(instance) {  instance.revolutPay({    target: document.getElementById('revolut-pay'),    phone: '+441632960022', // recommended    onSuccess() {      console.log('Payment completed')    },    onError(error) {      console.error('Payment failed: ' + error.message)    }  })})

This is what the button looks like:

success

Congratulations! You’ve successfully implemented Revolut Pay and are ready to accept the first payment.

What's next#

To view the full list of parameters, take a look at the documentation.

Was this section helpful?