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.

<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.

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

Environment

src

Sandbox

https://widget-business-sandbox.cryptopay.me/widget.js

Production

https://business-widget.cryptopay.me/widget.js

Step 4

Checkout initialization.

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 5

Checkout calling.

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

Parameter

Type

Usage

Description

amount

number (double)

Required

Purchase amount

currency

string

Required

Purchase currency

customId

string

Required

Purchase reference ID in your system

name

string

Optional

Purchase name

description

string

Optional

Purchase description

metadata

object

Optional

Key-valued data

onOpen

function

Optional

Function to be called upon checkout opening

onClose

function

Optional

Function to be called upon checkout closing

Step 6

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

widget.destroy();
PreviousOnline checkoutNextPayment links

Last updated