Se acceptă mai multe carduri
Hosted Session vă permite să acceptați scenarii în care plătitorul dorește să folosească mai multe carduri pentru o singură rezervare cu card. În acest caz, trebuie să creați o sesiune de plată separată și o comandă separată pentru fiecare card.
Trebuie să stocați ID-ul unic de sesiune creat pentru fiecare card pe serverul dvs. și apoi să adunați toate comenzile diferite generate din sesiunile de plată separate într-o singură rezervare. Plătitorul poate alege să elimine un card în timpul interacțiunii cu pagina de plată, iar această acțiune elimină de pe server datele sesiunii asociate cardului.
Implementarea mai multor Hosted Session
Pentru a accepta mai multe carduri, trebuie să invocați funcția PaymentSession.configure() cu argumentul scope pentru fiecare card pe care plătitorul dorește să îl folosească. Valoarea acestui argument poate fi orice șir unic, folosit pentru a identifica un bloc de date de plată cu cardul și nu trebuie să facă referire la niciun element HTML specific din pagină. Datele stocate de dvs. pe serverul dvs. pentru fiecare card trebuie păstrate într-un domeniu separat.
PaymentSession.configure('configuration', scope)
După ce un PaymentSession.configure() apel inițial este invocat cu scope, argumentul scope devine obligatoriu pentru următoarele Hosted Session apeluri de funcție, așa cum se arată în exemple de mai jos:
PaymentSession.updateSessionFromForm('card', 'card-type', scope)PaymentSession.setFocus('cardNumber', scope)
Argumentul scope este opțional în următoarele apeluri dacă o interacțiune este configurată cu un domeniu. Dacă apelurile nu specifică un domeniu, funcția sau callback-ul se va aplica tuturor seturilor de date de carduri din cadrul iFrame găzduit.
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)
Exemplu cu mai multe Hosted Session
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://egenius.unicredit.ro/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>