Skip to main content

​
Overview

You may want your customers to complete a payment via a custom checkout tailored to your brand aesthitics and user experience. Custom checkout with Novac exposes the API that power our prebuilt checkout to merchant looking at creating an experience of thier own while we still handle the payment processing behind the scene. You only control the payment completion logic while we handle the payment processing.

​
Prerequisite

Before completing a payment via the prebuilt checkout, ensure that you have:
  • Created a checkout payment with a transaction reference or payment link reference — this provides the paymentRedirectUrl needed for redirection.
  • Set up your redirectUrl either on the dashboard or in the API request to ensure users are properly redirected after payment completion.

​
Custom checkout flows

After successfully creating a checkout payment, you can use the transactionReference return as part of the response object to start a custom checkout process. this requires that you have built a form in your frontend that shows the amount charged. We exposes an API that also allow you to fetch transaction fees, complete payment with card, ussd or bank transfer. After creating a checkout payment, you’ll receive a response that includes a paymentRedirectUrl field:
created checkout payment response data
{
    "status": true,
    "message": "Transaction Initialized successfully",
    "data": {
        "transactionReference": "1oWbJQQHLyQqqf1SwxjSpudeA01nm",
        "amount": 1000,
        "statusCode": "01",
        "statusMessage": "Transaction initiated successfully",
        "publicKey": "nc_testpk_a0kuivx6lst100haeqo2eyoxkcqdmmeyyr",
        "paymentRedirectUrl": "https://www.app.novacpayment.com/pay/payments?reference=1oWbJQQHLyQqqf1SwxjSpudeA01nm",
        "collectionPaymentOptions": "CARD,PWBT,USSD,NQR"
    }
}
Lets build a simple payment completion logic using Javascript as our frontend, we will build a simple form using HTML, JS

​
Redirect customers to your custom payment page

On your custom checkout page, you will complete the payment with the transactionReference from the created checkout payment. Your customers have the option to use either USSD, card or transfer. Depending on what they select, you will call any of the APIs below to complete the payment. 
curl --request POST \
  --url https://api.novacpayment.com/api/v1/card-payment \
  --header 'Authorization: <api-key>' \
  --header 'Content-Type: application/json' \
  --data '{
  "cardNumber": "<string>",
  "expiryMonth": "<string>",
  "expiryYear": "<string>",
  "cvv": "<string>",
  "cardPin": "<string>",
  "transactionReference": "<string>"
}'
You can explore more about the API that powers our checkout page below

​
What’s Next?

Learn how to verify transactions after payment is completed: