Initializing the widget with payment details from a web-form

The payment widget can be used both for payments with pre-set parameter values (for example, a fixed amount of payment) and for payments with variables which customers indicate or choose in web-forms while making a payment (for example, an amount to choose and pay).

Below are the sample codes of web-forms and functions that call out the payment widget for the following cases:

Initializing the widget with a payment amount from a web-form;
Initializing the widget with services selected in a web-form;
Initializing the widget with the customer's first and last name from a web-form.

If you want your customers indicate a payment amount in a web-form before they complete a payment, you can embed a web-form and register a function using the sample codes below.

The sample HTML code generates the following form view: Web-form to enter a payment amount

After clicking the Pay button, the customer will see the payment widget to complete the payment for the indicated amount. If the customer didn't enter an amount, the system will show an error message.

Sample HTML code for a web-form to enter a payment amount

<!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>
  <!-- Adding the Bootstrap v5.0.2 framework. Optional -->
  <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>
  <!-- Adding the PayCross library to call out the widget -->
  <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">
          <!-- Indicating the payment currency in the web-form -->
          <span class="input-group-text">USD</span>
          <!-- Indicating the minimal amount, step and field hint for the `amount` parameter -->
          <input type="number" id="amount" name="amount" min="0" class="form-control" aria-label="Amount" step="0.01" placeholder="*Enter a payment amount"> 
          <span class="input-group-text">
            <!-- Click on the Pay button will generate required parameter values for the `BeGateway` object constructor and will call out the `createWidget` method -->
            <a onclick="payment()" href="#" class="btn">Pay</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Sample JavaScript code for a function that calls out the widget with the indicated amount

<script type="text/javascript">
this.payment = function () {
  if(this.amount.value > 0){
    const amount = (+this.amount.value).toFixed(2) * 100; // Converting the payment amount to minimal currency units, for example, USD 10.00 = 1000
    const params = { // Indicating the payment widget parameters
    "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, // Referring to the payment amount in minimal currency units
        "currency": "USD",
        "description": "Sample payment with the variable payment amount",
        "tracking_id": "asdasd37533638216810052022asdasd"
      },
      "settings": {
        "language": "en"
      },
    }
  }
  new BeGateway(params).createWidget();
  } else {
    alert('You entered an incorrect amount'); // Indicating the text of the error message
    this.amount.value = null;
  }
};
</script>

If you want your customers choose a service to pay before they complete a payment, you can embed a web-form and register a function using the sample codes below.

The sample HTML code generates the following form view: Web-form to choose a service

After clicking the Pay button, the customer will see the payment widget to complete the payment for the selected service. If the customer didn't choose a service, the system will show an error message.

Sample HTML code for a web-form to choose a service

<!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>
  <!-- Adding the Bootstrap v5.0.2 framework. Optional -->
  <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>
  <!-- Adding the PayCross library to call out the widget -->
  <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">
          <!-- Indicating the payment currency in the web-form -->
          <span class="input-group-text">USD</span>
            <!-- Selecting the service and its cost to pay -->
            <select class="form-select" id="services"
              aria-label=".form-select-lg example">
              <option selected>*Choose a service</option>
              <option value="1000">Minimal package 10.00.</option>
              <option value="2000">Standard package 20.00.</option>
              <option value="3000">Premium package 30.00.</option>
            </select>
          <span class="input-group-text">
            <!-- Click on the Pay button will generate required parameter values for the `BeGateway` object constructor and will call out the `createWidget` method -->
            <a onclick="payment()" href="#" class="btn">Pay</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Sample JavaScript code for a function that calls out the widget with the amount of the selected service

<script type="text/javascript">
this.payment = function () {
  const currentSelectValue = +this.services.value;
  if(currentSelectValue){
    const amount = currentSelectValue; // Stating the service cost as a payment amount in minimal currency units, for example USD 10.00 = 1000
    const params = { // Indicating the payment widget parameters
    "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, // Referring to the service cost as a payment amount in minimal currency units
        "currency": "USD",
        "description": "Sample payment for the selected service",
        "tracking_id": "asdasd37533638216810052022asdasd"
      },
      "settings": {
        "language": "en"
      },
    }
  }
  new BeGateway(params).createWidget();
  } else {
    alert('You did not select a service'); // Indicating the text of the error message
    this.services.value = '*Choose a service';
  }
};
</script>

If you want your customers indicate their first and last names in a web-form before they complete a payment, you can embed a web-form and register a function using the sample codes below.

The sample HTML code generates the following form view: Web-form to enter the customer's first and last name

After clicking the Pay button, the customer will see the payment widget to complete the payment with the indicated personal data. If the customer didn't enter full details, the system will show an error message.

Sample HTML code for a web-form to enter the customer's first and last name

<!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>
  <!-- Adding the Bootstrap v5.0.2 framework. Optional -->
  <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>
  <!-- Adding the PayCross library to call out the widget -->
  <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">
          <!-- Indicating the payment amount and currency in the web-form -->
          <span class="input-group-text">10.00 USD</span>
          <!-- Indicating the hint text for the First name field -->
          <input type="text" id="firstName" name="firstName" class="form-control" aria-label="First name"
            placeholder="*Enter your first name">
          <!-- Indicating the hint text for the Last name field -->
          <input type="text" id="lastName" name="lastName" class="form-control" aria-label="Last name"
            placeholder="*Enter your last name">
          <span class="input-group-text">
            <!-- Click on the Pay button will generate required parameter values for the `BeGateway` object constructor and will call out the `createWidget` method -->
            <a onclick="payment()" href="#" class="btn">Pay</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Sample JavaScript code for a function that calls out the widget with the indicated amount and personal data

<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; // Indicating the payment amount in minimal currency units, for example, USD 10.00 = 1000
    const params = { // Indicating the payment widget parameters
      "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, // Referring to the payment amount in minimal currency units
          "currency": "USD",
          "description": "Sample payment with the indicated personal data and amount",
          "tracking_id": "asdasd37533638216810052022asdasd"
        },
        "settings": {
          "language": "en",
          "customer_fields": {
            "visible": [
              "first_name",
              "last_name",
            ]
          },
        },
        "customer": { // Referring to the customer's first and last name to use as values in the `customer_fields` object
          "first_name": firstName,
          "last_name": lastName,
        },
      }
    }
    new BeGateway(params).createWidget();
  } else {
    alert('You did not enter full customer details'); // Indicating the text of the error message
  }
};
</script>

Initializing the widget with payment details from a web-form

Initializing the widget with a payment amount from a web-form

Initializing the widget with services selected in a web-form

Initializing the widget with the customer's first and last name from a web-form