# How-to
## Step 1
* Log in to your Cryptopay account
* Navigate to Integration → Online checkout
* Generate a new key
## Step 2
Add the following meta tags to your web page.
```markup
...
...
```
## Step 3
Add the following code to your web page.
{% tabs %}
{% tab title="HTML" %}
```markup
```
{% 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 | |
| Production | |
## 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 |
An array of currency codes to restrict the payment options shown to your customers. For example: BTC, ETH, LTC, USDT – If you omit this parameter, all supported cryptocurrencies will be available by default. – 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. (See the full list of supported currencies)
|
| `embedded` | Optional |
– If true, the checkout will be embedded directly into the page. – If false or not provided, the checkout will open as a popup.
|
| `elId` | Optional | `cryptopay-widget` by default. The place on your web page where the checkout will be plugged in |
| `locale` | Optional |
Can be en, de, fr, es, pt, ru and jp which means English, German, French, Spanish, Portuguese, Russian or Japanese language.
If parameter is not set, the language will be taken from the browser settings.
|
| `styleOptions` | Optional |
closeButtons - Optional. Use false to hide the blue Close button.
– If set to false, the “Close” (✕) button is hidden
– If set to true or omitted, the close button is shown by default
– Applies only when embedded = false (popup mode)
– In embedded = true mode, the close button is always hidden regardless of this setting – See screenshots below
backToSelect - Optional. Use false to hide the Back button that returns the users to the initial "Choose a coin to pay with" screen.
– If true, the Back button appears on the "Make a payment" screen: – Clicking it returns the user to the "Select the payment currency" screen – As soon as the invoice status changes (e.g. to Paid or Expired), the Back button is hidden again – If false or omitted, the Back button is not shown
## Step 6
Checkout destruction. After calling this method you will need to initialise new checkout.
```javascript
widget.destroy();
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developers.cryptopay.me/guides/invoices/payment-widget/how-to.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
