Запуск виджета с данными из веб-формы

Платежный виджет PayCross можно использовать для приема платежей не только с предустановленными значениями параметров (например, фиксированной суммой к оплате за услугу), но и для платежей со значениями, которые пользователь выбирает или указывает в веб-форме в процессе оплаты (например, выбор суммы к оплате).

Ниже приведены примеры кода формы и функции для следующих случаев:

запуск виджета с данными из формы ввода суммы платежа;
запуск виджета с данными из формы выбора услуги;
запуск виджета с данными из формы ввода имени и фамилии клиента.

Запуск виджета с данными из формы ввода суммы платежа

Если вы хотите дать пользователям возможность указать сумму платежа в форме до того, как они перейдут к оплате товара или услуги, то вы можете разместить форму и зарегистрировать функцию для вызова виджета по примеру ниже.

Приведенный пример поможет создать следующую форму: Веб-форма для ввода суммы платежа

При нажатии на кнопку "Оплатить" пользователь увидит окно виджета для завершения оплаты на указанную им сумму. Если сумма не указана, то система уведомит пользователя об ошибке.

Пример формы для ввода пользователем суммы платежа

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample payment</title>
  <!-- Подключение фреймворка Bootstrap v5.0.2. Опционально -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <!-- Подключение библиотеки PayCross для вызова виджета -->
  <script defer type="text/javascript" src="https://panel.pay-cross.com/widget/be_gateway.js"></script>
  <script defer type="text/javascript" src="./index.js"></script>
  <style>
    #root {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="row mt-5">
      <div class="col-4  col-mb-3 col-xs-2"></div>
      <div class="col-4 col-mb-6 col-xs-8">
        <div class="input-group mb-3">
          <!-- Указание валюты платежа в форме -->
          <span class="input-group-text">USD</span>
          <!-- Минимальное значение, шаг и текст подсказки в поле ввода суммы для параметра `amount` -->
          <input type="number" id="amount" name="amount" min="0" class="form-control" aria-label="Amount" step="0.01" placeholder="*Введите сумму платежа"> 
          <span class="input-group-text">
            <!-- Кнопка с названием "Оплатить", при нажатии на которую будут сформированы необходимые параметры для конструктора объекта `BeGateway` и будет вызван метод `createWidget` -->
            <a onclick="payment()" href="#" class="btn">Оплатить</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Пример функции для вызова виджета с суммой ввода

<script type="text/javascript">
this.payment = function () {
  if(this.amount.value > 0){
    const amount = (+this.amount.value).toFixed(2) * 100; // Перевод суммы платежа в минимальные денежные единицы, например USD 10.00 = 1000
    const params = { // Параметры платежного виджета
    "checkout_url": "https://panel.pay-cross.com",
    "checkout": {
      "iframe": true,
      "test": true, 
      "transaction_type": "payment",
      "public_key": "MIIBIjANBgkqhkiG9w0BAQAAHHTTRRKK8AMIIBCgKCAQEApiZB6mK42qsonAeWFQbE6YrqI2TroP6Xuuz/4H/P25uNgmsnDmRRv3NGVmOsAGPJWxd6sL4BVKruxOJTtVNA5i3k9MiH9mYiVk0sFKs+COCwmyJWRhNe/fSiFtEEcCsj79qn2V7QnUrxFJa5ueP78mh3YDrzsATd2SMekjaVT/QKbrK3OJLHSbQppmv9wD10DdyVwW87ra0+MMA8XiCyzK6x2jcPkaOzw5I3CUQHUqGAzrbTLqjYThouRb913v6GV2HAK8PVdvimtI7a0NppImCgCEEL+8tuNIpvQISjI5xAedexbguPEi9sA+zcgDQKLN7G4+NQUmhBQV13xkjxxQIDAQAB",
      "order": {
        "amount": amount, // Подстановка суммы ввода в минимальных денежных единицах
        "currency": "USD",
        "description": "Пример оплаты с вводом суммы платежа",
        "tracking_id": "asdasd37533638216810052022asdasd"
      },
      "settings": {
        "language": "ru"
      },
    }
  }
  new BeGateway(params).createWidget();
  } else {
    alert('Вы ввели некорректную сумму'); // Сообщение об ошибке
    this.amount.value = null;
  }
};
</script>

