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)

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="nameElement"></div>
<div id="cardDiv" ></div>
<div id="expiryDiv"></div>
<div id="cvdDiv"></div>

Now we can configure the form as follows:

const components = exact.components({orderId: "the_order_id"});
components.addComponent('nameElement', 'cardholder-name');
components.addComponent('numberElement', 'card-number');
components.addComponent('expiryElement', 'expiry-date');
components.addComponent('cvdElement', 'cvd');

This allows us to customize individual elements of our Card Components.

The following code from p2-complete/pages/checkout2.tsx creates a "bullet" UI.

components.addComponent('cardDiv', 'card-number', {
label: {position: "inside"},
style: {
default: {
borderRadius: "10px 10px 0px 0px",
borderWidth: "2px 2px 0px 2px",
borderColor: "red"
}
}
});
components.addComponent('expiryDiv', 'expiry-date', {
label: {position: "inside"},
style: {
default: {
borderRadius: "0px 0px 0px 10px",
borderWidth: "0px 0px 2px 2px",
borderColor: "darkseagreen"
}
}
});
components.addComponent('cvdDiv', 'cvd', {
label: {position: "inside"},
style: {
default: {
borderRadius: "0px 0px 10px 0px",
borderWidth: "0px 2px 2px 0px",
borderColor: "blue"
}
}
});