接受多个卡

Hosted Session 允许您支持付款人想要在一次预订中使用多张卡的情况。 在这种情况下，您必须为每张卡创建单独的付款会话和单独的订单。

您必须在服务器上存储为每张卡创建的唯一会话 ID，然后将从单独的付款会话生成的所有不同订单组合成一个预订。 付款人可以选择在付款页交互期间移除一张卡，此操作将从您的服务器中删除与该卡相关的会话数据。

只有 API v51 及以上版本才支持使用多张卡进行 Hosted Session 付款。

实现多个 Hosted Session Copied to Clipboard

要接受多张卡，您必须对付款人想要使用的每张卡调用 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://in.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>