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 UI

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, Opay, Palmpay 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>"
}'

​
Opay integration

To complete payment with OPay integration, make a POST request and pass the transaction ref used when creating the checkout payment. Pass it as a query parameter. Redirect the customer to the cashierUrl page to complete the payment. 
curl --request POST \
  --url  https://api.novacpayment.com/api/v1/opay-payment?transactionReference={tranref} \
  --header 'Authorization: <api-key>' \
  --header 'Content-Type: application/json' \

​
Palmpay integration

Make a POST request to this endpoint, ensure you pass the unique reference used during checkout creation. When the request is successful redirect customer to checkoutUrl to complete the payment. 
curl --request POST \
  --url https://api.novacpayment.com/api/v1/palmpay-payment?transactionReference={tranref} \
  --header 'Authorization: <api-key>' \
  --header 'Content-Type: application/json' \
You can explore more about the API that powers our checkout page below

​
MoMo Custom Checkout Flow

To build a custom MoMo checkout experience, you must first create a payment intent by initiating a MoMo checkout payment. Use the reference returned from that step throughout this flow.

​
Get Supported MoMo Providers

Before collecting the customer’s mobile money details, fetch the list of supported providers to populate your UI and retrieve the correct bank_code for the next step. 
curl --request GET \
  --url https://integrations.novacpayment.com/api/v1/mobilemoneybanks/GHS \
  --header 'Authorization: <api-key>' \
  --header 'Content-Type: application/json'
Response
{
  "success": true,
  "message": "Bank list retrieved",
  "currency": "GHS",
  "data": [
    {
      "bank_name": "MTN Ghana",
      "bank_code": "MTNGH"
    },
    {
      "bank_name": "Telecel Ghana",
      "bank_code": "TCELGH"
    }
  ]
}
Two MoMo providers are currently supported — MTN Ghana and Telecel Ghana. This list will be updated as additional providers are added.

​
Create the MoMo Payment

Once the account is validated, submit the payment request using the reference from your checkout, along with the customer’s account details. Novac will trigger a payment approval prompt on the customer’s mobile money app. 
curl --request POST \
  --url https://api.novacpayment.com/api/v1/momo-payment \
  --header 'Authorization: <api-key>' \
  --header 'Content-Type: application/json' \
  --data '{
    "reference": "{reference}",
    "accountNumber": "{account_number}",
    "bankCode": "{bank_code}"
  }'
Response
{
  "status": true,
  "message": "Momo transaction initiated."
}
A successful response confirms the request was received. The transaction is not yet complete at this point, the customer must approve the payment prompt on their mobile money app to settle the transaction. Once approved, Novac will notify you of the payment status via webhooks.

​
What’s Next?

Learn how to verify transactions after payment is completed: