PAYON Payment Gateway
  • Table of Contents
  • Revision History
  • How is Work
    • PAYON PG PAYMENT
      • PAYON's Wallet Payment via PAYON Mobile App
      • PAYON Payment via PAYON's Card
      • CREDIT/DEBIT Online Payment
      • PPCBank Mobile Pay via PPCBank Mobile App(Coming Soon)
      • KHQR Online Payment
      • Binding Payment via PAYON's Card
      • Binding Payment via Credit/Debit's Card
  • PayOn PG Overview
    • Desktop Views
      • PAYON Payment Method
        • PAYON Card Payment
        • PAYON QR Payment
      • Credit/Debit Payment
      • KHQR Payment
      • PPCBank Payment
    • Mobile Views
      • PAYON Payment Method
      • Credit/Debit Payment Method
      • KHQR Payment
        • Bakong APP
        • PPCBank App
        • Other Bank App
      • PPCBank Payment
    • Obtain your API Keys
    • Platform Application Settings
  • Work flows
    • Payment Request Workflow
    • Page Redirection Workflow
  • Getting Started
    • Generate Checkout Link
    • Try redirect to Checkout Link
    • Test your payment
    • Add Card(Create Binding)
  • PAYON API Reference
    • Payment Order Registration
    • Cancellation Payment
    • Pre Auth Completion Payment
    • Refunds Payment
    • Transaction Orders History
    • Get Transaction Status
    • Push Back Notification
    • Create Binding
    • Get Binding List
    • Create Binding PIN
    • Enable / Disable PIN
    • Merchant Reconciliation
  • TEST Cards and Accounts
    • Test Card&Account
  • PAYON Library
  • PayOn Library
    • How to use PayOn Library
    • How to encrypt data with RSA
  • PAYON APPS
    • Environments
  • 3RD PARTY APPS
    • PPCBANK Environment
    • Bakong Environment
Powered by GitBook
On this page
  • Add Card
  • Add PAYON Card
  • Add Credit/Debit Card
  • Implementation

Was this helpful?

  1. Getting Started

Add Card(Create Binding)

Customer also able to add card information(binding) and process payment without input card information repeatedly. Therefore, payment with binding required user to authenticate their pass-code before

PreviousTest your paymentNextPayment Order Registration

Last updated 3 years ago

Was this helpful?

Add Card

Add PAYON Card

Add Credit/Debit Card

Implementation

Include PAYON's lib

Add PAYON's lib helper for client side to your create binding page.

  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
     <script th:src="@{../js/payonUtils.js}" charset="utf-8" type="text/javascript"></script>
  </html>

Prepare Add Card Button


<body>
    <button class="btn btn-primary" id= "addCard">ADD CARD</button>  	
 
</body>

Prepare Add Card Scripts

$("#addCard").click(function(){
		  
	var merchantId =  $('#merchantId').val();
	var termId = $('#termId').val();
	var clientId = $('#clientId').val();
	var env = $('#env').val();
	let payonUtils = new PayonUtils("","","",merchantId,termId,"",env,"",clientId);
	payonUtils.payonPgCreateBinding();
});

Prepare Scheme Format

Android 

<activity
    android:name="Your Activity"
    android:configChanges="orientation|screenSize"
    android:screenOrientation="portrait"
    android:exported="true">
    <intent-filter android:label="filter_title_view_app_from_web">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="payon.online.card"
            android:pathPrefix="/parameters"
            android:host="payon" />

    </intent-filter>
</activity>

IOS

<array>
	<dist>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>payon.online.card</string>
		</array>
	</dist>
</array>

Example Scheme Format

payon.online.card://payon/parameters/?targetType=${targetType}&terminalID=${terminalID}&merchantID=${merchantID}&clientId=${clientId}

Figure 01: Choose Payment Method
Figure 02 - Add Payon Card
Figure 03 - Add Credit/Debit Card