Developer

Payment with manual submission

Follow

Manual payment submission

If you want to get only form data without submit, you can manually submit payment.

Prepare Payment Request with manual submission

Accept input data from user

<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="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>

Encrypted Data in callback function

	<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() {
		My2c2p.getEncrypted("2c2p-payment-form",function(encryptedData,errCode,errDesc) {
			if(errCode!=0){ alert(errDesc+" ("+errCode+")"); }
			else {
				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>

Complete code
When 'Checkout()' function is called, you will get 'encryptedCardInfo' from 'encryptedData' in the callback function. Those data will be used in Submit payment request.

<html>
<head>
	<title>2C2P PGW Secure Pay API DEMO (3DS)</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/CVC2"><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() {
		My2c2p.getEncrypted("2c2p-payment-form",function(encryptedData,errCode,errDesc) {
			if(errCode!=0){ alert(errDesc+" ("+errCode+")"); }
			else {
				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>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.