Skip to main content

Accept your first card payment

tip

If you have your website running on WooCommerce, Prestashop, or Magento 2 e-commerce platform, you need to Install and configure Revolut plugins.

This tutorial walks you through the steps to accept the first payment. The tutorial assumes that you run your own e-commerce website and manage its code and files.

Check the following high-level procedure to integrate a Revolut Checkout Widget (widget) 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 collect card details and call the widget instance.

Before you start this tutorial, ensure that you have completed the following steps:

1. Create an order#

When a user decides to make a purchase on your e-commerce website, on the server side, you create an order by sending a POST request to https://merchant.revolut.com/api/1.0/orders. You must include the authorization header in the request, which is in the following format:

Bearer [yourAPIKey]

Where [yourAPIKey] is the production API key that you generated from your Merchant account.

note

You must create an order for each purchase.

Here’s an example request:

curl -X "POST" "https://merchant.revolut.com/api/1.0/orders" \     -H 'Authorization: Bearer [yourApiKey]' \     -H 'Content-Type: application/json; charset=utf-8' \     -d $'{          "amount": 100,          "currency": "GBP"        }'

When the order is created successfully, the Merchant API returns a JSON array in the response that looks like this:

{  "id": "<ID>",  "public_id": "<PUBLIC_ID>",  "type": "PAYMENT",  "state": "PENDING",  "created_date": "2020-10-15T07:46:40.648108Z",  "updated_date": "2020-10-15T07:46:40.648108Z",  "order_amount": {    "value": 100,    "currency": "GBP"  }}
tip

From the response, save the public_id, which is a temporary token generated for every order a customer initiates on the website. It’s also the identifier passed from the server side to the client side to call the widget instance.

When the order is paid, the public_id expires.

2. Install the widget#

When the order is successfully created, on the client side, you install the widget.

To install the Revolut Checkout Widget, you need to add RevolutCheckout to your checkout page in one of the following ways:

  • Adding the embed script to the checkout HTML page. This adds RevolutCheckout to the browser’s global window.
  • Installing the widget’s npm package. This uses JavaScript modules to access the widget instance.
tip

The script is requested asynchronously, so you don’t need to worry about the content that blocks the loading of the page.

Add the embed script#

Add the embed script to the document head of your checkout HTML page.

<head><title>Shop</title><script>!function(e,o,t){e[t]=function(n,r){var c={sandbox:"https://sandbox-merchant.revolut.com/embed.js",prod:"https://merchant.revolut.com/embed.js",dev:"https://merchant.revolut.codes/embed.js"},d=o.createElement("script");d.id="revolut-checkout",d.src=c[r]||c.prod,d.async=!0,o.head.appendChild(d);var s={then:function(r,c){d.onload=function(){r(e[t](n))},d.onerror=function(){o.head.removeChild(d),c&&c(new Error(t+" is failed to load"))}}};return"function"==typeof Promise?Promise.resolve(s):s}}(window,document,"RevolutCheckout");</script></head>

Install the widget’s NPM package#

Step 1. Run the command to install the widget’s NPM package.

npm install @revolut/checkout

Step 2. Import the ES module to the javascript code as follows:

import RevolutCheckout from "@revolut/checkout";RevolutCheckout("<PUBLIC_ID>", "prod").then((instance) => {  // work with instance});

3. Call the widget instance#

Choose one of the following options to integrate with the widget to collect card details:

  • A payment pop-up window, which appears over the page that is currently opened and requests the user’s card information. This is easy and fast to implement. In this tutorial, you use this option. For more information, see the Instance.payWithPopup.

You design your implementation to call the widget instance as follows:

  1. When the user clicks Pay, the payment pop-up window opens. To achieve this, you create a button and attach a click event listener to it that triggers RC.payWithPopup(options).
  2. The user enters the required card details and the optional personal details, and then moves to the payment processing.
  3. After the payment is processed, you can redirect the user to the appropriate page to handle the success or failed status of the order.

Implement the following code snippet, 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.
tip
  • email parameter is required if the order that is being paid does not contain an email
  • name parameter is required when using instance.createCardField. For instance.payWithPopup, the name will be asked dynamically if not passed in the options.
<button id="pay-button">Pay</button><script>  RevolutCheckout("<PUBLIC_ID>").then(function (RC) {    var payButton = document.getElementById("pay-button");    // On click open payment pop-up    payButton.addEventListener("click", function () {      RC.payWithPopup({        // (mandatory!) name of the cardholder        name: "First Last",        // (optional) email of the customer        email: "customer@example.com",        // (optional) phone of the customer        phone: "+447950630319",        // (optional) billing address of the customer        billingAddress: {          countryCode: "GB", //if sending billing address, this field is mandatory          region: "Greater London",          city: "London",          streetLine1: "Revolut",          streetLine2: "1 Canada Square",          postcode: "EC2V 6DN", //if sending billing address, this field is mandatory        },        // (optional) shipping address of the customer        shippingAddress: {          countryCode: "GB", //if sending shipping address, this field is mandatory          region: "Greater London",          city: "London",          streetLine1: "Revolut",          streetLine2: "1 Canada Square",          postcode: "EC2V 6DN", //if sending shipping address, this field is mandatory        },        // Callback called when payment finished successfully        onSuccess() {          window.alert("Thank you!");        },        // Callback in case some error happened        onError(message) {          window.alert("Oh no :(");        },        // (optional) Callback in case user cancelled a transaction        onCancel() {          window.alert("Payment cancelled!");        },      });    });  });</script>
success

Congratulations! You’ve successfully integrated the widget with the Merchant API to the checkout page and accepted your first payment for the order.

What’s next#

  • Check more integration examples: Learn more about how to use RevolutCheckout.js with a payment pop-up and with the integrated card field.
  • Manage your orders. The management includes capturing, canceling, and refunding an order. For more information, check the Merchant API.
  • Manage your customers. For example, save the card details of a customer and charge the customer’s saved payment method later. Click here for more details.
Was this section helpful?