Запуск виджета с данными из формы выбора услуги

Если вы хотите, чтобы ваши покупатели могли самостоятельно выбрать услугу для оплаты в форме до того, как они перейдут к оплате товара или услуги, то вы можете разместить форму и зарегистрировать функцию для вызова виджета по примеру ниже.

Приведенный пример поможет создать следующую форму: Веб-форма для выбора услуги

При нажатии на кнопку "Оплатить" пользователь увидит окно виджета для завершения оплаты выбранной услуги. Если услуга не выбрана, то система уведомит пользователя об ошибке.

Пример формы выбора услуги для оплаты

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample payment</title>
  <!-- Подключение фреймворка Bootstrap v5.0.2. Опционально -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <!-- Подключение библиотеки PayCross для вызова виджета -->
  <script defer type="text/javascript" src="https://panel.pay-cross.com/widget/be_gateway.js"></script>
  <script defer type="text/javascript" src="./index.js"></script>
  <style>
    #root {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="row mt-5">
      <div class="col-4  col-mb-3 col-xs-2"></div>
      <div class="col-4 col-mb-6 col-xs-8">
        <div class="input-group mb-3">
          <!-- Указание валюты платежа в форме-->
          <span class="input-group-text">USD</span>
            <!-- Текст подсказки, список с описанием услуг и их стоимости для выбора -->
            <select class="form-select" id="services"
              aria-label=".form-select-lg example">
              <option selected>*Выберите услугу</option>
              <option value="1000">Минимальный пакет 10.00.</option>
              <option value="2000">Стандартный пакет 20.00.</option>
              <option value="3000">Premium пакет 30.00.</option>
            </select>
          <span class="input-group-text">
            <!-- Кнопка с названием "Оплатить", при нажатии на которую будут сформированы необходимые параметры для конструктора объекта `BeGateway` и будет вызван метод `createWidget` -->
            <a onclick="payment()" href="#" class="btn">Оплатить</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Пример функции для вызова виджета с суммой выбранной услуги

<script type="text/javascript">
this.payment = function () {
  const currentSelectValue = +this.services.value;
  if(currentSelectValue){
    const amount = currentSelectValue; // Стоиомсть услуги в минимальных денежных единицах, например USD 10.00 = 1000
    const params = { // Параметры платежного виджета
    "checkout_url": "https://panel.pay-cross.com",
    "checkout": {
      "iframe": true,
      "test": true, 
      "transaction_type": "payment",
      "public_key": "MIIBIjANBgkqhkiG9w0BAQEFAAHHTTRRKKMIIBCgKCAQEApiZB6mK42qsonAeWFQbE6YrqI2TroP6Xuuz/4H/P25uNgmsnDmRRv3NGVmOsAGPJWxd6sL4BVKruxOJTtVNA5i3k9MiH9mYiVk0sFKs+COCwmyJWRhNe/fSiFtEEcCsj79qn2V7QnUrxFJa5ueP78mh3YDrzsATd2SMekjaVT/QKbrK3OJLHSbQppmv9wD10DdyVwW87ra0+MMA8XiCyzK6x2jcPkaOzw5I3CUQHUqGAzrbTLqjYThouRb913v6GV2HAK8PVdvimtI7a0NppImCgCEEL+8tuNIpvQISjI5xAedexbguPEi9sA+zcgDQKLN7G4+NQUmhBQV13xkjxxQIDAQAB",
      "order": {
        "amount": amount, // Подстановка стоимости выбранной услуги как суммы платежа в минимальных денежных единицах
        "currency": "USD",
        "description": "Пример оплаты с выбором услуг",
        "tracking_id": "asdasd37533638216810052022asdasd"
      },
      "settings": {
        "language": "ru"
      },
    }
  }
  new BeGateway(params).createWidget();
  } else {
    alert('Вы не выбрали услугу'); // Сообщение об ошибке
    this.services.value = '*Выберите услугу';
  }
};
</script>

