Skip to content

常见问题

1. Apple Pay


1.1 点击支付按钮,调用 applePay.emit('canMakePayment') 方法后,ApplePay 弹窗出现后自动消失可能是什么原因?

可能当前支付环境不安全或无法通过 Apple 校验,需要在一个配置过 ApplePay 证书的 https 域名上进行测试。

1.2 如何配置 ApplePay 证书?

(1) 商户提供其测试环境和产线环境域名给 PayerMax;

(2) PayerMax 将为商户生成各域名对应证书;

(3)商户将证书文件 apple-developer-merchantid-domain-association.txt 添加到 ./well-known 路径下;

注意:

请注意证书配置路径。

(4) 商户配置好了证书后,通知 PayerMax 验证域名证书,PayerMax将在Apple开发者后台操作域名证书验证。

如果验证失败:

  1. 可能证书路径配置错误【请再次检查路径是否正确】
  2. 可能域名防火墙拦截了苹果检查服务【请配置链接页面域名至服务器白名单,可参考下方截图】
  3. 可能已经配置过其他MerchantID的证书【可使用新域名,或在原开发者账号上删除对应域名证书】

1.3 如何自定义 ApplePay 按钮的父容器边距大小?

可以在挂载ApplePay的DOM上添加内联样式,更改--padding-frame变量。


<!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>
  <divid="applepay"style="applepay""--padding-frame: 0;"></div>
</body>
</html>

2. Card


2.1 调用 orderAndPay 接口,需要处理 status=PENDING 的情况吗?

需要。对于卡支付可能会出现 3ds 场景,这种情况下 status=PENDING,需要商户打开响应中的 redirectUrl 重定向至挑战页面。

2.2 如何调整卡输入框字体样式?

可以在 customTheme 的 style 中添加特殊样式。


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。


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 的宽高。


card.on('size-change', (res) => console.log('[merchant][size-change]:',
res))
      // Expected output: { width: xxx, height: xxx }

2.5 从右向左布局时,为何卡号和过期日期的输入框布局依然是左到右,可以调整吗?


浏览器会默认把 type=tel 的输入框设置为从左到右的排布样式,这是浏览器的默认行为。可以在 customTheme 的 style 中添加特殊样式。


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;
        }`
    }
  ]
});

Released under the MIT License.