🧰
Cardknox Products
📱
Mobile Wallets
🔌
Plugins
📟
Devices
iFields Integration
The code below is a source of ifield-sample.htm
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
5
<meta content="utf-8" http-equiv="encoding">
6
7
<!-- Use the following src for the script on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifields.min.js" -->
8
<script src="https://cdn.cardknox.com/ifields/2.9.2109.2701/ifields.min.js"></script>
9
<script type="text/javascript">
10
document.addEventListener("DOMContentLoaded", function(event) {
11
if (/[?&](is)?debug/i.test(window.location.search)){
12
setDebugEnv(true);
13
}
14
15
/*
16
* [Contitional]
17
* Required if you want to enable Google Pay payment method on your website
18
* For more information please refer to documentation
19
*/
20
ckGooglePay.enableGooglePay({amountField: 'amount'});
21
});
22
23
//Google Pay
24
const gpRequest = {
25
merchantInfo: {
26
merchantName: "Example Merchant"
27
},
28
buttonOptions: {
29
buttonSizeMode: GPButtonSizeMode.fill
30
},
31
billingParams: {
32
//phoneNumberRequired: true,
33
emailRequired: true,
34
billingAddressRequired: true,
35
billingAddressFormat: GPBillingAddressFormat.full
36
},
37
shippingParams: {
38
phoneNumberRequired: true,
39
emailRequired: true,
40
onGetShippingCosts: function (shippingData) {
41
logDebug({
42
label: "onGetShippingCosts",
43
data: shippingData
44
});
45
return {
46
"shipping-001": "0.00",
47
"shipping-002": "1.99",
48
"shipping-003": "10.00"
49
}
50
},
51
onGetShippingOptions: function (shippingData) {
52
logDebug({
53
label: "onGetShippingOptions",
54
data: shippingData
55
});
56
let selectedOptionid = "shipping-001";
57
if (shippingData && shippingData.shippingOptionData && shippingData.shippingOptionData.id !== "shipping_option_unselected") {
58
selectedOptionid = shippingData.shippingOptionData.id;
59
}
60
return {
61
defaultSelectedOptionId: selectedOptionid,
62
shippingOptions: [
63
{
64
"id": "shipping-001",
65
"label": "Free: Standard shipping",
66
"description": "Free Shipping delivered in 5 business days."
67
},
68
{
69
"id": "shipping-002",
70
"label": "$1.99: Standard shipping",
71
"description": "Standard shipping delivered in 3 business days."
72
},
73
{
74
"id": "shipping-003",
75
"label": "$10: Express shipping",
76
"description": "Express shipping delivered in 1 business day."
77
},
78
]
79
};
80
}
81
},
82
onGetTransactionInfo: function () {
83
let amt = getAmount();
84
return {
85
displayItems: [
86
{
87
label: "Subtotal",
88
type: "SUBTOTAL",
89
price: amt.toString(),
90
},
91
{
92
label: "Tax",
93
type: "TAX",
94
price: (0.1 * amt).toString(),
95
}
96
],
97
countryCode: 'US',
98
currencyCode: "USD",
99
totalPriceStatus: "FINAL",
100
totalPrice: (1.1 * amt).toString(),
101
totalPriceLabel: "Total"
102
}
103
},
104
onBeforeProcessPayment: function () {
105
return new Promise(function (resolve, reject) {
106
try {
107
//Do some validation here
108
resolve(iStatus.success);
109
} catch (err) {
110
reject(err);
111
}
112
});
113
},
114
onProcessPayment: function (paymentResponse) {
115
return new Promise(function (resolve, reject) {
116
try {
117
// show returned data in developer console for debugging
118
console.log("paymentResponse", JSON.stringify(paymentResponse));
119
paymentToken = paymentResponse.paymentData.paymentMethodData.tokenizationData.token;
120
console.log("paymentToken", paymentToken);
121
const amt = (paymentResponse && paymentResponse.transactionInfo && paymentResponse.transactionInfo.totalPrice) || 0;
122
try {
123
if (amt <= 0) {
124
throw "Payment is not authorized. Invalid amount. Amount must be greater than 0";
125
}
126
setGPPayload(JSON.stringify(paymentResponse, null, 2));
127
resolve({status: iStatus.success});
128
} catch (err) {
129
const emsg = JSON.stringify(err);
130
console.error(emsg);
131
setGPPayload("");
132
setTimeout(function () { alert(emsg) }, 500);
133
reject({error: err});
134
}
135
} catch (err) {
136
setGPPayload("");
137
reject(err);
138
}
139
});
140
},
141
onPaymentCanceled: function(respCanceled) {
142
setTimeout(function () { alert("Payment was canceled") }, 500);
143
},
144
handleResponse: function (resp) {
145
const respObj = JSON.parse(resp);
146
if (respObj) {
147
if (respObj.xError) {
148
setTimeout(function () { alert(`There was a problem with your order (${respObj.xRefNum})!`) }, 500);
149
} else
150
setTimeout(function () { alert(`Thank you for your order (${respObj.xRefNum})!`) }, 500);
151
}
152
},
153
getGPEnvironment: function () {
154
if (/[?&]prod/.test(window.location.search)) {
155
return GPEnvironment.production;
156
}
157
return GPEnvironment.test;
158
},
159
initGP: function() {
160
return {
161
merchantInfo: this.merchantInfo,
162
buttonOptions: this.buttonOptions,
163
environment: this.getGPEnvironment(),
164
billingParameters: this.billingParams,
165
shippingParameters: {
166
emailRequired: this.shippingParams.emailRequired,
167
onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
168
onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
169
},
170
onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
171
onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
172
onProcessPayment: "gpRequest.onProcessPayment",
173
onPaymentCanceled: "gpRequest.onPaymentCanceled",
174
onGPButtonLoaded: "gpRequest.gpButtonLoaded",
175
isDebug: isDebugEnv
176
};
177
},
178
gpButtonLoaded: function(resp) {
179
if (!resp) return;
180
if (resp.status === iStatus.success) {
181
showHide("divGpay", true);
182
showHide("lbGPPayload", true);
183
} else if (resp.reason) {
184
alert(resp.reason);
185
}
186
}
187
};
188
function setGPPayload(value) {
189
const gpTxt = document.getElementById('gp-payload');
190
gpTxt.value = value;
191
showHide(gpTxt, value);
192
}
193
194
function showHide(elem, toShow) {
195
if (typeof(elem) === "string") {
196
elem = document.getElementById(elem);
197
}
198
if (elem) {
199
toShow ? elem.classList.remove("hidden") : elem.classList.add("hidden");
200
}
201
}
202
function getAmount () {
203
return roundToNumber(document.getElementById("amount").value || "0", 2);
204
}
205
</script>
206
<style>
207
body {
208
margin: 10px;
209
}
210
211
iframe.gp {
212
display: inline-block;
213
border: 0;
214
width: 250px;
215
height: 45px;
216
padding: 0px;
217
margin-bottom: 12px;
218
overflow: hidden;
219
position: absolute;
220
}
221
div.gp {
222
overflow: hidden;
223
display: inline-block;
224
overflow: hidden;
225
margin-bottom: 20px;
226
}
227
input {
228
border: 1px solid black;
229
font-size: 14px;
230
padding: 3px;
231
width: 243px;
232
margin-bottom: 12px;
233
}
234
235
.hidden {
236
display: none;
237
}
238
239
textarea {
240
border: 1px solid black;
241
width: 350px;
242
}
243
</style>
244
</head>
245
<body>
246
<form id="payment-form" method="POST">
247
<input id="amount" name="xAmount" placeholder="Amount" type="number" inputmode="decimal"></input>
248
<br/>
249
<div id="divGpay" class="gp hidden">
250
<iframe id="igp" class="gp" data-ifields-id="igp" data-ifields-oninit="gpRequest.initGP" src="https://cdn.cardknox.com/ifields/2.9.2109.2701/igp.htm"
251
allowpaymentrequest
252
sandbox="allow-popups allow-modals allow-scripts allow-same-origin allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
253
title="GPay checkout page">
254
</iframe>
255
<br/>
256
</div>
257
<br />
258
<br />
259
<label id="lbGPPayload" class="hidden">Google Pay Payload: </label>
260
<br />
261
<textarea id="gp-payload" class="hidden" rows="10" readonly="true"></textarea>
262
</form>
263
</body>
264
</html>
Copied!
Last modified 8mo ago
Export as PDF
Copy link