<form id="cc-form">
<div>
<label>Card Name</label>
<div id="card-name"></div>
</div>
<div>
<label>Card Number</label>
<div id="card-number"></div>
</div>
<div>
<label>Expire Date</label>
<div id="card-expiry"></div>
</div>
<div>
<label>CVC</label>
<div id="card-cvc"></div>
</div>
<div>
<label>Address Line 1</label>
<div id="address-line1"></div>
</div>
<div>
<label>Address Line 2</label>
<div id="address-line2"></div>
</div>
<div>
<label>City</label>
<div id="address-city"></div>
</div>
<div>
<label>State</label>
<div id="address-state"></div>
</div>
<div>
<label>Country</label>
<div id="address-country"></div>
</div>
<div>
<label>Zip</label>
<div id="cc-zip"></div>
</div>
<div>
<label>Email</label>
<div id="cc-email"></div>
</div>
<div>
<label>Country Code</label>
<div id="cc-phonecountrycode"></div>
</div>
<div>
<label>Phone</label>
<div id="cc-phonenumber"></div>
</div>
<div>
<button id="btn-create-card">Create Card</button>
</div>
<pre id="result">Submit to see result.</pre>
</form>
<html>
<head>
<script
src="https://console.payengine.co/js/1.0.0/securefields.min.js?key=pk_test_6tMrSVLiijTsqCQm3Xv6vZB91mbzQEGy"></script>
<style>
#cc-form .field {
display: block;
box-sizing: border-box;
width: 100%;
height: 2.25rem;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#cc-form .field iframe {
border: 0 none transparent;
height: 100%;
vertical-align: middle;
width: 100%;
}
</style>
</head>
<body>
<form id="cc-form">
<div>
<label>Card Name</label>
<div id="card-name" class="field"></div>
</div>
<div>
<label>Card Number</label>
<div id="card-number" class="field"></div>
</div>
<div>
<label>Expire Date</label>
<div id="card-expiry" class="field"></div>
</div>
<div>
<label>CVC</label>
<div id="card-cvc" class="field"></div>
</div>
<div>
<label>ZIP</label>
<div id="cc-zip" class="field"></div>
</div>
<div>
<label>Email</label>
<div id="cc-email" class="field"></div>
</div>
<div>
<label>Country Code</label>
<div id="cc-phonecountrycode" class="field"></div>
</div>
<div>
<label>Phone</label>
<div id="cc-phonenumber" class="field"></div>
</div>
<div>
<button id="btn-create-card">Create Card</button>
</div>
<pre id="result">Submit to see result.</pre>
</form>
<script>
Platform.SecureFields.create().then((form) => {
// define styles for the fields
const css = {
'@font-face': {
'font-family': 'PT Mono',
'font-style': 'normal',
'font-weight': '400',
'font-display': 'swap',
'src': 'local("PT Mono"), local("PTMono-Regular") url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")',
'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
},
'font-family': '"PT Mono", monospace',
boxSizing: "border-box",
color: "#31325F",
"&::placeholder": {
color: "#CFD7E0",
},
};
// initialize the iframe fields
form.field("#card-name", {
type: "text",
fontSize: "14px",
fontWeight: "200",
name: "card_holder",
placeholder: "Card holder",
validations: ["required"],
css,
});
form.field("#card-number", {
type: "card-number",
name: "card_number",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "Card number",
showCardIcon: true,
validations: ["required", "validCardNumber"],
css,
});
form.field("#card-cvc", {
type: "card-security-code",
name: "card_cvc",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "CVC",
maxLength: 3,
validations: ["required", "validCardSecurityCode"],
css,
});
form.field("#card-expiry", {
type: "card-expiration-date",
name: "card_exp",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "MM / YY",
validations: ["required", "validCardExpirationDate"],
css,
});
form.field("#cc-zip", {
type: "zip-code",
name: "address_zip",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "Zip Code",
validations: ["postal_code/us,ca"],
css,
});
// Email or Phone number is required only for Visa 3DS
// Cardholder Email
form.field("#cc-email", {
type: "email",
name: "email",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "Email",
css,
});
// Country Code for Phone Number
form.field("#cc-phonecountrycode", {
type: "phone-number-cc",
name: "phone_number.cc",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "CC",
css,
});
// Phone Number
form.field("#cc-phonenumber", {
type: "phone-number-subscriber",
name: "phone_number.subscriber",
successColor: "#4F8A10",
errorColor: "#D8000C",
placeholder: "Subscriber",
css,
});
// attach a listener to the action button
document.getElementById('btn-create-card').addEventListener("click", async (e) => {
e.preventDefault();
try {
console.log("form.createCard",form)
console.log("form.createCard",form.createCard)
const cardObj = await form.createCard({
manuallyEntered: true
});
console.log("data", cardObj);
// for general purpose tokenization call await form.secureFields();
document.getElementById("result").innerHTML = JSON.stringify(cardObj, null, 4);
} catch (e) {
console.log("error", e);
document.getElementById("result").innerHTML = JSON.stringify(e);
}
});
});
</script>
</body>
</html>