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

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}

PreviousTest your payment NextPayment Order Registration

Last updated 3 years ago

Was this helpful?