# Client SDK
Client SDK is quick and easy to integrate, accepts online payments from all major credit cards, and is customizable to your brand.
The Client SDK will embed a frames payment form to your website and allow your customers to enter their card details directly on your checkout page. From these Frames, your customers' sensitive information is processed by us and exchanged for a payment nonce. This process is called tokenization. After you have a credit card nonce, you're able to create a payment, add a customer, or save the card for later.
# Try it out!
To conduct a test, use our provided test card. For example 4111 1111 1111 1111, input any future date for the expiry in the mm/yy format, and set the CVV as 123.
# Payment methods
Sure, Frames looks great! But, it also has lots of payment options:
- VISA
- MasterCard
- American Express
- JCB
- Diners Club
- Discover
# The three-step process
It doesn't take long to get started with the client SDK. To accept online payments with the OMPay SDK, you'll need an integration that can:
- Create a client token from your server.
- Create a payment nonce.
- Perform the payment request.
# Step 1: Create a client token
A client is used to securely transmit payment data between the shopper and the OMPay PAY payments platform. Create one from your server by making a POST request to the /merchants/<merchantID>/client_token endpoint. Specify your merchant id, the client id and client secret you're using for your integration.
The request is described in the authentication section
WARNING
Execute the request from your server, not your website.
The response will contain a client token. You'll use this to initialize the SDK in the next step.
# Step 2: Create a payment nonce.
Next, add the Client SDK to your website. The SDK will render the necessary inputs, that will securely collect the shopper's payment details, and generate a payment nonce. To do this:
# 1. Integrate SDK
Embed the Client SDK by adding the following code to the <head> of your payment page.
<script src="https://assets.ompay.com/web/1.0.0/js/client.min.js"></script>
<script src="https://assets.ompay.com/web/1.0.0/js/hosted-fields.min.js"></script>
Then add the payment form to your page using a div.
<form id="payment-form" method="post" action="/checkouts">
<div class="form-row form-row-wide">
<div class="ompay-form-control" id="ompay-card-number"></div>
</div>
<div class="form-row form-row-wide">
<div class="ompay-one-half">
<div class="ompay-form-control" id="ompay-expiration-month"></div>
<div class="ompay-form-control" id="ompay-expiration-year"></div>
</div>
<div class="ompay-one-half">
<div class="ompay-form-control" id="ompay-cvv"></div>
</div>
</div>
<div class="button-container">
<input id="nonce" name="payment_method_nonce" type="hidden" />
<input type="submit" value="Pay Now" id="idsubmit" />
</div>
</form>
Below are CSS examples to help you render the Client SDK into your website, offering two styles: the classic card form or the streamlined one-line form.
#ompay-cc-form {
width 100%
height 50px
margin 0
padding 11px 12px
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
}
.ompay-form-control {
height: 40px;
max-height: 40px;
box-sizing: border-box;
padding: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px
}
#ompay-cc-form label {
width: 100%;
}
#ompay-cc-form .form-row-first,
#ompay-cc-form .form-row-last {
width: 48%;
}
#ompay-cc-form .form-row-first {
float: left;
margin-right: 4%;
}
#ompay-cc-form .form-row-last {
float: right;
}
.ompay-one-half {
float: left;
width: 50%;
}
.ompay-card-expiry {
*zoom: 1;
}
.ompay-one-half label {
clear: both;
display: block;
}
#ompay-expiration-month,
#ompay-expiration-year {
display: block;
width: 48% !important;
float: left;
margin-right: 2%;
border-radius: 5px
}
#pay-form {
height: 50px;
}
.button-container {
padding-top: 45px;
}
.payment-form {
margin: auto;
width: 60%;
border: 1px solid #2168ad26;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
border-radius: 3px;
padding-bottom: 10px;
}
.form-row-wide {
padding-bottom: 5px;
}
#idsubmit {
width: 100%;
height: 35px;
border-radius: 5px;
background: #0066A2;
color: white;
border-style: outset;
border: #0066A2;
font: bold15px arial,sans-serif;
text-shadow: none;
}
#idsubmit:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}
# 2. initialize SDK
Initialize the sdk by adding the script below at the end of the body of your page.
This will initialise an instance of the mpgate client, generate a credit card nonce on submit and submit the payment nonce to your server.
<script>
var form = document.querySelector('#payment-form');
var btnsubmit = document.querySelector('input[type="submit"]');
var client_token = `<client_token>`;
mpgate.client.create({
authorization: client_token,
debug: true
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
createHostedFields(clientInstance);
});
var hostedField;
function createHostedFields(clientInstance) {
mpgate.hostedFields.create({
client: clientInstance,
fields: {
number: {
selector: '#ompay-card-number',
placeholder: 'Card Number'
},
expirationMonth: {
selector: '#ompay-expiration-month',
placeholder: 'MM'
},
expirationYear: {
selector: '#ompay-expiration-year',
placeholder: 'YY'
},
cvv: {
selector: '#ompay-cvv',
placeholder: 'CVV'
},
}
}, function (err, hostedFieldsInstance) {
hostedField = hostedFieldsInstance;
btnsubmit.removeAttribute('disabled');
form.addEventListener('submit', formSubmitEvent, false);
});
}
var formSubmitEvent = function (event) {
event.preventDefault();
hostedField.tokenize(function (err, payload) {
if (err) {
console.log('Error', err);
return;
}
// Add the nonce to the form and submit
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
};
</script>
# Step 3: Perform the payment request
The payment nonce is posted to your server where it can be used to perform a payment request using the server SDK.
The funding instrument to be used is the credit card nonce.