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:"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>
Tips
  • 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
})
PreviousIntroduction
NextRevolutCheckout
Was this page helpful?