Skip to main content

Overview

Prerequisites​

The following prerequisites are required to use ExactJS:

  • You have been onboarded and given an account ID
  • You have generated or been given access to an Application Token
  • You will need a list of test cards

Creating an Order​

Before rendering your payment form for the customer, you need to send the details of the order to our servers. From your server, send a POST request to our Orders with the details of your customer's order.

You will need to use your API key to authenticate this request. Include it as an Authorization header.

POST /orders
{
  amount: 1123
}

The above example is the bare minimum required to create an order. Please see the Orders API reference for the various other options available when creating an Order.

This will return an order ID and an access token which you will need to include on your payment form.

You can also use the ID with the Orders API to update the order as many times as you need until the customer has paid. Once the order has been paid, further updates will be rejected.

Access Tokens​

The access token you received when you created the Order will allow your customers to access our APIs from their browser for a limited time period. It is valid for 15 minutes and, once it has expired, further API requests will be rejected.

You can optionally re-generate an access token if you want to allow your customer more time to complete their payment.

Building Your Form​

When building your payment form, you first need to add our ExactJS library.

For the sandbox environment, you should load the file from the api.exactpaysandbox.com domain.

For production, load it from the api.exactpay.com domain.

<head>
  <script src="https://api.exactpaysandbox.com/js/v1/exact.js"></script>
</head>

You then need to initialize the library with the access token - do not use your secret API key!!

const exact = ExactJS("the_access_token");

Create your payment form, including an element to which we will attach our credit card UI. Here's a simple example:

<form id="myForm" action="your_form_url" method="post">
  <div>
    <label for="email-address">Email address</label>
    <input type="email" id="email-address" name="email-address" autocomplete="email">
  </div>

  <div id="cardElement">
    <!-- our credit card UI component will be attached here -->
  </div>

  <div>
    <label for="address">Address</label>
    <input type="text" id="address" name="address" autocomplete="street-address">
  </div>

  <div>
    <label for="apartment">Apartment, suite, etc.</label>
    <input type="text" id="apartment" name="apartment">
  </div>

  <div>
    <label for="city">City</label>
    <input type="text" id="city" name="city">
  </div>

  <div>
    <label for="province">Province</label>
    <input type="text" id="province" name="province">
  </div>

  <div>
    <label for="postal-code">Postal code</label>
    <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code">
  </div>

  <!-- INSERT RESPONSE ITEMS HERE -->

  <div>
    <input type="submit" name="commit" value="Pay Now" data-disable-with="Pay Now">
  </div>
</form>

Tell ExactJS to add the credit card UI to your form. You will also need to provide your Order ID at this stage.

const components = exact.components({orderId: "the_order_id"});
components.addCard('cardElement');

Pay from Browser​

Read the Overview

View in Sample Repo

Step by Step Tutorial

Tokenize in Browser​

Read the Overview

View in Sample Repo

User Flow Diagram​

exactjs-sequence