Tokenize from Browser

The second option is to configure your payment form so that your customer's payment details will be tokenized from the browser. You will then need to pay for the Order from your backend server, using the token details returned by ExactJS.

You can also save the returned token details to initiate payments in the future, without incurring any PCI compliance requirements.

Cardholder Name, Card Number, Expiration Date, and CVD are all required to tokenize a payment in browser.

For this option, you need to add a few elements to your form to accept the token details 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 Created an Order

Make sure you have Built your Form

Add Token Detail Elements

<input type="hidden" name="token" id="token">
<input type="hidden" name="card_brand" id="card_brand">
<input type="hidden" name="expiry_month" id="expiry_month">
<input type="hidden" name="expiry_year" id="expiry_year">
<input type="hidden" name="last4" id="last4">
<input type="hidden" name="order_id" id="order_id">

Now add a listener to tell ExactJS to tokenize their payment details when the customer submits the form.

Tokenize Form Submission

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

  exact.tokenize();

  return false;
});

Again, you would need to provide handlers for both the payment-failed and payment-complete conditions.

The payment-failed handler has been shown earlier, but the payload after a successful tokenization is different from that of a payment, so here's a sample payment-complete handler for tokenization.

Successful

exact.on("payment-complete", (payload) => {
  // add the token details to your form
document.getElementById('token').value  = tokenPayload.token;
document.getElementById('card_brand').value  = tokenPayload.card_brand;
document.getElementById('expiry_month').value  = tokenPayload.expiry_month;
document.getElementById('expiry_year').value  = tokenPayload.expiry_year;
document.getElementById('last4').value  = tokenPayload.last4;
document.getElementById('order_id').value = response.data.orderId;
document.getElementById('myForm').submit();
  // submit your form to your backend
  document.forms.myForm.submit();
});

The final step for this option is for you to pay for the order from your backend server, using the token you have just received. As before, you will use your secret API key to authenticate this API request.

Pay for Order with Token

POST /orders/{orderId}/pay
{
  payment_method: {
      token: "the_token",
  }
}