# 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.
Then add the payment form to your page using a div.
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.
# 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.