Try redirect to Checkout Link

To verify that your integration is going through as expected, after generating the checkout link. Next, we going to make some redirect request to that checkout link. If the request is successful you will redirect to PAYON's payment page.

Include PAYON's library

Add PAYON's lib helper for client side to your check out page.

  <script th:src="@{../js/payonUtils.js}" charset="utf-8" type="text/javascript"></script>

Prepare your Checkout Page

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
    <button class="btn btn-primary" id= "checkOut">Check Out</button>  	
    <button class="btn btn-primary" id= "payonnCheckOut">PAY with PAYON</button>
    <button class="btn btn-primary" id= "creditDebitCheckOut">PAY with Credit/Debit</button>
    <button class="btn btn-primary" id= "pgBindingCheckOut">PAY with Credit/Debit</button>
    <button class="btn btn-primary" id= "pgBtCheckOut">PAY with Bank Transfer</button>
   
</body>
</html>

Prepare your Checkout script

In order to process this step. First, you need to Checkout Link endpoint in step 2. This endpoint will be on back end side implementation.

JavaScript

$("#checkOut").click(function(){
  var amount =  "YOUR AMOUNT";
	var currency = "USD";
	var paymentMethod = "";
	var merchantId =  "YOUR MERCHANT ID"
	var termId =  "YOUR TERM ID"
	var txId =  "YOUR TRANSACTION ID"
	var env = "TEST" //TEST:test enviroment, PRODUCTION: production enviroment  
	
	//Init PayonUtils
	let payonUtils = new PayonUtils(amount,currency,paymentMethod,merchantId,termId,txId,env);
	
	//Call checkout function
	//payonUtils.checkOut("/order/orderItem","post");
	payonUtils.checkOut("YOUR END POINT","post");
	
});

PHP

<?php
require "CheckoutURIBuilder.php";
if(isset($_POST['checkout'])) { 
    $check = new CheckoutURIBuilder(
        $param["lang"], 
        $param["merchantId"], 
        $param["termId"], 
        $param["txId"], 
        $param["amount"], 
        $param["currency"], 
        $param["apiKey"]);
    $check::Environment("TEST");
    $url = $check::toCheckoutUrlString();
    header("Location:".$url);
    exit();
} 
?>

Prepare your PAYON's Wallet Checkout Script

$("#payonnCheckOut").click(function(){
	var amount =  "YOUR AMOUNT";
	var currency = "USD";
	var paymentMethod = "PAYON";
	var merchantId =  "YOUR MERCHANT ID"
	var termId =  "YOUR TERM ID"
	var txId =  "YOUR TRANSACTION ID"
	var env = "TEST" //TEST:test enviroment, UAT: User Acceptance Test, PRODUCTION: production enviroment  
	
	//Init PayonUtils
	let payonUtils = new PayonUtils(amount,currency,paymentMethod,merchantId,termId,txId,env);
	
	//Call checkout function
	//payonUtils.checkOut("/order/orderItem","post");
	payonUtils.checkOut("YOUR END POINT","post");
	
});

Prepare your Credit/Debit's Checkout Script

$("#creditDebitCheckOut").click(function(){
	var amount =  "YOUR AMOUNT";
	var currency = "USD";
	var paymentMethod = "CREDIT_DEBIT";
	var merchantId =  "YOUR MERCHANT ID"
	var termId =  "YOUR TERM ID"
	var txId =  "YOUR TRANSACTION ID"
	var env = "TEST" //TEST:test enviroment,UAT: User Acceptance Test, PRODUCTION: production enviroment  
	
	//Init PayonUtils
	let payonUtils = new PayonUtils(amount,currency,paymentMethod,merchantId,termId,txId,env);
	
	//Call checkout function
	payonUtils.payonPgCreditDebitCheckOut();
	
});

Prepare your Binding Payment Script

	  $("#pgBindingCheckOut").click(function(){
		  var amount =  total;
			var currency = "USD";
			var paymentMethod = "PAYON"; //PAYON,  CREDIT_DEBIT
			var merchantId =  $('#merchantId').val();
			var termId = $('#termId').val();
			var bindingId = $('#bindingId').val();
			var clientId = $('#clientId').val();
			var txId = Date.now();
			var env = $('#env').val();
			
			let payonUtils = new PayonUtils(amount,currency,paymentMethod,merchantId,termId,txId,env,bindingId,clientId);
			
			payonUtils.payonPgBindingCheckOut();
	  });

Prepare your Bank Transfer Check out Script

$("#btCheckOut").click(function(){
			var amount =  total;
			var currency = "USD";
			var paymentMethod = "PPCBANK_TRANSFER";
			var merchantId =  $('#merchantId').val();
			var trt = "10"; //10: PURCHASE
			var termId = $('#termId').val();
			var txId = Date.now();
			var env = $('#env').val();
			var buyerId = $('#buyerId').val();
			var sellerId = $('#sellerId').val();
			var description = $('#remark').val(); 
			
			let payonUtils = new PayonUtils(amount, currency,paymentMethod,merchantId,termId,txId, env,"","",trt,"",description,buyerId,sellerId);
			
			payonUtils.payonPgBankTransferCheckOut();

});

PreviousGenerate Checkout LinkNextTest your payment

Last updated