⭐Start payment

It is extremely easy to start the CryptoPay payment process during the integration process. There are two things you need for this. First, you need to register an integration and second, you need to initialize the Payment class.

Register integration

As you may be familiar from the hooks, CryptoPay used to use the value "addon" as a determinant in their integration process. Here the addon value is the value we give in registerIntegration.

use BeycanPress\CryptoPay\Helpers;

Helpers::registerIntegration('woocommerce');

Start payment class

As you know, CryptoPay works with strict types. Therefore, when initializing the Payment class, we first need to specify which addon it is for, that is, for integration.

Then, if the order amount is already defined, we need to add an order value created from the OrderType class with setOrder().

For example, the order amount can always change on the WooCommerce checkout page. Therefore, we manage this in JavaScript and Init endpoint.

use BeycanPress\CryptoPay\Payment;
use BeycanPress\CryptoPay\Types\Order\OrderType;

$order = OrderType::fromArray([
    'id' => $id,
    'amount' => $amount,
    'currency' => $currency,
]);

echo (new Payment('woocommerce'))
->setOrder($order)
->html(loading:true);

We can start the CryptoPay payment process with the simplest example top. In the html() method, you can also specify "deps", that is, the necessary javascript files.

Also after the CryptoPay class is started and the html() method is executed. You can access the main js id of CryptoPay with the following method.

Helpers::getProp('mainJsKey');

This way, you can add the mainJsKey to the "deps" section so that CryptoPay is loaded before your JavaScript file when you do some management on the JavaScript side.

Methods & parameters

In the examples below, you can think of the $payment variable as being derived as new Payment().

In the following examples I will only give and explain the types of parameters.

Set auto start

Autostart decides whether CryptoPay will run as soon as the page loads. If this value is false, JavaScript will need to initialize it using the CryptoPayApp.start() method. JavaScript examples will be provided later in the page.

NOTE: Even if the auto start value is "true", if an order data is not added with setOrder in the payment class, manual initialization will still be required on the JavaScript side.

$payment->setAutoStart(boolean $val): self;

Set order

Order data in the CryptoPay payment process.

$payment->setOrder(OrderType $val): self;

Set params

Parameters are additional data that you can use extra in the integration process and that you can access with PaymentDataType. You can see their usage in integration examples.

$payment->setOrder(ParamsType $val): self;

Set confirmation

Specifies whether a validation process should be executed on the JS side.

$payment->setConfirmation(boolean $val): self;

Modal & html

Html and modal methods are the methods by which the CryptoPay process will be started on the client side and you can output it as HTML. The only difference from each other is that the modal method comes within a modal, and you can open and close the modal with the methods on the JavaScript side.

Since CryptoPay cannot work without all JavaScript and page loading, there is at least a 2nd parameter in the html method to show the SVG loading rendered on the PHP side.

However, since the modal cannot be opened without the page loading, there is no need for a loading display. That's why there is only $deps parameter in the modal method.

$deps => Script files defined with wp_register_script and wp_enqueue_script that you want to be loaded before CryptoPay.

$payment->html(array $deps, boolean $loading): string;

$payment->modal(array $deps): string;

Init

The modal method already runs the html method within itself. The html method runs the init method within itself depending on the situation. So what is this situation?

In CryptoPay, when the user selects a network, it sends a request to the init endpoint to generate order amount, recipient address and similar values.

However, if there is only one network, it would be ridiculous to make the user request again after the page is loaded, right?

Therefore, if there is a single network in the HTML method and it is suitable for auto init, it creates init data and sends it to the JS side in advance.

We hope you will remember from the JS init event, and if there is an init value, CryptoPay does not send a request to the init endpoint on the JS side and uses it.

For example, we use this method in the form control and init endpoint on the WooCommerce checkout page.

If the process is dynamic, as in the WooCommerce checkout page, and there are processes such as form control, you can also create init data and provide it to CryptoPay. In this way, you increase the user experience.

$payment->init(NetworkType $network): InitType;

JavaScript side

On the JavaScript side, we have a few objects to manage and use CryptoPay. These are given below.

window.CryptoPayApp // CryptoPay payment processor
window.CryptoPayVars // CryptoPay dynamic variables
window.CryptoPayConfig // Data set for start CryptoPay JS

CryptoPayConfig

This is just a data set created to initialize the CryptoPay JS side. It is loaded into CryptoPay JS as soon as the page is loaded and is for display purposes only.

CryptoPayVars

It is a JavaScript object to which you can add data with "js_variables" from PHP hooks. The data you add with "js_variables" will appear in this object.

CryptoPayApp

It is the object where you can manage JavaScript side events, add dynamicData and access helper methods. It has the following values.

CryptoPayApp.events // manage payment events
CryptoPayApp.dynamicData // manage data in payment process
CryptoPayApp.helpers // Many helper methods, popups, data transform etc.
CryptoPayApp.modal // OPTONAL: If modal mode is activated
CryptoPayApp.start // OPTIONAL:
// If autoStart is false or there is no order value on the PHP side,
// the start method will exist. If the payment process is suitable for automatic start,
// the start method will be removed when the process starts.

Start method examples

The reason why the start method was removed from CryptoPayApp is to prevent manipulation. For example, no one can change anything from the console.

If the payment process already starts automatically, there is no need to manage anything. But if there is a need to manage something. You will not start the payment process automatically.

In this case, you can use the start method on the JavaScript side, as you will see in the examples below. Once you use this, the start method will be removed from CryptoPayApp, which is also a global variable.

// order is everytime required, params is not
const startedApp = CryptoPayApp.start(order, params);

startedApp.reStart // reStart payment process
startedApp.store // manage store data dynamicly

startedApp.events.add('payNow', (ctx) => {
    // Events example
})

CryptoPayApp.start() // undefined if you already started

// you can manage like that
startedApp.reStart(order, params);
startedApp.store.payment.setNetwork(network);

What is dynamicData?

dynamicData is data that is not saved anywhere but can be used during the payment process. For example, many plugins can use form data during the payment process on the WooCommerce checkout page. However, if you use CryptoPay, this data may not reach the desired destination.

However, you can add dynamic data very simply with the examples below and receive it with PaymentDataType on the PHP side.

Here are a few examples below.

JS Side:

CryptoPayApp.dynamicData.add({
    wcForm: CryptoPayApp.helpers.formToObj('form.checkout')
});

PHP Side:

$data->getDynamicData()->get('wcForm');
$data->getDynamicData()->get('wcForm.billing_email'); // deep access