Skip to main content

Individual Components

Payment Form with Separate Components‚Äč

If you would prefer to build your own custom payment form, we also support the required form elements as individual components.

Example: https://github.com/exact-payments/next-merchant-demo/blob/main/p2-complete/pages/checkout2.tsx

Supported components are:

  • Cardholder Name (optional)
  • Card Number (mandatory)
  • Expiry Date (mandatory)
  • CVD/CVC (mandatory)
  • Address (optional)

You can add these to your payment form, in whatever order, or placement you wish.

Instead of a single cardElement we will declare divs for each of the card components.

<div id="nameDiv"></div>
<div id="cardDiv" ></div>
<div id="expiryDiv"></div>
<div id="cvdDiv"></div>
<div id="addressDiv"></div>

Now we can configure the form as follows:

const components = exact.components({orderId: "the_order_id"});
components.addComponent('nameDiv', 'cardholder-name');
components.addComponent('numberDiv', 'card-number');
components.addComponent('expiryDiv', 'expiry-date');
components.addComponent('cvdDiv', 'cvd');
components.addComponent('addressDiv', 'address', {
billingAddress: {
type: "partial"
}
);

Each of these <div>s is part of your page and can by laid out using your own CSS, for example, this completely whimsical grid layout!

individual_components_mixed_grid