简介
本页介绍了启动和运行 Dropin 所需的条件。
1. 准备工作
请确保您已经通过服务端对接，获取到sessionKey和clientKey。
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>