- Directives d'intégration
- Mise en œuvre d'une intégration Hosted Payment Form
- Hosted Payment Form avec modèle JavaScript
Hosted Payment Form avec modèle JavaScript
Le modèle Hosted Payment Form avec JavaScript(HPF.js) est une intégration simple qui limite au minimum les interactions entre votre serveur Web et ANZ eGate payment gateway en utilisant une bibliothèque JavaScript côté client, que vous devez inclure dans la page de paiement et à laquelle vous devez accéder via la méthode HostedForm.updateSession( ). Les détails de la carte du payeur sont envoyés à ANZ eGate payment gateway dans la méthode HostedForm.updateSession( ) qui est appelée lorsque le payeur clique sur « Payer » pour soumettre la page de paiement.
Bonnes pratiques et conseils
Il est important de s'assurer que les champs de paiement sensibles ne sont pas soumis à votre serveur. Par exemple, si vous utilisez un formulaire de paiement, vous pouvez le faire en omettant l'attribut « name » du numéro de carte, la date d'expiration de la carte et les champs CSC/CVV.
Vous ne pouvez pas utiliser le modèle Hosted Payment Form avec JavaScript si le navigateur du payeur ne prend pas en charge JavaScript.
Flux d'informations HPF.js
Le flux de paiement détaillé pour le modèle HPF.js est illustré ci-dessous.
- Affichez au payeur une page de paiement demandant les détails de la carte et les autres informations requises en entrée. La page de paiement :
- doit inclure la bibliothèque hpf.js, accessible en appelant la méthode HostedForm.updateSession( );
- doit inclure la méthode HostedForm.setMerchant( ) pour définir l'identifiant de votre compte de commerçant dans ANZ eGate payment gateway,
- doit contenir des champs de carte (numéro de carte, code sécurité, mois d'expiration et année d'expiration) que vous devez recueillir auprès du payeur,
- peut contenir des champs supplémentaires que vous souhaiterez peut-être collecter à ce stade, par exemple : Adresse d'expédition, Numéro de bon de réduction, etc.,
- peut être stylisé selon vos besoins.
Voir Génération de votre intégration.
Cette page sert uniquement à collecter les détails de la carte et non à effectuer un paiement. - Le payeur saisit les détails de la carte et clique sur le bouton « Pay » (Payer) de votre site Web, qui appelle la méthode HostedForm.createSession( ). Les détails de la carte collectés via la page de paiement sont transmis dans la méthode HostedForm.createSession( ).
ANZ eGate payment gateway collecte, vérifie (à l'aide de la vérification de base) et nettoie les détails de la carte (numéro de carte, date d'expiration et données CSC/CVV) avant d'ajouter ces détails à la session.
- ANZ eGate payment gateway renvoie la réponse à l'appel HostedForm.createSession( ) à l'aide d'une fonction de rappel que vous fournissez.
- Votre site Web analyse toutes les erreurs renvoyées par ANZ eGate payment gateway et réaffiche la page de paiement en cas de détection d'erreurs.
- Votre site Web soumet l'identifiant de session renvoyé à votre serveur Web.
Vous pouvez choisir d'afficher d'autres pages pour le payeur en fonction du flux de travail de votre entreprise ou d'effectuer une transaction de stockage ou de paiement au moment de la collecte des détails de la carte.
- Vous lancez une demande adressée à ANZ eGate payment gateway en spécifiant les champs requis à l'aide d'une ou plusieurs des opérations Direct API suivantes : Authorize (Autoriser), Pay (Payer), Tokenization (Segmentation en jetons). Les détails de carte peuvent être fournis à l'aide de sources multiples de détails de cartes. Pour plus d'informations, voir Exécution d'une opération au moyen de la session.
Avant d'effectuer la transaction de paiement, vous pouvez soumettre une demande d'évaluation du taux pour la conversion de devise dynamique (DCC) afin d'extraire la devise du payeur et le montant de la commande dans cette devise.
À ce stade, vous pouvez également authentifier le payeur au moyen du service 3-D Secure. Notez que si le payeur accepte l'offre DCC, vous devez fournir les informations DCC dans la demande d'authentification. - ANZ eGate payment gateway vous renvoie le résultat de la demande. Vous pouvez effectuer des opérations ultérieures en utilisant l'identifiant de session avant l'expiration de la session.
- Vous affichez le résultat de la transaction au payeur sur votre site Web.
Si vous disposez de votre propre page de paiement, vous pouvez choisir cette option pour que ANZ eGate payment gateway gère les détails liés à l'inclusion du SDK Visa Checkout au lancement de la lightbox Visa Checkout et à la mise à jour des résultats dans une session de paiement. Il s'agit de l'option la plus simple pour les intégrations Hosted Payment Form (avec JavaScript) existantes.
Le flux de paiement est le suivant :
- Affichez une page de paiement pour le payeur, comme l'exige l'intégration Hosted Payment Form avec JavaScript. Votre page de paiement doit inclure un moyen d'identifier Visa Checkout comme option de paiement sélectionnée par le payeur.
Vous trouverez ci-dessous un exemple de code qui montre comment afficher Visa Checkout comme option sur votre page de paiement.
<script id="hpfScript" src="https://anzworldline.gateway.mastercard.com/form/v3/hpf.js"></script>
<!-- REPLACE THE action URL with the payment URL on your webserver -->
<form name="myform" method="POST" action="https://my.company.com/pay">
<!-- Other fields can be added to enable you to collect additional data on the payment page -->
Email: <input type="text" name="email">
<!-- The hidden values below can be set in the callback function as they are returned when creating the session -->
<input type="hidden" name="sessionId" id="sessionId">
<img alt="Visa Checkout" role="button" src="https://sandbox.www.v.me/wallet-services-web/xo/button.png" onclick="showVisaCheckoutLightbox()"/>
</form> - Lorsque le payeur sélectionne Visa Checkout, la page de paiement lance la boîte de contenu superposé Visa Checkout avec les options requises. Lorsque l'interaction avec la lightbox est terminée, hpf.js utilise automatiquement le callId renvoyé par la lightbox pour récupérer les détails de paiement de Visa Checkout. Le résultat de l'interaction est renvoyé dans la fonction de rappel — si l'interaction a réussi, les détails du paiement sont indiqués dans la session de paiement.
Voici un exemple de code qui indique comment appeler la méthode HostedForm.showVisaCheckout( ) pour lancer la boîte de contenu superposé Visa Checkout avec les options requises et fournir les détails de l'interaction de Visa Checkout dans une session de paiement.
<script>
var options = {
acceptedCards: [
"MASTERCARD",
"AMEX",
"DISCOVER",
"VISA"
],
order: {
currency: "AUD",
amount: 10.50
},
merchant: {
logo: "https://test.te",
displayName: "your merchant"
},
country: "AUS",
locale: "en_AU",
paymentConfirmation: "CONFIRM_AT_PROVIDER"
paymentConfirmationMessage: "Continue to the merchant to complete your purchase"
};
function showVisaCheckoutLightbox() {
if (typeof HostedForm === 'undefined') {
throw 'hpf.js is not loaded';
}HostedForm.setMerchant("MERCHANT_ID"); //Replace with your merchant id
HostedForm.showVisaCheckout(options,
callback);
}</script> - La fonction de rappel JavaScript gère la réponse d'interaction de Visa Checkout via un objet décrivant le résultat de l'appel
HostedForm.showVisaCheckout( ). Vous devez définir cette fonction de rappel sur votre page de paiement.Si
response.status="ok", votre page Web doit transmettre l'identifiant de session renvoyé à votre serveur Web afin qu'il puisse l'utiliser pour appeler une opération faisant référence à la session.Vous trouverez ci-dessous un exemple de code qui montre comment définir la fonction de rappel sur la page de paiement, qui est soumise à votre serveur Web.
var callback = function(response) {
if (response.status === "ok") {
// call your server to do the payment with the response.session value
// this is where we populate the hidden values in the form
var sessionIdElement = document.getElementById("sessionId");
sessionIdElement.value = response.session;
document.myform.submit();
}else if (response.status === "request_timeout") {
// handle the timeout for example by giving the payer the possibility to retry
}else if (response.status === "invalid_session") {
// handle invalid session details for example by giving the payer the possibility to retry with different card details. If the new details are correct,
you can call the updateSession( ) method
}else if (response.status === "cancelled") {
// handler code for the case when the user closes the Visa Checkout lightbox without selecting a credit card
}else {
// add system error handling here. Typically this would mean the integration is not working properly because there is no response from the client library.
// this could result in displaying a page to the payer to try again later and call support
}
}; - Vous pouvez désormais utiliser l'identifiant de session de paiement pour effectuer une opération au cours de laquelle une session de paiement peut fournir les détails du paiement, par exemple les demandes Authorize (Autoriser), Pay (Payer) ou Tokenize (Segmenter en jetons). Notez que les détails de la carte peuvent être fournis à l'aide de sources multiples de détails de cartes.
Dépannage et questions fréquentes
Si vous mettez à jour la session à l'aide de la méthode HostedForm.updateSession( ), vous pouvez effectuer une transaction Pay (Payer) UNIQUEMENT avec Direct API v30. Si l'intégration est faite avec Direct API v29 ou une version antérieure, vous devez mettre votre intégration à niveau vers v30.
Le formulaire de paiement peut renvoyer différents types d'erreurs. Voir Gestion des erreurs.
Votre page de paiement peut contenir des champs définis par le commerçant afin de collecter des informations supplémentaires, telles qu'un code de bon de réduction, un identifiant de programme de fidélité, une dresse d'expédition, une méthode de livraison etc. Toutefois, si vous transmettez cette information à la méthode HostedForm.updateSession( ), elle sera ignorée.
Oui, vous pouvez appeler la méthode HostedForm.createSession( ) plusieurs fois — une nouvelle session étant créée chaque fois que vous appelez la méthode HostedForm.createSession( ).