Sale with Google Pay
Here is an example on how to do a sale using Google Pay.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Digicel Sandbox Demo</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
body {
font-family: "Poppins", sans-serif;
font-weight: 300;
}
.card-header {
padding: .5rem 1rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: none;
}
.btn-light:focus {
color: #212529;
background-color: #e2e6ea;
border-color: #dae0e5;
box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, .5);
}
.input i {
position: absolute;
top: 16px;
left: 11px;
color: #989898;
}
.free-button {
background: #1565c0;
height: 52px;
font-size: 15px;
border-radius: 8px;
}
#response {
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
</style>
</head>
<body>
<div id="containerIframe" class="d-flex justify-content-center align-items-center p-4">
<!-- You can specify the width here -->
<div style="width: 468px;">
<span>Payment Method</span>
<div class="card">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header p-0">
<h2 class="mb-0">
<button style="width: 100%" class="btn btn-light btn-block text-left p-3 rounded-0"
data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="d-flex align-items-center justify-content-between">
<span>Pay With Google Pay</span>
</div>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<form>
<div id="iframeContent"></div>
<p style="text-align:center" id="response"></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
const locationId = location_id;
let accessToken = "";
let sessionID = '';
/*
fetchAccessToken function is for demo purposes only.
Credentials data must not be exposed in the front end.
*/
async function fetchAccessToken() {
const url = 'https://devapi-gtw.tabpoint.us/api/locations/' + locationId + '/access_token';
const params = {
api_key: 'api_key',
client: 'client'
};
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
};
const res = fetch(url, requestOptions)
.then(response => response.json())
.then(data => {
const accessToken = data.accessToken;
return accessToken;
})
.catch(error => console.error('Error:', error));
return res;
}
async function loadAndProcessOrderWithAccessToken() {
accessToken = await fetchAccessToken();
const scriptElement = document.createElement("script");
scriptElement.src = `https://iframe-gtw.tabpoint.us/api/softpoint-pay?location_id=`+locationId+`&session_key=${accessToken}`; // DEV ----> This works Mahipath please check this to test
// scriptElement.src = `http://localhost:3000/api/softpoint-pay?location_id=`+locationId+`&session_key=${accessToken}`; // DEV ----> This works Mahipath please check this to test
document.head.appendChild(scriptElement);
var merchantID = '';
var url = '';
// Function to generate UUID
function generateUUID() {
let d = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
// Generate UUID
const generatedUUID = generateUUID();
// Construct the URL
const orgID = 'rpzdrvix';
merchantID = 'mid';
sessionID = generatedUUID;
url = `https://h.online-metrix.net/fp/tags.js?org_id=${orgID}&session_id=${merchantID}${sessionID}`;
const scriptTag = document.createElement('script');
scriptTag.src = url;
scriptTag.type = 'text/javascript';
document.head.appendChild(scriptTag);
scriptElement.onload = function () {
let amount = 2.29;
const conf = {
"location_id": locationId,
"access_token": accessToken,
"orderid": "512d1428-7bc5-c0ba-9ce4-95baf1675fdd",
"country_iso": "US",
"currency_iso": "USD",
"process_type": "sale",
"amount": amount,
"payment_methods": ["google_pay"],
"session_id": sessionID,
"user_id": "5000",
"phone_number": "1869762446",
"msisdn": "18697624464",
"default_cardholder_name": "Test user",
"default_email": "[email protected]",
"default_street": "Pine Dr",
"default_street_2": "cal"
}
initPaymentForm('iframeContent', conf);
};
}
loadAndProcessOrderWithAccessToken();
function onApprovedCallback(e) {
console.log('onApprovedCallback called', e);
const response = document.querySelector('#response');
response.innerHTML = JSON.stringify(e);
response.style.color = 'green';
var btn = document.getElementById('btnSubmit');
btn.disabled = false;
btn.innerText = 'Custom Submit';
}
function onDeclinedCallback(e) {
console.log('onDeclinedCallback called', e);
if (e == 'input_error') {
var btn = document.getElementById('btnSubmit');
btn.disabled = false;
} else {
const response = document.querySelector('#response');
response.innerHTML = JSON.stringify(e);
var btn = document.getElementById('btnSubmit');
response.style.color = 'red';
btn.disabled = false;
btn.innerText = 'Custom Submit';
}
}
function onErrorCallback(e) {
console.log('onErrorCallback called', e);
}
function onDecline(e) {
console.log('onSuccess called', e);
}
</script>
</body>
</html>
Updated 5 months ago