Запуск виджета с данными из формы ввода имени и фамилии клиента

Если вы хотите, чтобы пользователи самостоятельно указывали свои имя и фамилию до оплаты товара или услуги на виджете, то вы можете разместить форму и зарегистрировать функцию для вызова виджета по примеру ниже.

Приведенный пример поможет создать следующую форму: Веб-форма для ввода имени и фамилии покупателя

При нажатии на кнопку "Оплатить" пользователь увидит окно виджета для завершения оплаты с уже указанными именем, фамилией и суммой товара или услуги. Если имя и фамилия не указаны, то система уведомит пользователя об ошибке.

Пример формы ввода имени и фамилии клиента

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample payment</title>
  <!-- Подключение фреймворка Bootstrap v5.0.2. Опционально -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <!-- Подключение библиотеки PayCross для вызова виджета -->
  <script defer type="text/javascript" src="https://panel.pay-cross.com/widget/be_gateway.js"></script>
  <script defer type="text/javascript" src="./index.js"></script>
  <style>
    #root {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="row mt-5">
      <div class="col-4  col-mb-3 col-xs-2"></div>
      <div class="col-4 col-mb-6 col-xs-8">
        <div class="input-group mb-3">
          <!-- Указание суммы и валюты платежа в форме -->
          <span class="input-group-text">10.00 USD</span>
          <!-- Текст подсказки для поля ввода имени -->
          <input type="text" id="firstName" name="firstName" class="form-control" aria-label="First name"
            placeholder="*Введите имя">
          <!-- Текст подсказки для поля ввода фамилии -->
          <input type="text" id="lastName" name="lastName" class="form-control" aria-label="Last name"
            placeholder="*Введите фамилию">
          <span class="input-group-text">
            <!-- Кнопка с названием "Оплатить", при нажатии на которую будут сформированы необходимые параметры для конструктора объекта `BeGateway` и будет вызван метод `createWidget` -->
            <a onclick="payment()" href="#" class="btn">Оплатить</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Пример функции для вызова виджета с именем и фамилией клиента и суммой услуги

<script type="text/javascript">
this.payment = function () {
  const {
    value: firstName
  } = this.firstName;
  const {
    value: lastName
  } = this.lastName;
  console.log(firstName + lastName)
  if (firstName && lastName) {
    const amount = 1000; // Сумма платежа в минимальных денежных единицах, например USD 10.00 = 1000
    const params = {
      "checkout_url": "https://panel.pay-cross.com",
      "checkout": {
        "iframe": true,
        "test": true,
        "transaction_type": "payment",
        "public_key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApiZB6mK42qsonAeWFQbE6YrqI2TroP6Xuuz/4H/P25uNgmsnDmRRv3NGVmOsAGPJWxd6sL4BVKruxOJTtVNA5i3k9MiH9mYiVk0sFKs+COCwmyJWRhNe/fSiFtEEcCsj79qn2V7QnUrxFJa5ueP78mh3YDrzsATd2SMekjaVT/QKbrK3OJLHSbQppmv9wD10DdyVwW87ra0+MMA8XiCyzK6x2jcPkaOzw5I3CUQHUqGAzrbTLqjYThouRb913v6GV2HAK8PVdvimtI7a0NppImCgCEEL+8tuNIpvQISjI5xAedexbguPEi9sA+zcgDQKLN7G4+NQUmhBQV13xkjxxQIDAQAB",
        "order": {
          "amount": amount, // Подстановка суммы платежа в минимальных денежных единицах
          "currency": "USD",
          "description": "Пример оплаты с вводом имени и фамилиии клиента",
          "tracking_id": "asdasd37533638216810052022asdasd"
        },
        "settings": {
          "language": "ru",
          "customer_fields": {
            "visible": [
              "first_name",
              "last_name",
            ]
          },
        },
        "customer": { // Передача данных для подстановки в поля, указанные в объекте `customer_fields`
          "first_name": firstName,
          "last_name": lastName,
        },
      }
    }
    new BeGateway(params).createWidget();
  } else {
    alert('Вы не ввели полные данные покупателя'); // Сообщение об ошибке
  }
};
</script>