Developer ZoneRecipesAPI ReferenceChangelog
Developer Zone

Using iFrame

❗️

Drop-in UI is available

Please refer Drop-in UI for a better user experience on web UI. We are strongly recommend merchant implement drop-in UI.


'Redirect API with iFrame' allows merchants to integrate to 2C2P Payment Gateway within the merchant's own web page. It provides a seamless payment flow to the customer.

👍

Download Sample Code

PHP code - iFrame
PHP code - Payment Button on Parent page

Add event listener to the parent page, and listen to the payment result message.
Payment Response Code 

<script> 
const handlePaymentPostMessages = ({ data }) => {
	const { paymentResult } = data;
	if (paymentResult) {
		const { respCode, respDesc, respData } = paymentResult;

		//CODE HERE 
		//alert(respCode+': '+respDesc+': '+respData);
		if(respCode == '2000'){
			alert("payment completed");
			window.location.replace("./thankyou.html"); 
		}
		if(respCode == '1001'){
			alert("redirect to continue payment");
			window.location.replace(respData); 
		}
	}
};
// Subscribe on post messages
window.addEventListener('message', handlePaymentPostMessages);
</script>

Open 2C2P payment page URL in iFrame

<span>V4 Payment Page on iFrame</span> <br/>  
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
	<span>V4 URL:</span> <input type="text" name="url" style="width:600px;" value="https://sandbox-pgw-ui.2c2p.com/payment/4.1/#/token/kSAops9Zwhos8hSTSeLTUU0WFFpBjc19mS5csybD4Fx7tSNfeh1ydc1sQYQM7ikDf6QM%2fZ5Puc2LvVt2heZCKvm30bGvJBDvRWUWJnccJV8%3d">
	<input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
	$url = $_POST['url'];
	if (!empty($url)) {  
		echo '<iframe name="output_frame" id="output_frame" src="'.$url.'"  width="800" height="600"></iframe>';
	}
}
?>

Alternatively, merchants could call 'Submit Payment' button from the parent page.

<script>
function triggerSubmitPayment() { 
        iFrame.contentWindow.postMessage(
            'submit_gcard',
            '*'
        );
    }
}
</script>
<button type="button" onclick="triggerSubmitPayment();">PAY NOW</button>

Complete Code
Copy & Paste the code below to your working file, and put this file in your Web Server.

<script> 
const handlePaymentPostMessages = ({ data }) => {
	const { paymentResult } = data;
	if (paymentResult) {
		const { respCode, respDesc, respData } = paymentResult;

		//CODE HERE 
		alert(respCode+': '+respDesc+': '+respData);
		if(respCode == '2000'){
			alert("payment completed");
			window.location.replace("./thankyou.html"); 
		}
		if(respCode == '1001'){
			alert("redirect to continue payment");
			window.location.replace(respData); 
		}
	}
};
// Subscribe on post messages
window.addEventListener('message', handlePaymentPostMessages);
</script>

<span>V4 Payment Page on iFrame</span> <br/>  
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
	<span>V4 URL:</span> <input type="text" name="url" style="width:600px;" value="https://sandbox-pgw-ui.2c2p.com/payment/4.1/#/token/kSAops9Zwhos8hSTSeLTUU0WFFpBjc19mS5csybD4Fx7tSNfeh1ydc1sQYQM7ikDf6QM%2fZ5Puc2LvVt2heZCKvm30bGvJBDvRWUWJnccJV8%3d">
	<input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
	$url = $_POST['url'];
	if (!empty($url)) {  
		echo '<iframe name="output_frame" id="output_frame" src="'.$url.'"  width="800" height="600"></iframe>';
	}
}
?>

Updated 10 months ago