自定义托管字段
如果您使用 Hosted Session 集成方法，您可以通过多种方式自定义付款页上的托管付款字段。 自定义可以帮助您与付款页的外观和感觉保持一致，改进站点的可访问性。
设置托管字段的样式
您可以设置托管付款字段的样式，使其与整个付款页的外观和感觉相匹配。
setFocus( ): 在指定的托管字段中设置焦点。setFocusStyle( ): 当指定托管字段获得焦点时，设置其样式属性。setHoverStyle( ): 当鼠标悬停在指定托管字段上时设置其样式属性。setPlaceholderStyle( ): 在付款人将指定托管字段上的占位符文本替换为自己的输入之前，设置其样式属性。setPlaceholderShownStyle( ): 设置占位符文本可见时指定托管字段的样式属性。
付款字段样式示例
PaymentSession.setFocus('card.number');
PaymentSession.setFocusStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setHoverStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setPlaceholderStyle(["card.number", "card.nameOnCard"], {
color: 'blue',
fontWeight: 'bold',
textDecoration: 'underline'
});
PaymentSession.setPlaceholderShownStyle(["card.number", "card.nameOnCard"], {
color: 'green',
fontWeight: 'bold',
textDecoration: 'underline'
});
使用下拉字段
如果您支持信用卡付款，可以使用下拉值作为定义卡过期月份和年份的托管字段。
以下示例代码显示如何在付款页的托管的字段中定义用于信用卡付款的下拉字段。
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://na.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>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>
<div>Expiry Month:
<select id="expiry-month" class="form-control input-md" required="" readonly>
<option value="">Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div>Expiry Year:
<select id="expiry-year" class="form-control input-md" required="" readonly>
<option value="">Select Year</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
</select>
</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="4" readonly></div>
<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="3" readonly></div>
<div><button id="payButton" onclick="pay();">Pay Now</button></div>
</script>
</body>
</html>
配置可访问性
Hosted Session 提供改进网站可访问性的功能。 有关网站可访问性的更多信息，请参阅 。
设置付款页语言
要设置整个付款页的语言，将 lang 属性添加到 <html> 元素中。 定义页面语言有助于辅助技术更准确地呈现文本。
<html lang="en">
<head></head>
<body></body>
</html>
设置托管字段区域设置
要定义托管字段的区域设置（语言和地区），请将 locale 参数添加到用于配置会话的 PaymentSession.configure() 函数中。
当您定义托管字段区域设置时，Session JavaScript 库会为与托管字段相关的所有文本元素提供适用的翻译，包括隐藏标签和错误消息。 如果未设置区域设置，默认为英语 (en_US)。
支持的区域设置值为 de_DE、el_GR、en_US、es_MX、es_ES、fr_CA、fr_FR、it_IT、ja_JA、pl_PL、pt_BR、ro_RO 和 zh_CN。
lang 属性）与托管字段的区域设置一致。
PaymentSession.configure({
fields: {
card: {
nameOnCard: cardHolderNameField ? "#card-holder-name" : null,
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
}
},
frameEmbeddingMitigation: ["javascript"],
locale:"fr",
callbacks: {
}
});
改善托管字段的用户体验
以下选项让您可以更好地控制具有可访问性需求的付款人的用户体验：
- 设置内嵌框架标题
可以使用字段上的标题属性来控制托管字段的内嵌框架标题属性。 标题表示字段的辅助信息，如工具提示。
- 设置 ARIA（可访问性富互联网应用程序）属性
Hosted Session 支持不同的 aria-* 属性，您可以使用这些属性来允许辅助技术为付款人提供帮助。 例如，aria-label 属性提供了一个辅助技术可以读取的标签，以识别付款人的托管字段。
- 设置无效字符的显示参数
考虑接受托管字段中的所有字符，以便在使用辅助技术时获得更好的用户体验。 要实现此目的，在
PaymentSession.configure()函数的配置对象参数中设置interaction.displayControl.invalidFieldCharacters=ALLOW。 - 设置隐藏标签和错误消息
所有托管字段均包含隐藏标签，所有强制托管字段均包含隐藏错误消息。 调用
PaymentSession.updateSessionFromForm()函数导致的任何错误都会触发错误消息标签。 您还可以使用PaymentSession.setMessage()函数触发您自己的错误。例如，卡号字段的隐藏标签为卡号。 缺少卡号的隐藏错误消息为缺少卡号，请输入值。 无效卡号的隐藏错误信息为卡号无效，请输入正确的值。 在托管字段之间切换时，屏幕阅读器仅读取隐藏的标签和隐藏的错误消息，而不是页面上显示的实际标签或错误消息。
<!-- 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="card security code" value="" tabindex="5" readonly></div> <div><button id="payButton" onclick="pay();">Pay Now</button></div>
处理字段焦点
默认的 HTML5 自动聚焦行为不适用于托管字段： 当付款人点击标签时，焦点不会自动移动到相应的输入元素。
要确保您的页面能够正确聚焦，使用 Session JavaScript 库的 setFocus() 函数。