Standard Kit-Checkout

Checkout Standard provides a simplified and secure flow for collecting payments from customers. It's easy to integrate.

Integrating the Checkout Standard

We'll use direct steps to demonstrate how to integrate Transactpay's payment gateway into your product via the Checkout Standard. Feel free to make any necessary changes to create a personalised experience on your product. In our first example, we'll use a basic "Pay" button to load Checkout Standard on a webpage.

Step 1:

Obtain your API Keys from your dashboard. We recommend you integrate using your test keys to avoid changes to your live data or charging real customers while testing.

Step 2:
Import the checkout library code into the html document by adding the link below to insert the head tag of the document.

<form>
     <script src="https://payment-web-sdk.transactpay.ai/v1/checkout"></script>
    <button type="button" onclick="pay()"> Pay </button>
</form>

Step 3

Initialise payment using this sample function below

const makePayment = () => {
const Checkout = new window.CheckoutNS.PaymentCheckout({
firstName:<customer-firstname>,
  lastName:<customer-lastname>,
  mobile:<customer-mobile>,
  country:<customer-country>,
  email:<customer-email>,
  currency:<payment-currency>,
  amount:<payment-amount>,
reference: <unique-order-reference>
  merchantReference:<unique-order-reference>,
  description:<payment-description>,
  apiKey:<merchant-public-key>,
  encryptionKey:<merchant-public-encryption-key>,
  onCompleted: (data) => {
console.log(data)
if (data?.status?.toLowerCase() == "successful") {
// setPaymentSuccess({ message: data.message ?? "Payment attempt successful" }) }
else {
//setPaymentError({ message: data.message ?? "Payment attempt failed, please try again" })
} },
onClose: (dd) => {
// setPaymentError({ message: "Payment cancelled, Please refresh" })
},
onError: (error) => {
//setPaymentError({ message: error.message ?? "Payment attempt failed, please try again" }) }
});
Checkout.init(); }