接受多个卡
<<hostedSession>> 允许您支持付款人想要在一次预订中使用多张卡的情况。 在这种情况下，您必须为每张卡创建单独的付款会话和单独的订单。
您必须在服务器上存储为每张卡创建的唯一会话 ID，然后将从单独的付款会话生成的所有不同订单组合成一个预订。 付款人可以选择在付款页交互期间移除一张卡，此操作将从您的服务器中删除与该卡相关的会话数据。
只有 API v51 及以上版本才支持使用多张卡进行 <<hostedSession>> 付款。
实现多个 <<hostedSession>>
要接受多张卡，您必须对付款人想要使用的每张卡调用 PaymentSession.configure() 函数，其中包含 scope 参数。 该参数的值可以是任何唯一的字符串，用于标识一块卡支付数据，而不需要引用页面上的任何特定 HTML 元素。 您在服务器上存储的每张卡的数据都需要在单独的范围内保留。
PaymentSession.configure('configuration', scope)
在调用初始 PaymentSession.configure() 调用并包含 scope 后，scope 参数在以下 <<hostedSession>> 函数调用中将成为必需项，如以下示例所示：
PaymentSession.updateSessionFromForm('card', 'card-type', scope)PaymentSession.setFocus('cardNumber', scope)
如果交互配置了范围，则 scope 参数在以下调用中是可选的。 如果未在这些调用中指定范围，此函数或回调适用于托管内嵌框架内的所有卡数据集。
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)
多 <<hostedSession>> 示例
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://test-bankalfalah.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>