Skip to main content

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.

To get started, make sure you have Created an Order and that you have Built your Form.

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

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">

Now add a listener to tell ExactJS to tokenize your customer's payment details when the they submit 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('myForm').submit();
  // submit your form to your backend
  document.forms.myForm.submit();
});

When you receive the successful tokenization on your server, you can save the token and related details in your database for future use.

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.

Pay for Order with Token
POST /orders/{orderId}/pay
{
  paymentMethod: {
    token: "the_token",
  }
}

This will complete the payment and yield a payment ID which you can use with the Payments API to get more details about the payment, or to perform follow-up transactions such as captures, refunds or voids.