Payfonte Inline

Inline checkout lets customers pay without leaving your page. You load the Payfonte SDK, initialize checkout with your transaction data, and open the payment iframe. CDN SDK URL: https://cdn.payfonte.com/payfonte.min.js

Why Use Inline?

Seamless UX

Customers stay on your site while completing payment.

Fast Integration

Add one script and trigger checkout from your pay button.

Event Hooks

Use callbacks for completion and close events in your app flow.

Before You Start

Get sandbox credentials

Retrieve your client-id from Settings -> Security -> API Keys and Webhooks in sandbox-app.payfonte.com.

Set your environment

Use sandbox while testing and production only after go-live approval.

Generate unique references

Create a unique reference for every payment attempt to avoid duplicates.

Never expose client-secret in frontend code. Inline checkout should only use client-id.

Quick Integration Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Payfonte Inline</title>
</head>
<body>
  <button id="pay-btn">Pay NGN 1,000.00</button>

<script src="https://cdn.payfonte.com/payfonte.min.js"></script>

  <script>
    document.getElementById("pay-btn").addEventListener("click", () => {
      const handler = new Payfonte({
        environment: "sandbox",
        reference: "ORDER-1001",
        clientId: "YOUR_CLIENT_ID",
        amount: 100000,
        currency: "NGN",
        country: "NG",
        customer: {
          name: "John Doe",
          email: "john@example.com",
          phoneNumber: "2348012345678"
        },
        metadata: {
          orderId: "ORDER-1001"
        },
        callback: (data) => {
          console.log("Payment callback:", data);
          // Verify transaction status on your backend before fulfillment.
        },
        onClose: () => {
          console.log("Customer closed checkout");
        }
      });

      handler.setup();
      handler.openIframe();
    });
  </script>

</body>
</html>

Parameter Reference

Field	Type	Required	Description
`environment`	string	Yes	`sandbox` or `production`
`reference`	string	Recommended	Unique transaction reference
`clientId`	string	Yes	Your Payfonte `client-id`
`amount`	integer	Yes	Amount in minor units (no decimals)
`currency`	string	Yes	ISO currency code (for example `NGN`)
`country`	string	Yes	ISO country code (for example `NG`)
`customer`	object	Yes	Customer details (name/email/phone)
`metadata`	object	No	Custom fields returned in callbacks/webhooks
`callback`	function	Yes	Runs after payment event payload is returned
`onClose`	function	No	Runs when checkout modal is closed

Amount Rule (Important)

Payfonte does not support decimal API amounts. Send integer minor-unit values only.

1000.00 NGN -> 100000
250.50 NGN -> 25050

See Amount Specification for full conversion guidance.

Recommended Production Flow

Create reference on backend

Generate the transaction reference from your backend so you can enforce uniqueness and map it to your internal order.

Use callback for UI updates only

Treat frontend callback as a user experience signal. Final fulfillment should depend on backend verification or webhook confirmation.

Implement webhook confirmation

Always process Webhooks to confirm final transaction state (success/failed).

Handle retries idempotently

If callback/webhook repeats, ensure your order processing runs once per reference.

Troubleshooting

Symptom	Likely Cause	Fix
Checkout does not open	SDK script not loaded	Confirm script URL and browser console errors
Authentication/authorization issues	Invalid `clientId` or wrong environment	Use matching credentials for sandbox/production
Amount validation failure	Decimal amount used	Convert to integer minor units
Duplicate transaction error	Reused `reference`	Generate a new unique reference

Javascript SDK

Full SDK example and configuration reference.

Standard Checkout

Redirect-based alternative integration flow.

Webhooks

Validate final payment status on your backend.

Getting Started

Core Concepts

Providers & Coverage

Development

Collect Payment

Disbursements

Collections - Inline

Payfonte Inline

Why Use Inline?

Seamless UX

Fast Integration

Event Hooks

Before You Start

Quick Integration Example

Parameter Reference

Amount Rule (Important)

Recommended Production Flow

Troubleshooting

Javascript SDK

Standard Checkout

Webhooks

​Payfonte Inline

​Why Use Inline?

Seamless UX

Fast Integration

Event Hooks

​Before You Start

​Quick Integration Example

​Parameter Reference

​Amount Rule (Important)

​Recommended Production Flow

​Troubleshooting

​Related Docs

Javascript SDK

Standard Checkout

Webhooks

Payfonte Inline

Why Use Inline?

Before You Start

Quick Integration Example

Parameter Reference

Amount Rule (Important)

Recommended Production Flow

Troubleshooting

Related Docs