<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SDK Playground</title>
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style>
.wrapper {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
.wrapper .container {
max-width: 80rem
}
.wrapper>.container {
padding-bottom: 7.5rem;
padding-top: 7.5rem
}
#response {
background: black;
color: greenyellow;
height: 250px;
}
.w-100 {
width: 100%;
}
</style>
</head>
<body>
<main class="wrapper">
<div class="container">
<blockquote>
<h4><em>Transaction Service.</em></h4>
</blockquote>
<div class="row">
<div class="column">
<fieldset>
<legend>ORDER ID</legend>
<input type="text" name="order_id" placeholder="ORDER-TEST" value="ORDER-FA168BDFFCB2">
</fieldset>
</div>
<div class="column">
<fieldset>
<legend>Platform User</legend>
<input type="text" name="user" placeholder="hash" value="">
</fieldset>
</div>
</div>
<div class="row">
<div class="column">
<button name="loading" class="w-100">Without Loading</button>
</div>
<div class="column">
<button name="status" class="w-100">Payment Status</button>
</div>
<div class="column">
<button name="capture" class="w-100">Run Capture</button>
</div>
<div class="column">
<button name="void" class="w-100">Run Void</button>
</div>
</div>
<fieldset>
<legend>Select card</legend>
<select name="cards" id="cards">
<option value="4111111111111111">(2.0) Generic transaction</option>
<option value="4000000000001000">(2.1) Successful Authentication</option>
<option value="4000000000001018">(2.2) Failed Authentication</option>
<option value="4000000000001026">(2.3) Attempts Stand-In Authentication</option>
<option value="4000000000001034">(2.4) Unavailable Authentication from the Issuer</option>
<option value="4000000000001042">(2.5) Rejected Authentication by the Issuer</option>
<option value="4000000000001059">(2.6) Authentication Not Available on Lookup</option>
<option value="4000000000001067">(2.7) Error on Lookup</option>
<option value="4000000000001075">(2.8) Timeout on cmpi_lookup Transaction</option>
<option value="4000000000001091">(2.9) Successful Step Up Authentication</option>
<option value="4000000000001109">(2.10) Failed Step Up Authentication</option>
<option value="4000000000001117">(2.11) Step Up Authentication is Unavailable</option>
<option value="4000000000001125">(2.12) Error on Authentication</option>
<option value="4000000000001083">(2.13) Bypassed Authentication</option>
<option value="4000010000000001">(2.14) Require MethodURL</option>
</select>
</fieldset>
<div class="row">
<div class="column">
<fieldset>
<legend>Currency</legend>
<select name="currency" id="currency">
<option selected value="HNL">L</option>
<option value="USD">$</option>
<option value="NIO">C$</option>
<option value="GTQ">Q.</option>
<option value="CRC">₡</option>
</select>
</fieldset>
</div>
<div class="column">
<fieldset>
<legend>Amount</legend>
<input type="number" name="amount" value="1.00">
</fieldset>
</div>
</div>
<div class="row">
<div class="column">
<fieldset>
<legend>Card Number</legend>
<input type="text" name="card_number" value="4111 1111 1111 1111">
</fieldset>
</div>
<div class="column">
<fieldset>
<legend>Card Holder</legend>
<input type="text" name="card_holder" value="Test Card">
</fieldset>
</div>
</div>
<div class="row">
<div class="column">
<fieldset>
<legend>Expire Month</legend>
<input type="number" name="expire_month" value="12">
</fieldset>
</div>
<div class="column">
<fieldset>
<legend>Expire Year</legend>
<input type="number" name="expire_year" value="2028">
</fieldset>
</div>
<div class="column">
<fieldset>
<legend>CVC</legend>
<input type="number" name="card_cvv" value="999">
</fieldset>
</div>
</div>
<fieldset>
<legend>
<input type="checkbox" name="3ds"> Enable 3DS/EMV transaction
</legend>
</fieldset>
<div class="row">
<div class="column">
<button name="sale" class="w-100">Run Sale</button>
</div>
<div class="column">
<button name="auth" class="w-100">Run Auth</button>
</div>
</div>
<blockquote>
<h4><em>Tokenization Service.</em></h4>
</blockquote>
<fieldset>
<legend>Token</legend>
<input type="text" name="token" placeholder="T-xxxxxxxx-xxxxxx-xxxxxx-xxxxxxx">
</fieldset>
<div class="row">
<div class="column"><button name="vault" class="w-100">Run Vault</button></div>
<div class="column"><button name="authenticate" class="w-100">Run Auth</button></div>
<div class="column"><button name="show" class="w-100">Run Show</button></div>
<div class="column"><button name="update" class="w-100">Run Update</button></div>
<div class="column"><button name="delete" class="w-100">Run Delete</button></div>
</div>
<fieldset>
<legend>Response</legend>
<textarea name="response" id="response" readonly></textarea>
</fieldset>
</div>
</main>
<!-- <script src="https://cdn.jsdelivr.net/npm/@pixelpay/sdk-core"></script> -->
<script src="./lib/browser/index.js"></script>
<script>
function prepareEndpoint(settings) {
settings.setupSandbox();
}
function getCard() {
const card = new Models.Card();
card.number = document.querySelector('input[name=card_number]').value;
card.cardholder = document.querySelector('input[name=card_holder]').value;
card.expire_month = document.querySelector('input[name=expire_month]').value;;
card.expire_year = document.querySelector('input[name=expire_year]').value;;
card.cvv2 = document.querySelector('input[name=card_cvv]').value;;
return card;
}
function getBilling() {
const billing = new Models.Billing();
billing.address = 'Ave Circunvalacion';
billing.country = 'HN';
billing.state = 'HN-CR';
billing.city = 'San Pedro Sula';
billing.phone = '50499999999';
return billing;
}
function getOrder() {
const order = new Models.Order();
order.id = document.querySelector('input[name="order_id"]').value || 'TEST-1234';
order.currency = document.querySelector('select[name="currency"]').value;
order.amount = parseFloat(document.querySelector('input[name=amount]').value);
order.customer_name = 'Jhon Doe';
order.customer_email = 'jhondoe@pixel.hn';
return order;
}
function showResponse(response) {
var json = JSON.parse(response);
json = JSON.stringify(json, undefined, 4);
document.querySelector('textarea[name="response"]').value = json;
}
document.getElementById('cards').onchange = () => {
const card_selected = document.querySelector('select[name="cards"]').value;
document.querySelector('input[name=card_number]').value = card_selected;
}
document.querySelector('button[name=loading]').onclick = (event) => {
const button = event.target;
const main = document.querySelector('main');
if (main.hasAttribute('without-sdk-loading')) {
main.removeAttribute('without-sdk-loading');
button.innerText = 'Without Loading';
} else {
main.setAttribute('without-sdk-loading', '');
button.innerText = 'With Loading';
}
}
document.querySelector('button[name=sale]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Transaction(settings);
const card = getCard();
const billing = getBilling();
const order = getOrder();
const sale = new Requests.SaleTransaction();
sale.setCard(card);
sale.setBilling(billing);
sale.setOrder(order);
if (document.querySelector('input[name="3ds"]') && document.querySelector('input[name="3ds"]').checked) {
sale.withAuthenticationRequest();
}
service.doSale(sale).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=auth]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Transaction(settings);
const card = getCard();
const billing = getBilling();
const order = getOrder();
const auth = new Requests.AuthTransaction();
auth.setCard(card);
auth.setBilling(billing);
auth.setOrder(order);
if (document.querySelector('input[name="3ds"]') && document.querySelector('input[name="3ds"]').checked) {
auth.withAuthenticationRequest();
}
service.doAuth(auth).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=capture]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Transaction(settings);
const capture = new Requests.CaptureTransaction();
capture.payment_uuid = document.querySelector('input[name="order_id"]').value
capture.transaction_approved_amount = 1.00;
service.doCapture(capture).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=void]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
user = document.querySelector('input[name="user"]').value
if (user) {
settings.setupPlatformUser(user);
}
const service = new Services.Transaction(settings);
const voidTx = new Requests.VoidTransaction();
voidTx.payment_uuid = document.querySelector('input[name="order_id"]').value
voidTx.void_reason = 'Transaction Test';
service.doVoid(voidTx).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=status]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Transaction(settings);
const statusTx = new Requests.StatusTransaction();
statusTx.payment_uuid = document.querySelector('input[name="order_id"]').value
service.getStatus(statusTx).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('body').onclick = (e) => {
if (e.target == document.querySelector('.pixelpay-loading')) {
UI.PixelPayLoading.hide();
}
}
document.querySelector('button[name=vault]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Tokenization(settings);
const cardRequest = new Requests.CardTokenization();
cardRequest.setCard(getCard());
cardRequest.setBilling(getBilling());
service.vaultCard(cardRequest).then(response => {
token = document.querySelector('input[name="token"]').value = response.getData("token");
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=authenticate]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Tokenization(settings);
const authRequest = new Requests.AuthTokenization();
const input_token = document.querySelector('input[name="token"]').value;
authRequest.setCardToken(input_token);
authRequest.setOrder(getOrder());
service.authCard(authRequest).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
document.querySelector('button[name=show]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Tokenization(settings);
token = document.querySelector('input[name="token"]').value;
if (token.includes(',')) {
const tokens = token.split(',');
service.showCards(tokens).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
} else {
service.showCard(token).then(response => {
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
}
document.querySelector('button[name=update]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Tokenization(settings);
const cardRequest = new Requests.CardTokenization();
cardRequest.setCard(getCard());
cardRequest.setBilling(getBilling());
const input_uuid = document.querySelector('input[name="token"]');
service.updateCard(input_uuid.value, cardRequest).then(response => {
token = input_uuid.value = response.getData("token");
showResponse(response.toJson())
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
})
}
document.querySelector('button[name=delete]').onclick = () => {
const settings = new Models.Settings();
prepareEndpoint(settings);
const service = new Services.Tokenization(settings);
token = document.querySelector('input[name="token"]').value;
service.deleteCard(token).then(response => {
showResponse(response.toJson());
alert(`${response.message} (${response.status})`);
}).catch(err => {
console.error(err);
alert(`${err.message} (ERR)`);
});
}
</script>
</body>
</html>