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.

First, make sure you have Built your Form

For this option, you need to add an element to your form to accept the payment ID returned by ExactJS, so find the <!-- INSERT RESPONSE ITEMS HERE --> comment in the sample form and insert the following elements:

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()
  return false;
});

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, you will want to handle the payment-failed condition. For this condition, the payload will consist of an array of error strings, which you 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");
});

For the payment-complete condition, you will need to add a handler which accepts the payload, extracts the paymentId, adds that to your form and then submits the form to uour backend.

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();
});

When you receive the successful payment on your server, you should save the payment ID 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.