Merchant Web SDK
Install the widget

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.

Adding the embed script

Add the embed script to all the pages that you want to use RevolutCheckout on:

<script>!function(e,o,n){var r=e=>{var n={sandbox:"",prod:"",dev:""},r=o.createElement("script");return"revolut-checkout",r.src=n[e]||,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");
  • Add the embed script to all the pages that you want to use RevolutCheckout on.
  • The script should be inserted before the code that calls RevolutCheckout.

Installing the widget's Npm package

Install the npm package and import the ES module later to your code.

You can easily do so by running the following command:

npm install @revolut/checkout

This will allow you to import the RevolutCheckout that will be used when initializing the widget in the next steps:

import RevolutCheckout from "@revolut/checkout"

RevolutCheckout("<PUBLIC_ID>", "prod").then((instance) => {
// work with instance
Was this page helpful?