Skip to content

简介

本页介绍了启动和运行 Dropin 所需的条件。

1. 准备工作

请确保您已经通过服务端对接,获取到sessionKeyclientKey

2. 集成CDN

在HTML页面引用CDN:

<script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"></script>

3. 嵌入iframe

您可以在HTML任意位置,插入一个div标签,我们将在该div内通过iframe形式内嵌卡支付表格。

<div class="card-frame">
    <!-- form will be added here -->
</div>

4. 初始化SDK

在您的JavaScript文件中,初始化SDK卡组件,并挂载它。

var card = PMdropin.create('card', {
  clientKey: '',
  sessionKey: ''
});
card.mount('.card-frame');

5. 完整推荐示例



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PayerMax Dropin</title>
  <script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"></script>
</head>
<body>

<div class="card-frame">
  <!-- form will be added here -->
</div>

<button id="pay">Pay</button>

<script type="text/javascript">
  // 实例化一个卡组件
  var card = PMdropin.create('card', {
    // 填入你在服务端获取到的 clientKey
    clientKey: '',
    // 填入你在服务端获取到的 sessionKey
    sessionKey: '',
    // 开启沙盒模式联调
    sandbox: true
  });

  // 将组件挂载到 dom 节点
  card.mount('.card-frame');

  function goPay() {
    // 将组件设置为不可编辑状态
    card.emit('setDisabled', true);
    // 发起组件校验,并返回卡标识
    card.emit('canMakePayment')
      .then(function(response) {
        // 解除不可编辑状态
        card.emit('setDisabled', false);

        // 成功获取到 response
        if (response.code === 'APPLY_SUCCESS') {
          // 获取卡标识 paymentToken 
          var paymentToken = response.data.paymentToken;
          // 进行后续支付操作
          ...
        }
      })
      .catch(function(error) {
        // 解除不可编辑状态
        card.emit('setDisabled', false);
      })
  }

  document.getElementById('pay').addEventListener('click', goPay, false);
</script>
</body>
</html>

此页面的内容有帮助吗?

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

Last updated:

Released under the MIT License.