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

### 1. 准备工作

请确保您已经通过服务端对接，获取到sessionKey和clientKey。

 
### 2. 集成CDN

在HTML页面引用CDN：

<pre class="hljs">`&lt;script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"&gt;&lt;/script&gt;
`</pre>

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

<pre class="hljs">`&lt;div class="card-frame"&gt;
    &lt;!-- form will be added here --&gt;
&lt;/div&gt;
`</pre>

### 4. 初始化SDK
在您的JavaScript文件中，初始化SDK卡组件，并挂载它。

<pre class="hljs">`var card = PMdropin.create('card', {
  clientKey: '',
  sessionKey: ''
});
card.mount('.card-frame');
`</pre>

### 5. 完整推荐示例

<pre class="hljs">
`
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;PayerMax Dropin&lt;/title&gt;
  &lt;script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card-frame"&gt;
  &lt;!-- form will be added here --&gt;
&lt;/div&gt;

&lt;button id="pay"&gt;Pay&lt;/button&gt;

&lt;script type="text/javascript"&gt;
  // 实例化一个卡组件
  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);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
`
</pre>