Skip to content

常见问题

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

此页面的内容有帮助吗?

感谢您帮助改进 PayerMax 产品文档!

Last updated:

Released under the MIT License.