> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payfonte.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Collections - Inline
> Embed Payfonte checkout directly on your website using the JavaScript SDK.
# 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?
Customers stay on your site while completing payment.
Add one script and trigger checkout from your pay button.
Use callbacks for completion and close events in your app flow.
## Before You Start
Retrieve your `client-id` from `Settings -> Security -> API Keys and Webhooks` in [sandbox-app.payfonte.com](https://sandbox-app.payfonte.com).
Use `sandbox` while testing and `production` only after go-live approval.
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
```html Inline SDK theme={null}
Payfonte Inline
```
## 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](/en/guides/introductions/amount-specification) for full conversion guidance.
## Recommended Production Flow
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](/en/guides/collections/webhook) to confirm final
transaction state (`success`/`failed`).
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 |
## Related Docs
Full SDK example and configuration reference.
Redirect-based alternative integration flow.
Validate final payment status on your backend.