` portant l'identifiant `monerisCheckout`. La bibliothèque utilise cet élément pour intégrer la page de paiement. Par défaut, la page de paiement s'ouvre en mode plein écran : ```html

``` Pour utiliser des dimensions personnalisées, insérer le conteneur `monerisCheckout` dans un élément `

` parent et définir les dimensions souhaitées : ```html

``` ### Lancer le paiement Prévoir un événement déclencheur pour amorcer le paiement, par exemple un clic sur un bouton. Cette étape récupère le ticket de transaction sécurisé auprès du serveur, intègre les champs de Moneris Checkout dans le conteneur défini précédemment, enregistre les fonctions de traitement des rappels, puis lance le paiement. ```javascript // Récupérer le ticket de transaction sécurisé auprès du serveur const response = await fetch( "http://localhost:3000/api/initiate-checkout", { method: "POST", } ); const data = await response.json(); if (!data.ticket) { throw new Error("No tickets returned from payment initialization endpoint"); } // Créer l'instance Moneris Checkout et définir le conteneur d'intégration const myCheckout = new monerisCheckout(); myCheckout.setMode("qa"); // Utiliser "prod" en production myCheckout.setCheckoutDiv("monerisCheckout"); // Enregistrer les rappels requis pour le cycle de vie et les transactions myCheckout.setCallback("page_loaded", handlePageLoaded); myCheckout.setCallback("cancel_transaction", handleCancelTransaction); myCheckout.setCallback("error_event", handleErrorEvent); myCheckout.setCallback("payment_receipt", handlePaymentReceipt); myCheckout.setCallback("payment_complete", handlePaymentComplete); // Afficher l'interface de paiement hébergée dans le conteneur myCheckout.startCheckout(data.ticket); ``` *** ## Logique serveur à serveur Le processus de paiement exige deux appels serveur à serveur : le premier lance le paiement, le second récupère le reçu une fois le paiement terminé. Les deux demandes utilisent le même point de terminaison, mais avec des propriétés différentes. Dans la mise en œuvre côté serveur, transmettre les demandes **POST** aux adresses Moneris Checkout suivantes, selon l'étape du développement : | Environnement | Adresse | | :------------- | :----------------------------- | | **Essai** | | | **Production** | |
### Demande Preload La demande Preload crée de façon sécurisée une instance Moneris Checkout au moment de la transaction. Il s'agit d'une demande **POST** serveur à serveur qui utilise le format JSON décrit dans la page [Demande Preload](preload-request-api-ref). La réponse à la demande Preload contient un numéro de ticket qui désigne l'instance de paiement de façon unique. Transmettre ce ticket à `myCheckout.startCheckout(ticketNumber)` pour afficher Moneris Checkout dans le navigateur. > **Note :** le numéro de ticket expire après 30 minutes. Transmettre une demande **POST** à `/chktv2/request/request.php` avec le corps suivant : ```json { "store_id": "store2", // Remplacer par le Store ID de Moneris "api_token": "yesguy", // Remplacer par le jeton d'API de Moneris "checkout_id": "chktBA8VTtore2", // Remplacer par le Checkout ID obtenu "txn_total": "100.00", // Montant total de la transaction "environment": "qa", // "qa" pour l'essai, "prod" pour la production "action": "preload" } ``` Pour connaître les autres paramètres, consulter la page [Référence de l'API – Demande Preload](preload-request-api-ref). À prendre en considération : - La facturation récurrente n'est pas offerte avec la tarification multidevise ni avec les cartes-cadeaux. - Les champs liés à la facturation sont obligatoires pour les transactions d'authentification 3-D Secure, sans quoi l'authentification risque d'échouer. ### Demande Receipt Une fois le rappel `payment_complete` reçu, le site Web peut transmettre la demande Receipt serveur à serveur pour obtenir les détails de la transaction nécessaires au reçu et savoir si la transaction a été approuvée ou refusée. Transmettre une demande **POST** à `/chktv2/request/request.php` avec le corps suivant : ```json { "store_id": "store2", // Remplacer par le Store ID de Moneris "api_token": "yesguy", // Remplacer par le jeton d'API de Moneris "checkout_id": "chktBA8VTtore2", // Remplacer par le Checkout ID obtenu "ticket": "1782309276washiedRIyaLlbruGuR02UobXJXUAT", // Numéro de ticket de la demande Preload "environment": "qa", // "qa" pour l'essai, "prod" pour la production "action": "receipt" } ``` Pour connaître les autres paramètres, consulter la page [Référence de l'API – Demande Receipt](receipt-request-api-ref). *** ## Traitement des rappels Les rappels permettent à Moneris Checkout de communiquer avec la page de paiement du commerçant. Chaque rappel comporte un seul paramètre, défini sous forme de chaîne au format JSON. Pour traiter les rappels, créer des fonctions JavaScript qui reçoivent les rappels transmis par Moneris Checkout au moment où les événements se produisent. ### Champs de réponse des rappels | Nom de la variable | Type et limites | Description | | ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | handler | chaîne alphanumérique | Indique le type de rappel utilisé. | | ticket | chaîne alphanumérique | Désigne l'instance Moneris Checkout visée. Cette valeur figure aussi dans la réponse à
la demande Preload initiale. | | response\_code | chaîne alphanumérique | Indique le résultat du rappel.
Pour en savoir plus sur les codes de réponse, consulter la section Codes de réponse de l'onglet de référence de l'API. | ### Rappel de chargement de la page (page\_loaded) #### Utilisation du rappel Ce rappel indique l'état de chargement de la page Moneris Checkout. Il est déclenché une fois Moneris Checkout chargé. #### Méthode JavaScript pour définir le rappel `myCheckout.setCallback("page_loaded",myPageLoad);` #### Exemple de réponse JSON : ```json { "handler":"page_loaded", "ticket":"1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code":"001" } ``` ### Rappel d'annulation de la transaction (cancel\_transaction) #### Utilisation du rappel : Ce rappel est déclenché lorsque le titulaire de carte clique sur le bouton d'annulation dans Moneris Checkout. La pratique courante consiste à appeler la méthode `closeCheckout()` pour fermer Moneris Checkout. Cette méthode doit être appelée, et une nouvelle demande Preload est nécessaire pour créer une nouvelle instance Moneris Checkout. #### Méthode JavaScript pour définir le rappel : `myCheckout.setCallback("cancel_transaction",myCancelTransaction);` #### Exemple de réponse JSON : ```json { "handler":"cancel_transaction", "ticket":"1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code":"001" } ``` ### Rappel de reçu de paiement (payment\_receipt) #### Utilisation du rappel : La transaction est terminée et le reçu est prêt à être récupéré. Si Moneris Checkout est configuré pour produire le reçu, ce rappel est déclenché une fois le reçu de la transaction affiché. Si Moneris Checkout n'est pas configuré pour produire un reçu, ce rappel n'est pas déclenché. Pour savoir à quel moment obtenir la réponse du reçu de la transaction, consulter le rappel de paiement terminé. #### Méthode JavaScript pour définir le rappel : `myCheckout.setCallback("payment_receipt",myPaymentReceipt);` #### Exemple de réponse JSON : ```json { "handler": "payment_receipt", "ticket": "1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code": "001" } ``` ### Rappel de paiement terminé (payment\_complete) #### Utilisation du rappel : Ce rappel est déclenché une fois le paiement traité par Moneris Checkout. Si Moneris Checkout est configuré pour produire un reçu, le titulaire de carte doit revenir à la page de paiement du commerçant pour que le rappel soit déclenché. Pour savoir comment obtenir la réponse du reçu de la transaction, consulter le rappel de reçu de paiement. Moneris Checkout doit ensuite être fermé au moyen de la méthode `closeCheckout()`. #### Méthode JavaScript pour définir le rappel : `myCheckout.setCallback("payment_complete",myPaymentComplete);` #### Exemple de réponse JSON : ```json { "handler":"payment_complete", "ticket":"1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code":"001" } ```
### Rappel de fermeture de la page (page\_closed) #### Utilisation du rappel : Ce rappel est déclenché lorsque le titulaire de carte, après avoir soumis son paiement dans la page de paiement, tente de fermer la fenêtre, clique sur le bouton de retour du navigateur ou actualise la page avant la confirmation du paiement, ce qui provoque une erreur JavaScript.
Moneris Checkout doit être fermé au moyen de la méthode `closeCheckout()`. Le paiement se poursuit normalement, sans modification au déroulement. #### Méthode JavaScript pour définir le rappel : `myCheckout.setCallback("page_closed",myPageClosed);` #### Exemple de réponse JSON : Lorsque le titulaire de carte ferme la fenêtre, clique sur le bouton de retour ou actualise la page dans le navigateur : ```json { "handler":"page_closed", "response_code":"001" } ``` Lorsqu'une erreur JavaScript se produit : ```json { "handler":"page_closed", "ticket":"1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code":"001" } ``` ### Rappel de soumission du paiement (payment\_submitted) #### Utilisation du rappel : Ce rappel est déclenché lorsque le titulaire de carte clique sur le bouton de paiement et que le traitement du paiement commence. #### Méthode JavaScript pour définir le rappel : `myCheckout.setCallback("payment_submitted",myPaymentSubmitted);` #### Exemple de réponse JSON : ```json { "handler":"payment_submitted", "ticket":"1539961059DdrvGG3Yj7rxvMAgvRlc4nqKXF7YjT", "response_code":"001" } ``` ## Finalisation du paiement ### Déclenchement du paiement Lorsque le client amorce le paiement, la page Moneris Checkout s'affiche dans le conteneur `

