# Get started

## Installation

To install the Revolut Checkout SDK, you can use one of the following methods:

- ![NPM package]

  Install the [RevolutCheckout.js NPM package](https://www.npmjs.com/package/@revolut/checkout) and import the ES module to your code:

  ```shell
  npm install @revolut/checkout
  ```

  This allows you to import the `RevolutCheckout` module:

  ```typescript
  import RevolutCheckout from '@revolut/checkout'
  ```

- ![Embed script]

  Add the embed script to all pages where you want to use `RevolutCheckout`:

  ```html
  <script>
    !(function (e, o, t) {
      const n = {
        sandbox: {
          embed: 'https://sandbox-merchant.revolut.com/embed.js',
          version: 'https://sandbox-merchant.revolut.com/version.js',
          upsell: 'https://sandbox-merchant.revolut.com/upsell/embed.js',
        },
        prod: {
          embed: 'https://merchant.revolut.com/embed.js',
          version: 'https://merchant.revolut.com/version.js',
          upsell: 'https://merchant.revolut.com/upsell/embed.js',
        },
      }
      const r = (e, n) => {
        const r = ((e, t) => {
          const n = o.createElement('script')
          n.id = 'revolut-checkout'
          n.src = t ? `${e}?version=${encodeURIComponent(t)}` : e
          n.async = !0
          o.head.appendChild(n)
          return n
        })(e, n)
        return new Promise((resolve, reject) => {
          r.onload = () => resolve()
          r.onerror = () => {
            o.head.removeChild(r)
            reject(new Error(t + ' failed to load'))
          }
        })
      }
      let l = {},
        s = {},
        d = {}
      const u = function (e, o) {
        o = o || 'prod'
        if (l[o]) return Promise.resolve(l[o])
        return r(n[o].version, `${Date.now()}`)
          .then(() => {
            const e =
              '__REV_PAY_VERSION__' in window &&
              typeof __REV_PAY_VERSION__ === 'string'
                ? __REV_PAY_VERSION__
                : ''
            delete window.__REV_PAY_VERSION__
            l[o] = e
            return e
          })
          .catch(() => {
            l[o] = ''
            return ''
          })
      }
      function c(o, l) {
        if (s[o]) return Promise.resolve(l(s[o]))
        return u()
          .then((e) => r(n[o].embed, e))
          .then(() => {
            ;(() => {
              if (window.RevolutCheckout === i || !window.RevolutCheckout)
                throw new Error(t + ' failed to load')
            })()
            s[o] = window.RevolutCheckout
            e[t] = i
            return l(s[o])
          })
      }
      const i = function (e, o) {
        return c(o || 'prod', (o) => o(e))
      }
      i.payments = function (e) {
        const o = e.mode || 'prod',
          t = { locale: e.locale || 'auto', publicToken: e.publicToken || null }
        return c(o, (o) => o.payments(t))
      }
      i.embeddedCheckout = function (e) {
        return c(e.mode || 'prod', (o) => o.embeddedCheckout(e))
      }
      i.upsell = function (e) {
        const o = e.mode || 'prod',
          l = { locale: e.locale || 'auto', publicToken: e.publicToken || null }
        if (d[o]) return Promise.resolve(d[o](l))
        return u()
          .then((e) => r(n[o].upsell, e))
          .then(() => {
            if (!window.RevolutUpsell) throw new Error(t + ' failed to load')
            d[o] = window.RevolutUpsell
            delete window.RevolutUpsell
            return d[o](l)
          })
      }
      e[t] = i
    })(window, document, 'RevolutCheckout')
  </script>
  ```

  :::tip
  - Add the embed script to all pages where you want to use `RevolutCheckout`
  - The script should be inserted **before** the code that calls `RevolutCheckout`
  - Select the environment (**`prod`** or **`sandbox`**) upon initialisation
    :::

---

## Initialisation methods

The SDK provides four initialisation methods depending on your use case:

| Method                                                                        | Syntax                                    | Use case                              | Returns                    |
| ----------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------- | -------------------------- |
| [Token-based](/docs/sdks/merchant-web-sdk/initialisation/token-based)         | `RevolutCheckout(token)`                  | Card payments with pre-created orders | `RevolutCheckoutInstance`  |
| [Direct initialisation](/docs/sdks/merchant-web-sdk/initialisation/direct)    | `RevolutCheckout.embeddedCheckout({...})` | All payment methods in one widget     | `EmbeddedCheckoutInstance` |
| [Payments module](/docs/sdks/merchant-web-sdk/initialisation/payments-module) | `RevolutCheckout.payments({...})`         | Individual payment method buttons     | `PaymentsModuleInstance`   |
| [Upsell module](/docs/sdks/merchant-web-sdk/initialisation/upsell-module)     | `RevolutCheckout.upsell({...})`           | Promotional widgets                   | `UpsellModuleInstance`     |

### Which method should I use?

- ![Token-based]

  **Use token-based initialization when:**
  - You create orders on your server before showing checkout
  - You need card field or card pop-up
  - You're migrating from legacy integration patterns

  **Payment methods available:** Card field, Card pop-up

  **Example:**

  ```typescript
  const instance = await RevolutCheckout(orderToken, 'prod')
  const cardField = instance.createCardField({ target: element })
  ```

  [See documentation →](/docs/sdks/merchant-web-sdk/initialisation/token-based)

- ![Embedded checkout]

  **Use embedded checkout when:**
  - You want all payment methods in one unified widget
  - You prefer configuring via Business Dashboard
  - You need automatic payment method ordering based on customer location

  **Payment methods available:** Card, Revolut Pay, Apple Pay, Google Pay, Pay by Bank (all in one widget)

  **Example:**

  ```typescript
  const { destroy } = await RevolutCheckout.embeddedCheckout({
    publicToken: 'pk_...',
    mode: 'prod',
    target: element,
    createOrder: async () => {
      /* ... */
    },
  })
  ```

  [See documentation →](/docs/sdks/merchant-web-sdk/initialisation/direct)

- ![Payments module]

  **Use payments module when:**
  - You need individual payment method buttons
  - You want granular control over UI placement
  - You create orders on-demand during checkout

  **Payment methods available:** Revolut Pay, Apple Pay / Google Pay, Pay by Bank

  **Example:**

  ```typescript
  const { revolutPay } = await RevolutCheckout.payments({
    publicToken: 'pk_...',
    mode: 'prod',
  })
  ```

  [See documentation →](/docs/sdks/merchant-web-sdk/initialisation/payments-module)

- ![Upsell module]

  **Use upsell module when:**
  - You want to display promotional banners
  - You need post-purchase upsell features
  - You want to promote Revolut to customers

  **Widgets available:** Promotional banner, Card gateway banner, Enrollment confirmation banner

  **Example:**

  ```typescript
  const { promotionalBanner } = await RevolutCheckout.upsell({
    publicToken: 'pk_...',
    mode: 'prod',
  })
  ```

  [See documentation →](/docs/sdks/merchant-web-sdk/initialisation/upsell-module)

---

## What's next

- [Payment methods](/docs/sdks/merchant-web-sdk/payment-methods/introduction)
- [Promotional widgets](/docs/sdks/merchant-web-sdk/promotional-widgets/introduction)
- [Types reference](/docs/sdks/merchant-web-sdk/types/introduction)
- [Integration examples](/docs/sdks/merchant-web-sdk/integration-examples)