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:
<script src="https://cdn.payermax.com/dropin/js/pmdropin.min.js"></script>
3. iframe Embedment
You can insert a div tag in anywhere in HTML, we will embed card payment form in div tag using iframe.
<div class="card-frame">
<!-- form will be added here -->
</div>
4. SDK Initialization
In your JavaScript file, initialize the SDK card component, and mount it.
var card = PMdropin.create('card', {
clientKey: '',
sessionKey: ''
});
card.mount('.card-frame');
5. Complete Recommended Example
<!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">
// 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);
</script>
</body>
</html>