Αποδοχή πολλαπλών καρτών
Το Hosted Session σάς επιτρέπει να υποστηρίζετε σενάρια όπου ο πληρωτής σας θέλει να χρησιμοποιήσει περισσότερες από μία κάρτες για μία κράτηση. Σε αυτήν την περίπτωση, πρέπει να δημιουργήσετε μια ξεχωριστή περίοδο πληρωμής και μια ξεχωριστή παραγγελία για κάθε κάρτα.
Πρέπει να αποθηκεύσετε το μοναδικό ID περιόδου λειτουργίας (session) που δημιουργήθηκε για κάθε κάρτα στον διακομιστή σας και, στη συνέχεια, να συγκεντρώσετε όλες τις διαφορετικές παραγγελίες που δημιουργούνται από τα ξεχωριστά session πληρωμής (payment session) σε μία μόνο κράτηση. Ο πληρωτής μπορεί να επιλέξει να καταργήσει μια κάρτα κατά την αλληλεπίδραση με τη σελίδα πληρωμής και αυτή η ενέργεια καταργεί τα δεδομένα περιόδου λειτουργίας (session) που συσχετίζονται με την κάρτα από τον web server σας.
Υλοποίηση πολλαπλών Hosted Session
Για να αποδεχτείτε πολλές κάρτες, πρέπει να ενεργοποιήσετε τη συνάρτηση PaymentSession.configure() με το όρισμα scope για κάθε κάρτα που θέλει να χρησιμοποιήσει ο πληρωτής. Η τιμή αυτού του ορίσματος μπορεί να είναι οποιαδήποτε μοναδική συμβολοσειρά, που χρησιμοποιείται για τον προσδιορισμό ενός μπλοκ δεδομένων πληρωμής με κάρτα και δεν χρειάζεται να αναφέρεται σε κάποιο συγκεκριμένο στοιχείο HTML στη σελίδα. Τα δεδομένα που έχετε αποθηκεύσει στον διακομιστή σας για κάθε κάρτα πρέπει να διατηρούνται σε ξεχωριστό πεδίο.
PaymentSession.configure('configuration', scope)
Μετά την αρχική κλήση PaymentSession.configure() με scope, το όρισμα scope γίνεται υποχρεωτικό στις ακόλουθες κλήσεις συνάρτησης Hosted Session, όπως φαίνεται στο παραδείγματα παρακάτω:
PaymentSession.updateSessionFromForm('card', 'card-type', scope)PaymentSession.setFocus('cardNumber', scope)
Το όρισμα scope είναι προαιρετικό στις ακόλουθες κλήσεις αν μια αλληλεπίδραση έχει διαμορφωθεί με εμβέλεια. Αν δεν καθορίζεται εμβέλεια σε αυτές τις κλήσεις, η συνάρτηση ή η ανάκληση ισχύει για όλα τα σύνολα δεδομένων καρτών εντός του hosted iFrame.
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)
Παράδειγμα πολλαπλών Hosted Session
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://gateway-japa.americanexpress.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>