# Overview
This page describes the requirements for starting and running Dropin.

### 1. Preparation

Please make sure that you have completed the integration with the server-side, with getting sessionKey and clientKey.

 
### 2. CDN Integration

How to reference a CDN in an HTML page:

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

### 3. iframe Embedment
You can insert a div tag in anywhere in HTML, we will embed card payment form in div tag using iframe.

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

### 4. SDK Initialization
In your JavaScript file, initialize the SDK card component, and mount it.

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

### 5. Complete Recommended Example

<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;
  // Instantiate a card component
  var card = PMdropin.create('card', {
    // Fill in the clientKey obtained from the server
    clientKey: '',
    // Fill in the sessionKey obtained from the server
    sessionKey: '',
    // Enable joint debugging in sandbox mode
    sandbox: true
  });

  // Mount the component to the dom node
  card.mount('.card-frame');

  function goPay() {
    // Set component to non-editable state
    card.emit('setDisabled', true);
    // Initiate component verification and return card identification
    card.emit('canMakePayment')
      .then(function(response) {
        // Remove uneditable status
        card.emit('setDisabled', false);

        // get response successfully
        if (response.code === 'APPLY_SUCCESS') {
          // get paymentToken 
          var paymentToken = response.data.paymentToken;
          // Go for subsequent payment operations
          ...
        }
      })
      .catch(function(error) {
        // Remove uneditable status
        card.emit('setDisabled', false);
      })
  }

  document.getElementById('pay').addEventListener('click', goPay, false);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
`
</pre>