Merchant Web SDK
Install the widget
doc

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,t){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={sandbox:"https://sandbox-merchant.revolut.com/upsell/embed.js",prod:"https://merchant.revolut.com/upsell/embed.js",dev:"https://merchant.revolut.codes/upsell/embed.js"},l=function(e){var n=function(e){var t=o.createElement("script");return t.id="revolut-checkout",t.src=e,t.async=!0,o.head.appendChild(t),t}(e);return new Promise((function(e,r){n.onload=function(){return e()},n.onerror=function(){o.head.removeChild(n),r(new Error(t+" failed to load"))}}))},u=function(){if(window.RevolutCheckout===i||!window.RevolutCheckout)throw new Error(t+" failed to load")},c={},d={},i=function o(r,d){return c[d=d||"prod"]?Promise.resolve(c[d](r)):l(n[d]).then((function(){return u(),c[d]=window.RevolutCheckout,e[t]=o,c[d](r)}))};i.payments=function(o){var r=o.mode||"prod",d={locale:o.locale||"auto",publicToken:o.publicToken||null};return c[r]?Promise.resolve(c[r].payments(d)):l(n[r]).then((function(){return u(),c[r]=window.RevolutCheckout,e[t]=i,c[r].payments(d)}))},i.upsell=function(e){var o=e.mode||"prod",n={locale:e.locale||"auto",publicToken:e.publicToken||null};return d[o]?Promise.resolve(d[o](n)):l(r[o]).then((function(){if(!window.RevolutUpsell)throw new Error(t+" failed to load");return d[o]=window.RevolutUpsell,delete window.RevolutUpsell,d[o](n)}))},e[t]=i}(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 RevolutCheckout.js 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 module to your code that will be used when initializing the widget in the next steps:

import RevolutCheckout from "@revolut/checkout"

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