Add your own fields

1
  this.form = new Payroc.hostedFields({
2
              sessionToken: sessionRequest['token'],
3
              mode: scenario,
4
              fields: fields,
5
              // Add the onPreSubmit function to validate the data in the fields before the JS Library sends the request to our gateway.
6
              onPreSubmit: () => this.validateCustomerDetails(),
7
          });

1
  async validateCustomerDetails() {
2
          // Check if the .billing-details is present, and returns false if there are no values in any of the fields.
3
          const customerDetails = document.querySelector(".billing-details");
4
          if (!customerDetails) return false;
5
6
          let validation = true;
7
          // Retrieve all values from inside the .billing-details div
8
          const requiredFields = customerDetails.querySelectorAll("input[required]");
9
          for (const field of requiredFields) {
10
                  // Check that the customer has provided a value for each field and that the value is in the correct format. 
11
                  if (!field.value.trim()) {
12
                  // Call a function to display any errors.
13
                  displayMissingFieldsError(field.id);
14
                  validation = false;
15
              }
16
          }
17
          // If the values are present and in the correct format, the JS Library sends the request to our gateway.
18
          return validation;
19
      }

1
  function displayMissingFieldsError(id) {
2
        const input = document.getElementById(id);
3
        // Locate the element that contains the error.
4
        const errorMessage = document.getElementById(id + "-error");
5
        input.classList.add('invalid');
6
7
        errorMessage.style.visibility = 'visible';  // Show the error message.
8
        setTimeout(() => {
9
          input.classList.remove('invalid');
10
          errorMessage.style.visibility = 'hidden'; // Hide the error message after five seconds.
11
        }, 5000); // 5000 ms = 5 seconds
12
      }

1
  this.form.on("submissionSuccess", async ({ token, expiresAt }) => {
2
              // Get the customer object using the data that the customer provided.
3
              const customer = this._getCustomerObject();
4
              // Forward all the required data to the server to create a payment request. 
5
              const response = scenario === "payment"
6
                  ? await yourServer.createPayment(customer, token)
7
                  : await yourServer.createSecureToken(customer, token);
8
9
              // Close the Hosted Fields session and display a response.
10
              document.querySelector('.billing-details').style.display = "none";
11
              document.querySelector(".pyrc-hosted-fields").style.display = "none";
12
              this._renderJSONResponse(response);
13
          });

1
  // Retrieve the data from the fields and organize them into a billingDetails object within a customer object.
2
  _getCustomerObject() {
3
        let data = {};
4
              const billingAddress = this._getCustomFieldValues();
5
        if (Object.keys(billingAddress).length > 0) data['billingAddress'] = billingAddress;
6
        return data;
7
      }
8
9
      _getCustomFieldValues() {
10
          const fields = document.querySelectorAll(".billing-details input, .billing-details select");
11
          const values = {};
12
13
          fields.forEach(field => {
14
              const value = field.value;
15
              if (value) values[field.id] = value.trim();
16
          });
17
18
          return values;
19
      }

1
{
2
  "channel": "web",
3
  "processingTerminalId": "{TerminalID}",
4
  "order": {
5
    "orderId": "{OrderId}",
6
    "amount": 4999,
7
    "currency": "USD"
8
  },
9
  "customer": {
10
    "firstName": "Joe",
11
    "lastName": "Bloggs",
12
    "billingAddress": data['billingAddress']
13
  },
14
  "paymentMethod": {
15
    "secCode": "web",
16
    "token": "{single use token}",  
17
    "type": "singleUseToken"
18
  }
19
}