` du site Web. Pour afficher l'instance Moneris Checkout dans le conteneur, appeler `myCheckout.startCheckout(ticketNumber)`. *** ### Fin du paiement Pour mettre fin à l'instance Moneris Checkout, appeler `myCheckout.closeCheckout()`. *** ## Mise à l'essai de l'intégration À l'étape des essais : 1. Utiliser le Centre de ressources pour commerçants d'essai, à l'adresse , pour configurer la page Moneris Checkout aux fins des essais. 2. Utiliser l'adresse d'essai pour les demandes serveur à serveur : 3. Référencer la bibliothèque JavaScript d'essai indiquée à la section [Choisir une version de la bibliothèque Moneris Checkout](#choisir-une-version-de-la-bibliothèque-moneris-checkout). ```html Intégration standard ``` ```html Intégration avec SRI ``` 4. Régler l'objet myCheckout au mode d'essai : `myCheckout.setMode("qa");` 5. Dans toutes les demandes, utiliser la valeur « qa » pour la variable **environment** et s'assurer d'utiliser la version d'essai des identifiants **Store ID**, **API token** et **Checkout ID**. ### Cartes d'essai Lors des essais, il est possible d'utiliser les numéros de carte suivants, avec n'importe quelle date d'expiration à venir. | Type de carte | Numéro de carte | | ------------- | ------------------------------------ | | MasterCard | 5454545454545454 | | Visa | 4242424242424242 ou 4005554444444403 | | Amex | 373599005095005 | | Diners | 36462462742008 | ### Mise à l'essai des frais de commodité ou des frais de service Pour mettre à l'essai des transactions comportant des frais de commodité ou des frais de service dans Moneris Checkout, utiliser les identifiants d'essai suivants : ``` Store ID: monca00392 API token: qYdISUhHiOdfTr1CLNpN Username: DemoUser Password: password ``` ### Mise à l'essai 3DS Pour mettre à l'essai une intégration 3-D Secure, consulter la documentation suivante : *** ## Passage en production avec MCO Une fois les essais de l'intégration Moneris Checkout terminés, effectuer les étapes suivantes pour passer en production : 1. S'assurer que la configuration d'essai finale a été reproduite dans la configuration Moneris Checkout de production, dans le Centre de ressources pour commerçants de production, à l'adresse `https://www3.moneris.com/mpg`. 2. Utiliser l'adresse de production pour les demandes serveur à serveur :
`https://gateway.moneris.com/chkt/request/request.php` 3. Utiliser la bibliothèque JavaScript de production : ```html ``` 4. Régler l'instance de paiement au mode de production : ```javascript myCheckout.setMode("prod"); ``` 5. Dans toutes les demandes, utiliser la valeur « prod » pour la variable **environment** et s'assurer d'utiliser la version de production des identifiants **Store ID**, **API token** et **Checkout ID**. ### Considérations relatives à la conformité Les exigences de la norme PCI DSS peuvent varier selon l'intégration de paiement et sa mise en œuvre. Examiner les exigences de conformité applicables à l'entreprise avant le passage en production. Pour en savoir plus, consulter la [page Conformité](compliance).