# How-to

## Step 1

* Log in to your Cryptopay account
* Navigate to Integration → Online checkout
* Generate a new key

<figure><img src="https://files.cryptopay.me/b2b/git_book_files/15_Invoice_How_To_01.webp" alt=""><figcaption></figcaption></figure>

## Step 2

Add the following meta tags to your web page.

```markup
<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  ...
</head>
```

## Step 3

Add the following code to your web page.

{% tabs %}
{% tab title="HTML" %}

```markup
<script src="https://widget-business-sandbox.cryptopay.me/widget.js" />
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
const el = document.createElement('SCRIPT');
el.src = 'https://widget-business-sandbox.cryptopay.me/widget.js';
document.body.appendChild(el);
```

{% endtab %}
{% endtabs %}

| Environment | src                                                      |
| ----------- | -------------------------------------------------------- |
| Sandbox     | <https://widget-business-sandbox.cryptopay.me/widget.js> |
| Production  | <https://business-widget.cryptopay.me/widget.js>         |

## Step 4

Checkout initialization.

```javascript
var widget = new CryptopayWidget({
  widgetKey: 'bd3476f9-57Bc-4517-b499-afb83e1538ес',
  embedded: true,
  elId: 'cryptopay-widget',
  styleOptions: {
    closeButtons: false
  }
});
```

| Parameter      | Usage    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `widgetKey`    | Required | Your widget key - see Step 1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `accounts`     | Optional | <p>An array of currency codes to restrict the payment options shown to your customers. For example: BTC, ETH, LTC, USDT<br>– If you omit this parameter, all supported cryptocurrencies will be available by default.<br>– If you include any unsupported or invalid codes (e.g. \['BTC', 'XYZ']), those entries will be silently ignored and won’t appear in the list of available options.<br>(See <a href="https://developers.cryptopay.me/guides/currencies/currencies">the full list</a><a href="https://developers.cryptopay.me/guides/currencies/currencies"> of supported currencies</a>)</p>                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `embedded`     | Optional | <p>– If <code>true</code>, the checkout will be embedded directly into the page.<br>– If <code>false</code> or not provided, the checkout will open as a popup.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `elId`         | Optional | `cryptopay-widget` by default. The place on your web page where the checkout will be plugged in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `locale`       | Optional | <p>Can be <code>en</code>, <code>de</code>, <code>fr</code>, <code>es</code>, <code>pt</code>, <code>ru</code> and <code>jp</code> which means English, German, French, Spanish, Portuguese, Russian or Japanese language. </p><p>If parameter is not set, the language will be taken from the browser settings.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `styleOptions` | Optional | <p><code>closeButtons</code> - Optional. Use <code>false</code> to hide the blue Close button. </p><p></p><p>– If set to <code>false</code>, the “Close” (✕) button is hidden</p><p>– If set to <code>true</code> or omitted, the close button is shown by default</p><p>– Applies only when <code>embedded</code> = <code>false</code> (popup mode)</p><p>– In <code>embedded</code> = <code>true</code> mode, the close button is always hidden regardless of this setting<br>– See screenshots below</p><p></p><p><code>backToSelect</code> - Optional. Use <code>false</code> to hide the Back button that returns the users to the initial "Choose a coin to pay with" screen.</p><p></p><p>– If <code>true</code>, the Back button appears on the "Make a payment" screen:<br>– Clicking it returns the user to the "Select the payment currency" screen<br>– As soon as the invoice status changes (e.g. to Paid or Expired), the Back button is hidden again<br>– If <code>false</code> or omitted, the Back button is not shown</p> |

<figure><img src="https://files.cryptopay.me/b2b/git_book_files/15_Invoice_How_To_02.webp" alt=""><figcaption></figcaption></figure>

<figure><img src="https://files.cryptopay.me/b2b/git_book_files/15_Invoice_How_To_03.png" alt=""><figcaption></figcaption></figure>

## Step 5

Checkout calling.

```javascript
widget.pay({
    amount: 10,
    currency: 'EUR',
    customId: '2a713ee9-d401-4d97-9909-b67d6755c1c7',
    onOpen: function () {},
    onClose: function () {}
});
```

<table data-header-hidden><thead><tr><th>Parameter</th><th>Type</th><th width="123">Usage</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Usage</td><td>Description</td></tr><tr><td><code>amount</code></td><td>number (double)</td><td>Required</td><td>Purchase amount</td></tr><tr><td><code>currency</code></td><td>string</td><td>Required</td><td>Purchase currency</td></tr><tr><td><code>customId</code></td><td>string</td><td>Required</td><td>Purchase reference ID in your system</td></tr><tr><td><code>name</code></td><td>string</td><td>Optional</td><td>Purchase name</td></tr><tr><td><code>description</code></td><td>string</td><td>Optional</td><td>Purchase description</td></tr><tr><td><code>metadata</code></td><td>object</td><td>Optional</td><td>Key-valued data</td></tr><tr><td><code>onOpen</code></td><td>function</td><td>Optional</td><td>Function to be called upon checkout opening</td></tr><tr><td><code>onClose</code></td><td>function</td><td>Optional</td><td>Function to be called upon checkout closing</td></tr></tbody></table>

## Step 6

Checkout destruction. After calling this method you will need to initialise new checkout.

```javascript
widget.destroy();
```
