常见问题
1. Apple Pay
1.1 点击支付按钮，调用 applePay.emit('canMakePayment') 方法后，ApplePay 弹窗出现后自动消失可能是什么原因？
可能当前支付环境不安全或无法通过 Apple 校验，需要在一个配置过 ApplePay 证书的 https 域名上进行测试。
1.2 如何自定义 ApplePay 按钮的父容器边距大小？
可以在挂载ApplePay的DOM上添加内联样式，更改--padding-frame变量。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PayerMax Dropin</title>
<script src="https://cdn.payermax,com/dropin/js/pmdropin.min.js"></script>
</head>
<body>
<div id="applepay" style="--padding-frame: 0;"></div>
</body>
</html>2. Card
2.1 调用 orderAndPay 接口，需要处理 status=PENDING 的情况吗？
需要。对于卡支付可能会出现 3ds 场景，这种情况下 status=PENDING，需要商户打开响应中的 redirectUrl 重定向至挑战页面。
2.2 如何调整卡输入框字体样式？
可以在 customTheme 的 style 中添加特殊样式。
js
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// 主题名称【必填】
name: 'red',
// 用于填充底色的样式【可选】
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
input {
font-family: Times New Roman !important;
}`
}
]
});2.3 使用浏览器默认填充信息功能时，输入框的字体背景色样式会自动改变，可以调整吗？
可以在 customTheme 的 style 中添加 css。
js
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// 主题名称【必填】
name: 'red',
// 用于填充底色的样式【可选】
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bg-color-input) inset !important;
-webkit-text-fill-color: var(--color-input) !important;
}`
}
]
});2.4 如何监听内部 iframe 的动态高度 从而动态改变按钮的位置？
监听 size-change 事件，在回调中可以获取 iframe 的宽高。
js
card.on('size-change', (res) => console.log('[merchant][size-change]:', res))
// Expected output: { width: xxx, height: xxx }2.5 从右向左布局时，为何卡号和过期日期的输入框布局依然是左到右，可以调整吗？
浏览器会默认把 type=tel 的输入框设置为从左到右的排布样式，这是浏览器的默认行为。可以在 customTheme 的 style 中添加特殊样式。
js
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// 主题名称【必填】
name: 'red',
// 用于填充底色的样式【可选】
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
[dir="rtl"] input[type="tel"]{
direction: rtl !important;
}`
}
]
});