If your website runs on WooCommerce, Prestashop, Magento 2, BigCommerce, OpenCart, or Shopify 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:
RevolutCheckout
to your application.Before you start this tutorial, ensure that you have completed the following steps:
When a user decides to make a purchase on your e-commerce website, you must create an order on the server side by sending a POST
request to https://merchant.revolut.com/api/1.0/orders
. Include the authorization HTTP header in the request, in the following format:
"Authorization: Bearer <yourSecretApiKey>"
Where <yourSecretApiKey>
is the Production Secret API key that you generated from your Merchant account.
You must create an order
object for each purchase.
Create an order with this request.
Once the order is created successfully, the Merchant API returns a JSON object 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"
},
"checkout_url": "<checkout_url>"
}
Save the public_id
contained in the response, which is a temporary token generated for every order a customer initiates on the website. It's also the identifier to pass when calling the widget instance.
Once the order is paid, the public_id
expires.
Once the order is paid, the public_id
expires.
The checkout_url
contains a link to the widget-based checkout page, hosted by Revolut.
After the order is paid, the checkout_url
becomes unavailable.
Once the order is successfully created, install the widget on the client side. Once the order is successfully created, install the widget on the client side.
To install the Revolut Checkout Widget, you need to add RevolutCheckout
to your checkout page in one of the following ways:
RevolutCheckout
to the browser's global window.RevolutCheckout
to the browser's global window.The script is requested asynchronously, so you don't need to worry about the contents of your page being blocked.
Add the embed script to the document head of your checkout HTML page.
<head><title>Shop</title><script>!function(e,o,n){var r=e=>{var n={sandbox:"https://sandbox-merchant.revolut.com/embed.js",prod:"https://merchant.revolut.com/embed.js",dev:"https://merchant.revolut.codes/embed.js"},r=o.createElement("script");return r.id="revolut-checkout",r.src=n[e]||n.prod,r.async=!0,o.head.appendChild(r),r},t=function(e,r){return{then:function(t,c){e.onload=function(){t(r())},e.onerror=function(){o.head.removeChild(e),c&&c(new Error(n+" failed to load"))}}}};e[n]=function(o,c){var u=t(r(c||"prod"),(function(){return e[n](o)}));return"function"==typeof Promise?Promise.resolve(u):u},e[n].payments=function(o){var c=t(r(o.mode||"prod"),(function(){return e[n].payments({locale:o.locale||"en",publicToken:o.publicToken||null})}));return"function"==typeof Promise?Promise.resolve(c):c}}(window,document,"RevolutCheckout");
</script></head>
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: Merchant Web SDK: Instance.payWithPopup.
Design your implementation to call the widget instance as follows:
RC.payWithPopup(options)
.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.email
parameter is required if the order that is being paid does not contain an emailname
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>
Before deploying your implementation to your production environment, complete the checklist below to see if everything works as expected, using Merchant API's Sandbox environment. To test in Sandbox environment, set the base URL of your API calls to: sandbox-merchant.revolut.com/api/1.0
.
public_id
. The order must be created in the same environment where the widget is loaded, in this case the Sandbox environment. If your implementation handles all these cases as you expect in Sandbox, you can deploy to production. These checks only cover the implementation path described in this tutorial, if your application handles more features of the Merchant API, see the Merchant API: Implementation checklists.
Congratulations! You've successfully integrated the widget with the Merchant API to the checkout page and accepted your first payment for the order.
RevolutCheckout.js
with a payment pop-up and with the integrated card field.