> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alphapay.me/llms.txt
> Use this file to discover all available pages before exploring further.
# SDK JavaScript & Intégration HTML
> Intégrez le checkout AlphaPay directement sur votre site web ou application HTML/JS via notre SDK popup modal.
Le **SDK JavaScript AlphaPay V2** vous permet d'intégrer une expérience de paiement moderne et sécurisée sur n'importe quel site web (HTML statique, WordPress/PHP, React, Vue, Laravel, etc.) sans redirection externe.
Le formulaire de paiement s'ouvre sous forme d'overlay modal réactif au-dessus de votre page, permettant au client de sélectionner son opérateur mobile money (Wave, MTN, Orange, Moov) ou sa carte bancaire et de valider son paiement en toute sécurité.
***
## 1. Importer le SDK
Ajoutez la balise `
```
Une fois chargé, le SDK expose l'objet global `AlphaPayButton` (ainsi que les alias `AlphaPay` et `alphapay`).
***
## 2. Modes d'intégration
Vous disposez de 3 méthodes simples selon l'architecture de votre page.
Cette méthode génère automatiquement un bouton AlphaPay stylisé à l'intérieur du conteneur HTML de votre choix.
```html theme={null}
```
Si vous avez déjà votre propre bouton HTML avec votre propre design CSS, le SDK s'y rattache facilement.
```html theme={null}
```
Idéal pour déclencher le paiement après avoir validé un panier ou un formulaire en JavaScript.
```html theme={null}
```
***
## 3. Options de configuration
L'objet d'options passé à `init` ou `checkout` supporte les propriétés suivantes :
| Propriété | Type | Requis | Description |
| ------------------ | ---------- | ------- | ------------------------------------------------------------------------------------------------------- |
| `amount` | `Number` | **Oui** | Montant à payer (ex: `15000` pour 15 000 XOF). |
| `token` | `String` | **Oui** | Votre clé API AlphaPay (`pk_live_...` ou `sk_live_...`). |
| `currency` | `String` | Non | Code devise ISO (défaut : `"XOF"`). Supporte `XOF`, `EUR`, `USD`, `XAF`, `GNF`. |
| `description` | `String` | Non | Motif ou description de l'achat affiché sur l'interface de paiement. |
| `customer_name` | `String` | Non | Nom complet du client. Si renseigné avec l'email, évite à l'utilisateur de devoir les saisir à nouveau. |
| `customer_email` | `String` | Non | Adresse email du client pour l'envoi de son reçu de paiement. |
| `custom_id` | `String` | Non | Votre référence interne de commande. Transmise dans les métadonnées de la transaction et des webhooks. |
| `callback` | `Function` | Non | Fonction exécutée avec succès après confirmation du paiement : `callback(response)`. |
| `error_callback` | `Function` | Non | Fonction appelée en cas d'échec ou d'erreur : `error_callback(error)`. |
| `on_close` | `Function` | Non | Fonction appelée lorsque le client clique sur la croix de fermeture sans payer. |
| `custom_button` | `Boolean` | Non | Mettre à `true` pour relier le SDK à un bouton existant de votre page. |
| `id_custom_button` | `String` | Non | ID HTML du bouton personnalisé (requis si `custom_button: true`). |
***
## 4. Exemple HTML complet prêt à l'emploi
Voici un fichier HTML autonome (`index.html`) que vous pouvez enregistrer et tester directement dans votre navigateur :
```html theme={null}
Exemple Intégration AlphaPay
Abonnement Formation Pro
Accès complet à la plateforme et au support pendant 1 an.
15 000 XOF
```
***
## 5. Sécurité et Bonnes Pratiques
**Important : Ne validez jamais la livraison d'un produit uniquement sur le callback JavaScript côté navigateur.**
Un utilisateur averti peut techniquement modifier le code exécuté dans son navigateur. Pour sécuriser votre intégration de bout en bout :
1. **Activez les Webhooks** : Configurez votre endpoint de webhook sur votre tableau de bord marchand AlphaPay sous [Développeur > Webhooks](/api-reference/webhooks).
2. **Vérifiez la signature** : Assurez-vous que chaque notification reçue sur votre serveur provient bien d'AlphaPay via le header `X-AlphaPay-Signature`.
3. **Vérification API de secours** : Vous pouvez également appeler notre endpoint de vérification côté serveur :
```bash theme={null}
GET https://api.alphapay.me/api/v1/payments/{id}/verify/
```
avant de débloquer l'accès aux services payants.