接受多个卡
Hosted Session 允许您支持付款人想要在一次预订中使用多张卡的情况。 在这种情况下，您必须为每张卡创建单独的付款会话和单独的订单。
您必须在服务器上存储为每张卡创建的唯一会话 ID，然后将从单独的付款会话生成的所有不同订单组合成一个预订。 付款人可以选择在付款页交互期间移除一张卡，此操作将从您的服务器中删除与该卡相关的会话数据。
只有 API v51 及以上版本才支持使用多张卡进行 Hosted Session 付款。
实现多个 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 参数在以下调用中是可选的。 如果未在这些调用中指定范围，此函数或回调适用于托管内嵌框架内的所有卡数据集。
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://network.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>