How-to

PreviousOnline checkout NextPayment links

Last updated 6 months ago

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" />

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

Environment

src

Sandbox

Production

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

embedded

Optional

If false, the checkout will popup on the page

If true, the checkout will be embedded

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 buttons. See the 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

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 checkout NextPayment links

Last updated 6 months ago

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" />

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

Environment

src

Sandbox

Production

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

Skip this parameter to make all supported cryptocurrencies available by default. Choose which cryptocurrencies you want your customers to pay with. Can be BTC, ETH, LTC, USDT, ... (See )

embedded

Optional

If false, the checkout will popup on the page

If true, the checkout will be embedded

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 buttons. See the 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

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();