Skip to main content

​
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

1

Get sandbox credentials

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

Set your environment

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

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

FieldTypeRequiredDescription
environmentstringYessandbox or production
referencestringRecommendedUnique transaction reference
clientIdstringYesYour Payfonte client-id
amountintegerYesAmount in minor units (no decimals)
currencystringYesISO currency code (for example NGN)
countrystringYesISO country code (for example NG)
customerobjectYesCustomer details (name/email/phone)
metadataobjectNoCustom fields returned in callbacks/webhooks
callbackfunctionYesRuns after payment event payload is returned
onClosefunctionNoRuns 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.

Create reference on backend

Generate the transaction reference from your backend so you can enforce uniqueness and map it to your internal order.
Treat frontend callback as a user experience signal. Final fulfillment should depend on backend verification or webhook confirmation.
Always process Webhooks to confirm final transaction state (success/failed).
If callback/webhook repeats, ensure your order processing runs once per reference.

​
Troubleshooting

SymptomLikely CauseFix
Checkout does not openSDK script not loadedConfirm script URL and browser console errors
Authentication/authorization issuesInvalid clientId or wrong environmentUse matching credentials for sandbox/production
Amount validation failureDecimal amount usedConvert to integer minor units
Duplicate transaction errorReused referenceGenerate 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.