My2C2P Secure Pay (3DS)

'My2C2P Secure Pay' make it easy for Merchants to collect credit card payment Securely even without going through Long & Costly process of PCI compliant.
Copy & Paste code below, and you are integrated! as easy as that.
Download full demo: PHP code / .Net code

Construct Payment Form

Add 'data-encrypt' fields into form to capture card information securely.

<form id="2c2p-payment-form" action="./payment_3d.php" method="POST">
    <input type="text" data-encrypt="cardnumber" maxlength="16" placeholder="Credit Card Number"><br/>
    <input type="text" data-encrypt="month" maxlength="2" placeholder="MM"><br/>
    <input type="text" data-encrypt="year" maxlength="4" placeholder="YYYY"><br/>
    <input type="password" data-encrypt="cvv" maxlength="4" autocomplete="off" placeholder="CVV2/CVC2" ><br/>
    <input type="submit" value="Submit">
</form>

Attribute	Description
data-encrypt="cardnumber"	To capture the credit card number encrypted
data-encrypt="month"	To capture the credit card expire month encrypted
data-encrypt="year"	To capture the credit card expire year encrypted
data-encrypt="cvv"	To capture the credit card security code encrypted

Import Api and Submit Form

Import 2C2P Secure Pay API and submit form with credit card information securely.

<script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js"></script>
<script type="text/javascript">
    My2c2p.onSubmitForm("2c2p-payment-form", function(errCode,errDesc){
        if(errCode!=0){
            alert(errDesc);
        }
    });
</script>

Error Code	Description
0	Success
1	Card number is required
2	Card number is invalid
3	Expiry month is required
4	Expiry month must be two characters
5	Expiry year is required
6	Expiry year must be four characters
7	Card already expired(year)
8	Card already expired(month)
9	Expiry month is invalid
10	CVV2/CVC2 is invalid

Complete Code

Copy & Paste below code to 'demo_3d.html' file, and put this file in your Web Server.

/demo_3d.html
<html>
<head>
  <title>2C2P Secure Payment API</title>
</head>
<body>
    <form id="2c2p-payment-form" action="./payment_3d.php" method="POST">
        <input type="text" data-encrypt="cardnumber" maxlength="16" placeholder="Credit Card Number"><br/>
        <input type="text" data-encrypt="month" maxlength="2" placeholder="MM"><br/>
        <input type="text" data-encrypt="year" maxlength="4" placeholder="YYYY"><br/>
        <input type="password" data-encrypt="cvv" maxlength="4" autocomplete="off" placeholder="CVV2" ><br/>
        <input type="submit" value="Submit">
    </form>

    <script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js"></script>
    <script type="text/javascript">
        My2c2p.onSubmitForm("2c2p-payment-form", function(errCode,errDesc){
            if(errCode!=0){
                alert(errDesc);
            }
        });
    </script>
</body>
</html>

Download full demo: PHP code / .Net code

Payment With Javascript Event

If you want to make a payment from javascript function instead of form submit, you can use My2c2p.submitForm.

/demo_3d_event.html Show

<html>
<head>
  <title>2C2P Secure Payment API</title>
</head>
<body>
    <form id="2c2p-payment-form" action="./payment_3d.php" method="POST">
        <input type="text" data-encrypt="cardnumber" maxlength="16" placeholder="Credit Card Number"><br/>
        <input type="text" data-encrypt="month" maxlength="2" placeholder="MM"><br/>
        <input type="text" data-encrypt="year" maxlength="4" placeholder="YYYY"><br/>
        <input type="password" data-encrypt="cvv" maxlength="4" autocomplete="off" placeholder="CVV2" ><br/>
        <input type="button" value="Checkout" onclick="Checkout()">
    </form>

    <script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js"></script>
    <script type="text/javascript">
        function Checkout() {
            //your code here

            //if there is no error , it will submit the form
            My2c2p.submitForm("2c2p-payment-form",function(errCode,errDesc){
                if(errCode!=0){
                    alert(errDesc);
                }
            });
        }
    </script>
</body>
</html>

Download full demo: PHP code

Get Encrypted Card Data Without Form Submit

If you want to get only form data without submit, you can use My2c2p.getEncrypted. When you call that function , you will get encryptedCardInfo from encryptedData in callback function. You need to use that data for request payment.

/demo_3d_getencrypted.html Show

<html>
    <head>
      <title>2C2P Secure Payment API</title>
    </head>
    <body>
        <form id="2c2p-payment-form" action="./payment_3d.php" method="POST">
            <input type="text" data-encrypt="cardnumber" maxlength="16" placeholder="Credit Card Number"><br/>
            <input type="text" data-encrypt="month" maxlength="2" placeholder="MM"><br/>
            <input type="text" data-encrypt="year" maxlength="4" placeholder="YYYY"><br/>
            <input type="password" data-encrypt="cvv" maxlength="4" autocomplete="off" placeholder="CVV2" ><br/>
            <input type="hidden" value="" name="encryptedCardInfo">
            <input type="hidden" value="" name="maskedCardInfo">
            <input type="hidden" value="" name="expMonthCardInfo">
            <input type="hidden" value="" name="expYearCardInfo">
            <input type="button" value="Checkout" onclick="Checkout()">
        </form>

        <script type="text/javascript" src="https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js"></script>
        <script type="text/javascript">
            function Checkout() {
                //your code here

                My2c2p.getEncrypted("2c2p-payment-form",function(encryptedData,errCode,errDesc) {

                    if(errCode!=0){
                        alert(errDesc);
                    }
                    else {
                        //encryptedData is JSON format
                        /*
                            {
                                "encryptedCardInfo": "",
                                "maskedCardInfo": "",
                                "expMonthCardInfo": "",
                                "expYearCardInfo": ""
                            }
                        */
                        var form = document.getElementById("2c2p-payment-form");
                        form.encryptedCardInfo.value = encryptedData.encryptedCardInfo;
                        form.maskedCardInfo.value = encryptedData.maskedCardInfo;
                        form.expMonthCardInfo.value = encryptedData.expMonthCardInfo;
                        form.expYearCardInfo.value = encryptedData.expYearCardInfo;
                        form.submit();
                    }

                });
            }
        </script>
    </body>
    </html>

Download full demo: PHP code