Secure Fields

'Direct API with Secure Fields' allows merchant to integrate to 2C2P Payment Gateway within merchant's own web page and load sensitive card input field elements directly from 2C2P to customer's browser. It provides seamless and secure payment flow to the customer.

👍

Download Sample Code

PHP Code

Import 2C2P Secure Field and Secure Pay JavaScript into the payment page, and construct form elements with 2c2p form name '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 Checkout button and Checkout() function to generate encrypted card information from Secure Fields elements.
At the checkout, merchant could retrieve the encryptedCardInfo token to be passed to Do Payment API request (refer to: Do Payment API) as securePayToken.
Or to be used with 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 of the card information fields, or use merchant's 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, merchant could use their own style script to customize the Secure Fields elements looks 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 below code 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>