> ## Documentation Index
> Fetch the complete documentation index at: https://docs.i-pay.money/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK JavaScript

> Ouvrez une page de paiement hébergée depuis le web.

Le SDK JavaScript iMoney Encaissement permet d'ajouter un bouton de paiement à votre application web sans développer une intégration complète côté frontend.

## Prérequis

Avant de commencer, assurez-vous de disposer :

* d'un compte marchand iMoney Encaissement actif ;
* de votre clé publique marchand ;
* d'une référence de transaction unique pour chaque paiement ;
* d'une URL de redirection après paiement ;
* d'une URL de callback pour recevoir le statut du paiement.

## Installer le SDK

Ajoutez le script du SDK juste avant la balise fermante `</body>` de votre page.

```html theme={null}
<script src="https://i-pay.money/checkout.js"></script>
```

## Ajouter le bouton de paiement

Placez le bouton de paiement à l'endroit souhaité dans votre page, puis renseignez les attributs avec les valeurs de votre transaction.

```html theme={null}
<button
  type="button"
  class="ipaymoney-button"
  data-amount="100"
  data-environement="live"
  data-key="VOTRE_CLE_PUBLIQUE"
  data-transaction-id="REF-TRANSACTION-001"
  data-redirect-url="https://votre-site.com/paiement/succes?source=ipaymoney"
  data-callback-url="https://votre-site.com/api/callback"
>
  Payer maintenant
</button>
```

## Attributs disponibles

| Attribut              | Type   | Obligatoire | Description                                                                                                                       |
| --------------------- | ------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `data-amount`         | string | Oui         | Montant à payer. Exemple : `100`.                                                                                                 |
| `data-environement`   | string | Oui         | Environnement du compte marchand. Exemple : `live`.                                                                               |
| `data-key`            | string | Oui         | Clé publique marchand iMoney Encaissement.                                                                                        |
| `data-transaction-id` | string | Oui         | Référence unique de la transaction.                                                                                               |
| `data-redirect-url`   | URL    | Oui         | URL vers laquelle le navigateur est redirigé après un succès. Utilisez une URL qui contient déjà un premier paramètre de requête. |
| `data-callback-url`   | URL    | Oui         | URL appelée en `POST` par le navigateur tant que la page reste ouverte. Ce callback n'est pas un webhook serveur.                 |

> **Attention :** utilisez exactement l'attribut `data-environement` tel qu'indiqué ci-dessus.

> **Attention :** l'utilisateur doit rester sur la page de paiement jusqu'à la fin de l'opération afin que le callback puisse être traité correctement.

> **Attention :** ne validez jamais une commande uniquement avec la redirection ou `data-callback-url`. Vérifiez la référence côté serveur avec l'API ou un webhook authentifié — voir [Webhooks](/guides/webhooks).

Le bloc `<button>` et le bloc `<script>` ci-dessus se combinent tels quels dans une page existante : le bouton à l'endroit où vous voulez l'afficher, le script avant la balise fermante `</body>`.