Accepter plusieurs cartes
Hosted Session vous permet de prendre en charge des scénarios dans lesquels votre payeur souhaite utiliser plusieurs cartes pour une même réservation. Dans ce cas, vous devez créer une session de paiement distincte et une commande distincte pour chaque carte.
Vous devez stocker l'ID de session unique créé pour chaque carte sur votre serveur, puis rassembler toutes les différentes commandes générées à partir des sessions de paiement distinctes en une seule réservation. Le payeur peut choisir de supprimer une carte lors de l'interaction avec la page de paiement, et cette action supprime les données de session associées à la carte de votre serveur.
Implémentation de plusieurs Hosted Sessions
Pour accepter plusieurs cartes, vous devez appeler la PaymentSession.configure() fonction avec l' scope argument pour chaque carte que le payeur souhaite utiliser. La valeur de cet argument peut être n'importe quelle chaîne unique, utilisée pour identifier un bloc de données de paiement par carte, et n'a pas besoin de référencer un élément HTML spécifique sur la page. Les données que vous stockez sur votre serveur pour chaque carte doivent être conservées dans un cadre séparé.
PaymentSession.configure('configuration', scope)
Après qu'un premier PaymentSession.configure() appel soit invoqué avec scope, l' scope argument devient obligatoire pour les Hosted Session appels de fonction suivants, comme indiqué dans le exemples ci-dessous :
PaymentSession.updateSessionFromForm('card', 'card-type', scope)PaymentSession.setFocus('cardNumber', scope)
L'argument scope est facultatif sur les appels suivants si une interaction est configurée avec un cadre. Si aucun paramètre « scope » n'est spécifié dans ces appels, la fonction ou le rappel s'applique à tous les jeux de données de carte dans l'iFrame hébergé.
PaymentSession.setFocusStyle([<HostedFieldsRole>], styles, scope)PaymentSession.setHoverStyle([<HostedFieldsRole>], styles, scope)PaymentSession.onFocus([<HostedFieldsRole>],function(selector), scope)PaymentSession.onBlur([<HostedFieldsRole>], function(selector), scope)PaymentSession.onChange([<HostedFieldsRole>], function(selector), scope)PaymentSession.onMouseOver([<HostedFieldsRole>], function(selector), scope)PaymentSession.onMouseOut([<HostedFieldsRole>], function(selector), scope)
Exemple de plusieurs Hosted Sessions
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://ap-gateway.mastercard.com/form/version/72/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>
<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->
<div>Please enter your payment details:</div>
<div>Cardholder Name: <input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="1" readonly></div>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="2" readonly></div>
<div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="3" readonly></div>
<div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="4" readonly></div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="5" readonly></div>
<div><button id="payButton" onclick="pay();">Pay Now</button></div>
<!-- JAVASCRIPT FRAME-BREAKER CODE TO PROVIDE PROTECTION AGAINST IFRAME CLICK-JACKING -->
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
var sessions = [];
PaymentSession.configure({
fields: {
// ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
card: {
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year",
nameOnCard: "#cardholder-name"
}
},
//SPECIFY YOUR MITIGATION OPTION HERE
frameEmbeddingMitigation: ["javascript"],
callbacks: {
initialized: function(response) {
// HANDLE INITIALIZATION RESPONSE
},
formSessionUpdate: function(response) {
// HANDLE RESPONSE FOR UPDATE SESSION AS PER USUAL MANNER.
if (response.status) {
if ("ok" == response.status) {
// RECORD THE SESSIONID RETURNED AND ASSOCIATE IT WITH THE SCOPE CONFIGURED.
sessions.push(JSON.parse('{ "scopeId": "' + response.scopeId + '", "sessionId": "' + response.session.id + '"}'));
}
} else {
console.log("Session update failed: " + response);
}
}
},
interaction: {
displayControl: {
formatCard: "EMBOSSED",
invalidFieldCharacters: "REJECT"
}
}
}, 'card-payment-details-#1'); // ADD ANY UNIQUE STRING IDENTIFIER VALUE TO THE CONFIGURE CALL
function pay() {
sessions.forEach(function (e) {
// UPDATE THE SESSION WITH THE FIELD VALUES. THE SCOPE MUST BE THE THIRD PARAMETER.
PaymentSession.updateSessionFromForm('card', undefined, e.scopeId);
});
}
</script>
</body>
</html>