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"
                  }
                }
              });