> ## 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.
# Collecte - Inline
> Intégrez le checkout Payfonte directement à votre site web avec le SDK JavaScript.
# Payfonte Inline
Le checkout inline permet à vos clients de payer sans quitter votre page. Vous chargez le SDK Payfonte, initialisez le checkout avec les données de transaction, puis ouvrez l'iframe de paiement.
URL CDN du SDK :
`https://cdn.payfonte.com/payfonte.min.js`
## Pourquoi utiliser l'inline ?
Les clients restent sur votre site pendant tout le paiement.
Ajoutez un script et déclenchez le checkout depuis votre bouton de paiement.
Utilisez des callbacks de fermeture et de finalisation dans votre flux
applicatif.
## Avant de commencer
Récupérez votre `client-id` depuis `Settings -> Security -> API Keys and Webhooks` sur [sandbox-app.payfonte.com](https://sandbox-app.payfonte.com).
Utilisez `sandbox` pour les tests et `production` seulement après validation de la mise en production.
Créez une `reference` unique pour chaque tentative de paiement afin d'éviter les doublons.
N'exposez jamais `client-secret` dans du code frontend. Le checkout inline ne
doit utiliser que `client-id`.
## Exemple d'intégration rapide
```html Inline SDK theme={null}
Payfonte Inline
```
## Référence des paramètres
| Champ | Type | Requis | Description |
| ------------- | -------- | ---------- | ------------------------------------------------------------ |
| `environment` | string | Oui | `sandbox` ou `production` |
| `reference` | string | Recommandé | Référence de transaction unique |
| `clientId` | string | Oui | Votre `client-id` Payfonte |
| `amount` | integer | Oui | Montant en sous-unités, sans décimales |
| `currency` | string | Oui | Code devise ISO, par exemple `NGN` |
| `country` | string | Oui | Code pays ISO, par exemple `NG` |
| `customer` | object | Oui | Informations client, nom, e-mail, téléphone |
| `metadata` | object | Non | Champs personnalisés renvoyés dans les callbacks et webhooks |
| `callback` | function | Oui | Exécuté après le retour d'un événement de paiement |
| `onClose` | function | Non | Exécuté lorsque la modale de checkout se ferme |
## Règle de montant importante
Payfonte ne prend pas en charge les montants API décimaux. Envoyez uniquement des valeurs entières en sous-unités.
* `1000.00 NGN` -> `100000`
* `250.50 NGN` -> `25050`
Voir [Spécification des montants](/fr/guides/introductions/amount-specification) pour les règles complètes de conversion.
## Flux de production recommandé
Générez la référence de transaction depuis votre backend afin de garantir
son unicité et son lien avec votre commande interne.
Considérez le callback frontend comme un signal UX. La finalisation métier
doit dépendre d'une vérification backend ou d'un webhook.
Traitez toujours les [Webhooks](/fr/guides/collections/webhook) pour
confirmer l'état final de la transaction, `success` ou `failed`.
Si un callback ou un webhook est rejoué, assurez-vous que le traitement de
commande ne s'exécute qu'une fois par référence.
## Dépannage
| Symptôme | Cause probable | Correctif |
| ------------------------------- | -------------------------------------------- | --------------------------------------------------------------- |
| Le checkout ne s'ouvre pas | Script SDK non chargé | Vérifiez l'URL du script et la console du navigateur |
| Problèmes d'authentification | `clientId` invalide ou mauvais environnement | Utilisez les identifiants correspondant à sandbox ou production |
| Échec de validation du montant | Montant décimal utilisé | Convertissez en sous-unités entières |
| Erreur de transaction en double | `reference` réutilisée | Générez une nouvelle référence unique |
## Documentation associée
Exemple complet et référence de configuration du SDK.
Intégration alternative basée sur une redirection.
Validez le statut final des paiements côté backend.