Secure Fields
'Direct API with Secure Fields' allows merchants to integrate to 2C2P Payment Gateway within the merchants' own web page and to load sensitive card input field elements directly from 2C2P to the customer's browser. It provides a seamless and secure payment flow to the customer.
Download Sample Code
Import 2C2P Secure Field and Secure Pay JavaScript into the payment page, and construct form elements with 2C2P form entitled '2c2p-payment-form'.
<script type="text/javascript" src="https://2c2p-uat-cloudfront.s3-ap-southeast-1.amazonaws.com/2C2PPGW/secureField/my2c2p-secureFields.1.0.0.min.js"></script>
<script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p-sandbox.1.7.3.min.js"></script>
<form id="2c2p-payment-form" action="./payment_3d.php" method="POST"></form>
Add the Checkout button and Checkout() function to generate encrypted card information from Secure Fields elements.
At the checkout, merchants could retrieve the encryptedCardInfo token to create a Payment API request (refer to: Do Payment API) as securePayToken.
It can also be used with the SecurePay API as shown in this sample code.
<input type="button" value="Checkout" onclick="Checkout()" />
<script type="text/javascript">
//call this function to generate card token
function Checkout() {
ClearFormErrorMessage();
My2c2p.getEncrypted("2c2p-payment-form",function(encryptedData,errCode,errDesc) {
DisplayFormErrorMessage(errCode, errDesc);
if (errCode != 0) { DisplayFormErrorMessage(errCode, errDesc); }
else {
var form = document.getElementById("2c2p-payment-form");
if (form != undefined) {
//to get card information:
// alert(encryptedData.encryptedCardInfo); //used to make card payment
// alert(encryptedData.maskedCardInfo); //first 6 and last 4 masked PAN
// alert(encryptedData.expMonthCardInfo); //card expiry month
// alert(encryptedData.expYearCardInfo); //card expiry year
form.submit();
}
}
});
}
Merchant could use the provided error fields added beside each card information field, or use its own way to display validation errors.
function DisplayFormErrorMessage(errCode, errDesc) {
var errControl;
switch (errCode) {
case 1:
case 2:
errControl = document.getElementById('2c2pError-cardnumber');
break;
case 3:
case 8:
case 9:
errControl = document.getElementById('2c2pError-month');
break;
case 4:
case 5:
case 6:
case 7:
errControl = document.getElementById('2c2pError-year');
break;
}
if (errControl != undefined) {
errControl.innerHTML = errDesc;
errControl.focus();
}
else { console.log(errDesc + '(' + errCode + ')'); }
}
function ClearFormErrorMessage() {
var errSpans = Array.prototype.slice.call(document.getElementsByClassName('_2c2pPaymentFieldError'));
if (errSpans.length > 0) {
errSpans.forEach(function (errSpan) { errSpan.innerHTML = ""; });
}
}
</script>
Finally, the merchant could use their own styled script to customize the Secure Field elements' look and feel.
<!-- custom styling -->
<style>
._2c2pPaymentField {
margin: 5px;
}
._2c2pCard {
color: blue;
}
._2c2pMonth {
color: brown;
}
._2c2pYear {
color: red;
}
._2c2pCvv {
color: green;
}
._2c2pPaymentFieldError{
color: red;
font-style: italic;
}
</style>
Complete Code
Copy & Paste the code below to your working file, and put this file in your Web Server.
<html>
<head>
<title>2C2P SecureField Demo</title>
</head>
<body>
<script type="text/javascript" src="https://2c2p-uat-cloudfront.s3-ap-southeast-1.amazonaws.com/2C2PPGW/secureField/my2c2p-secureFields.1.0.0.min.js"></script>
<script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p-sandbox.1.7.3.min.js"></script>
<!-- 2C2P SecureField will automatically generate card input fields under form '2c2p-payment-form' -->
<form id="2c2p-payment-form" action="./payment_3d.php" method="POST"></form>
<input type="button" value="Checkout" onclick="Checkout()" />
<script type="text/javascript">
//call this function to generate card token
function Checkout() {
ClearFormErrorMessage();
My2c2p.getEncrypted("2c2p-payment-form",function(encryptedData,errCode,errDesc) {
DisplayFormErrorMessage(errCode, errDesc);
if (errCode != 0) { DisplayFormErrorMessage(errCode, errDesc); }
else {
var form = document.getElementById("2c2p-payment-form");
if (form != undefined) {
//to get card information:
// alert(encryptedData.encryptedCardInfo); //used to make card payment
// alert(encryptedData.maskedCardInfo); //first 6 and last 4 masked PAN
// alert(encryptedData.expMonthCardInfo); //card expiry month
// alert(encryptedData.expYearCardInfo); //card expiry year
form.submit();
}
}
});
}
function DisplayFormErrorMessage(errCode, errDesc) {
var errControl;
switch (errCode) {
case 1:
case 2:
errControl = document.getElementById('2c2pError-cardnumber');
break;
case 3:
case 8:
case 9:
errControl = document.getElementById('2c2pError-month');
break;
case 4:
case 5:
case 6:
case 7:
errControl = document.getElementById('2c2pError-year');
break;
}
if (errControl != undefined) {
errControl.innerHTML = errDesc;
errControl.focus();
}
else { console.log(errDesc + '(' + errCode + ')'); }
}
function ClearFormErrorMessage() {
var errSpans = Array.prototype.slice.call(document.getElementsByClassName('_2c2pPaymentFieldError'));
if (errSpans.length > 0) {
errSpans.forEach(function (errSpan) { errSpan.innerHTML = ""; });
}
}
</script>
<!-- custom styling -->
<style>
._2c2pPaymentField {
margin: 5px;
}
._2c2pCard {
color: blue;
}
._2c2pMonth {
color: brown;
}
._2c2pYear {
color: red;
}
._2c2pCvv {
color: green;
}
._2c2pPaymentFieldError{
color: red;
font-style: italic;
}
</style>
</body>
</html>
Updated almost 3 years ago