Skip to main content

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=""></script>

2. Add Card Form HTML#

Add card form in your Html For example:

<div class="card-body">
<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 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 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 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 class="form-group text-center" style="margin-top: 40px;">
<span style="position: relative; top:25px; cursor: pointer;" onclick="handleCardPay()" class="card-pay" > Submit </span>

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,
"card_type": cardType,
"service_code": cvv
let jwt_token = getJWTToken();
let portone = new window.PortOne({
portOneKey: portOneKey
portone.paymentService.postCreditCards(jwtToken, environment, card_details ,function(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": "",
"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": "",
"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": "",
"failure_url": "",
"pending_url": "",
"pmt_channel": "OMISE",
"pmt_method": "OMISE_CREDIT_CARD",
"expiry_year" :,
"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 (["is_success"]== true){
if (["additional_data"] === "") {
window.parent.location.href = data["success_url"];
window.parent.location.href =;
}, 1000);