Web SDK Integration for Card Tokenisation Flow
Create encrypted card data#
The requirement is to safely receive card data from the web/mobile app to the backend and tokenize the card using Channex.
1. Add Axios Dependency#
Add axios dependency in your page if you haven’t.
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
2. Add Card Form HTML#
Add card form in your Html For example:
<div class="card-body">
<form>
<div class="form-row">
<div class="col addIcon creditCardIcon">
<label for="CardNumber" id="creditcardnmlang">Credit Card Number</label>
<input type="text" class="form-control" id="CardNumber" placeholder="1234 1234 1234 1234" name="CardNumber" required>
<span id="showCardBasedNum"></span>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="CardHolderName" id="cardholdernmlang">Card Holder Name</label>
<input type="text" class="form-control" id="CardHolderName" placeholder="" name="CardHolderName" required>
</div>
</div>
<div class="form-row">
<div class="col-sm-8" style="padding-left: 0px !important;">
<label for="validthru" id="expdatelang">Exp Date</label>
<input type="text" class="form-control" id="validthru" placeholder="MM/YYYY" name="validthru" required>
</div>
<div class="col-sm-4 addIcon cvvIcon" style="padding-right: 0px !important;">
<label for="creditCvv" id="cvvlang">CVV</label>
<input type="password" class="form-control" minlength='3' maxlength='3' id="creditCvv" placeholder="..." name="creditCvv" required>
</div>
</div>
<div class="form-group text-center" style="margin-top: 40px;">
<span style="position: relative; top:25px; cursor: pointer;" onclick="handleCardPay()" class="card-pay" > Submit </span>
</div>
</form>
</div>
3. Submit Form#
On submit the form handleCardPay() function will call and To access Add Encrypted Credit Cards Data API you can add the function to your handleCardPay:
function handleCardPay(){
var cardNumber = document.getElementById("CardNumber").value;
var cardType = 'visa';
// var tokenData1 = "CARD"+new Date().getTime();
var cardHolderName = document.getElementById("CardHolderName").value;
var cvv = document.getElementById("creditCvv").value;
var expiry = document.getElementById("validthru").value;
encryptedCreditCards(cardNumber, cardType, cardHolderName, cvv, expiry);
}
function encryptedCreditCards(cardNumber, cardType, cardHolderName, cvv, expiry){
let environment = 'sandbox';
let jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJTZ2xmZnl5WmdvakVkWFdMIiwiaXNzIjoiQ0hBSVBBWSIsImlhdCI6MTY5NTE0NTQ1MiwiZXhwIjoxNzk1MTU1NDUyfQ.G1-XudagfPVvGZYTEISNYrLJjGmZVZMtIUCq5uD0B3g'
let card_details = {
"cardholder_name": cardHolderName,
"expiration_month":expiry.slice(0,2),
"expiration_year":expiry.slice(3,expiry.length),
"card_type": cardType,
"card_number":cardNumber,
"service_code": cvv
}
let jwt_token = getJWTToken();
let portone = new window.PortOne({
portOneKey: portOneKey
})
portone.paymentService.postCreditCards(jwtToken, environment, card_details ,function(error) {
console.log("error",error);
}, function(response) {
var inputName = "Name"
var number = "phone_number"
var address = "address"
var city = "city"
if (!inputName) {
inputName = "Mark Twain"
}
if (!number) {
number = "9234569875"
}
if (!address) {
address = "Test Address"
}
if (!city) {
city = "Bangalore"
}
var data = {
"key": "SglffyyZgojEdXWL",
"response_type": "additional_data_only",
"merchant_details": {
"name": "merchant_name",
"logo": "merchant_logo",
"back_url": website_domain + "/checkout.html",
"promo_code": "promo_code",
"promo_discount": "promo_discount",
"shipping_charges": 0.0,
},
"merchant_order_id": "MERCHANT" + new Date().getTime(),
"amount": 40000,
"Key": "SglffyyZgojEdXWL",
"currency": "THB",
"billing_details": {
"billing_name": inputName,
"billing_email": "markweins@gmail.com",
"billing_phone": number,
"billing_address": {
"city": city,
"country_code": 'TH',
"locale": "en",
"line_1": address,
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"shipping_details": {
"shipping_name": inputName,
"shipping_email": "markweins@gmail.com",
"shipping_phone": number,
"shipping_address": {
"city": city,
"country_code": 'TH',
"locale": "en",
"line_1": address,
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"country_code": "TH",
"source": "checkout",
"success_url": "https://dev-checkout.portone.cloud/success.html",
"failure_url": "https://dev-checkout.portone.cloud/failure.html",
"pending_url": "https://dev-checkout.portone.cloud/pending.html",
"payment_link":"2VdFYgvn9V7pOyrFHYWlEEAW3c6",
"environment":'sandbox',
"pmt_channel": "OMISE",
"pmt_method": "OMISE_CREDIT_CARD",
"token_params":{
"expiry_month": response.data.content.expiration_month,
"expiry_year" : response.data.content.expiration_year,
"partial_card_number": response.data.content.card_number,
"token": response.data.content.card_token,
"type": response.data.content.card_type,
"save_card": false,
}
}
let hash = getSignatureHash(portOneKey, data["merchant_order_id"], data["amount"], data["currency"], data["success_url"], data["failure_url"])
data["signature_hash"] = hash
portone.paymentService.payment(data, function(error) {
}, function(response) {
if (response.data["is_success"]== true){
setTimeout(function(){
if (response.data["additional_data"] === "") {
window.parent.location.href = data["success_url"];
}else{
window.parent.location.href = response.data.additional_data.url;
}
}, 1000);
}
})
});
}