Pay from Browser

Configure your payment form so that your customers pay for the order directly from their browser. The ID of the completed payment will be returned to you. This ID can then be used with our Payments API to look up further details of the payment for example, or to capture an authorization.

For this option, you need to add an element to your form to accept the payment ID returned by ExactJS, so insert the following snippet into your form in place of the comment in the sample form above.

Make sure you have Built your Form

Add Payment ID Element

<input type="hidden" name="payment_id" id="payment_id">

Now add a listener to tell ExactJS to pay for the order when the customer submits the form.

document.getElementById("myForm").addEventListener('submit', (event) => {
  event.preventDefault();
  exact.payOrder()
});

Once the customer clicks your form's submit button, ExactJS will gather the payment details they have entered and will use that to pay for the order. The payment can succeed or fail, so you will need to provide handlers for each of those conditions.

If the payment did not complete, we will want to handle the payment-failed condition. For this condition, the payload will consist of an array of error strings, which we can display to the customer.

Failed Payment Handler

exact.on("payment-failed", (payload) => {
  const errorElem = document.getElementById("errors");
  Array.from(payload).forEach(err => {
    const pElem = document.createElement("p");
    pElem.textContent = err;
    errorElem.append(pElem);
  });
  errorElem.classList.remove("hidden");
});

Succesful Payment Handler

exact.on("payment-complete", (payload) => {
  // add the payment id to your form
  document.getElementById('payment_id').value = payload.paymentId;
  // submit your form to your backend
  document.forms.myForm.submit();
});

You should save the payment ID on your server as it will allow you to use the Payments API to get more details about the payment, or to perform follow-up transactions such as captures, refunds or voids.