Web Payment
Web Payment / Direct Debit is an alternative payment method provided by 2C2P that connects most of the major banks across South East Asia. With this payment method, customers can make seamless payments online.
Â
How to Integrate
Please refer high level diagram flow of Third Party Redirection.
Â
1. Prepare Payment Token Request
To prepare a payment token request, refer to the required parameters below.
Please refer to: Payment Token API Request
Pre Requisite |
|---|
|
Merchants who already know the specific QR payment to process may fill in Channel Code. Otherwise, merchants may also fill in Category Code or Group Code (if either parameter is known), and the corresponding payment channel will then be shown in Payment Option and Payment Option Detail APIs. |
{
"merchantID": "JT01",
"invoiceNo": "1523953661",
"description": "item 1",
"amount": 1000.00,
"currencyCode": "SGD",
"paymentChannel": ["WEBPAY"]
}
Â
2. Receive Payment Token Response
To receive a payment token response, refer to the sample payment token response below.
Please refer to: Payment Token API Response
{
"paymentToken": "kSAops9Zwhos8hSTSeLTUU3o184xaNR/T6ySCKGXyEBuOG+IdpUQMByX2CNQX7ogIAPBAgzDWpVj6447eDblRXUO/jOyK6mFETAAoLnxVjo=",
"respCode": "0000",
"respDesc": "Success"
}
Â
3. Validation of Payment Token
Proceed only when the parameter "respCode" is "0000". Otherwise, terminate the payment process. Refer to the Payment Response Code below.
Please refer to: Payment Response Code
Â
4. Prepare Payment Option Request
To retrieve available payment options, send a payment option request. Refer to the sample Payment Option Request below.
For merchants who already know which payment options are available, this step is optional.
Please refer to: Payment Option API Request
{
"paymentToken": "kSAops9Zwhos8hSTSeLTUSj/JmHyLfUXuzXPk8sZznKI9QBBcjsmtrNW+TtusgCNpkTDDG1aDFR89mhRfF+548O6vK+fqywTUqPFsWDaWsM=",
"locale": "en",
"clientID": "30c7cf51-75c4-4265-a70a-effddfbbb0ff"
}
Â
5. Receive Payment Option Response
To receive a payment option response, refer to the sample payment option response below.
Please refer to: Payment Option API Response
{
"paymentToken": "kSAops9Zwhos8hSTSeLTUSj/JmHyLfUXuzXPk8sZznKI9QBBcjsmtrNW+TtusgCNpkTDDG1aDFR89mhRfF+548O6vK+fqywTUqPFsWDaWsM=",
"merchantDetails": {
"id": "JT04",
"name": "DEMO Merchant TH",
"address": "DEMO",
"email": "",
"logoUrl": "https://pgw-static-sandbox.s3.amazonaws.com/images/merchantlogo/JT04.png",
"bannerUrl": null
},
"transactionDetails": {
"amount": "10.00",
"currencyCode": "THB",
"invoiceNo": "030920142157",
"description": "V4 Test"
},
"channelCategories": [
{
"groups": [
{
"sequenceNo": 1,
"name": "Web pay / Direct Debit",
"code": "WEBPAY",
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/webpay.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/.png",
"default": true,
"expiration": false
}
],
"sequenceNo": 1,
"name": "Web pay / Direct Debit",
"code": "WEBPAY",
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/webpay.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/.png",
"default": true,
"expiration": false
}
],
"respCode": "0000",
"respDesc": "Success"
}
Â
6. Prepare Payment Option Details Request
To retrieve details for available payment options, send a payment option details request. Refer to the sample Payment Option Details Request below.
For merchants who already know payment option details, this step is optional.
Pre Requisite |
|---|
|
|
Please refer to: Payment Option Details API Request
{
"categoryCode": "WEBPAY",
"groupCode": "WEBPAY",
"paymentToken": "kSAops9Zwhos8hSTSeLTUU3o184xaNR/T6ySCKGXyEBuOG+IdpUQMByX2CNQX7ogIAPBAgzDWpVj6447eDblRXUO/jOyK6mFETAAoLnxVjo=",
"locale": "en",
"clientID":"30c7cf51-75c4-4265-a70a-effddfbbb0ff"
}
Â
7. Receive Payment Option Details Response
To receive a payment option details response, refer to the sample payment option details response below.
Please refer to: Payment Option Details API Response
{
"totalChannel": 7,
"name": "Web pay / Direct Debit",
"categoryCode": "WEBPAY",
"groupCode": "WEBPAY",
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/webpay.png",
"channels": [
{
"sequenceNo": 1,
"name": "Kasikorn Bank",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/KBANK.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/KBANK.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "KBANK",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 2,
"name": "The Siam Commercial Bank",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/SCB.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/SCB.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "SCB",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 3,
"name": "Bangkok Bank PCL",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/BBL.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/BBL.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "BBL",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 4,
"name": "Krung Thai Bank",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/KTB.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/KTB.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "KTB",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 5,
"name": "Bank of Ayudhya",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/BAY.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/BAY.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "BAY",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 6,
"name": "TMB Bank Public Company Limited",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/TMB.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/TMB.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "TMB",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
},
{
"sequenceNo": 8,
"name": "United Overseas Bank",
"currencyCodes": null,
"iconUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/icon/UOB.png",
"logoUrl": "https://d27uu9vmlo4gwh.cloudfront.net/images/v4/images/logo/UOB.png",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "UOB",
"agentChannelCode": "WEBPAY"
},
"input": {
"name": "O",
"email": "O",
"mobileNo": "O"
},
"validation": {
"name": "^(?!\\s*$)[-a-zA-Z' ''.']{1,}$",
"email": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
"mobileNo": "[0-9]+",
"additional": {
"cardNo": null,
"amount": {
"min": 0,
"max": 0
}
}
}
},
"isDown": false
}
],
"validation": null,
"configuration": {
"payment": {
"tokenize": false,
"tokenizeOnly": false,
"cardTokenOnly": false,
"immediatePayment": false
},
"notification": {
"facebook": false,
"whatsApp": false,
"line": false
}
},
"respCode": "0000",
"respDesc": "Success"
}
Â
8. Prepare Do Payment Request
Merchants must call the Do Payment API to request for payment. To prepare a payment request, refer to the sample payment request below.
Pre Requisite : |
|---|
|
|
|
Please refer to: Do Payment API Request
{
"responseReturnUrl": "string",
"payment": {
"code": {
"channelCode": "123",
"agentCode": "UOB",
"agentChannelCode": "WEBPAY"
},
"data": {
"name": "Terrance",
"email": "[email protected]",
"mobileNo": "6523761289"
}
},
"clientIP": "175.139.9.173",
"paymentToken": "kSAops9Zwhos8hSTSeLTUSj/JmHyLfUXuzXPk8sZznKI9QBBcjsmtrNW+TtusgCNpkTDDG1aDFR89mhRfF+548O6vK+fqywTUqPFsWDaWsM=",
"locale": "en",
"clientID": "30c7cf51-75c4-4265-a70a-effddfbbb0ff"
}
Â
9. Receive Do Payment Response
To receive a payment response, refer to the the sample payment response below.
Please refer to: Do Payment API Response
{
"data": "https://demo2.2c2p.com/2C2PFrontEnd/storedCardPaymentV2/MPaymentProcess.aspx?token=mOnws5nP6eVlfMraZP1Qv4+7tEcaaG4f3fSpZbWXKBlP71C456S8kco5MtuFaIWp",
"channelCode": "123",
"respCode": "1001",
"respDesc": "Redirect to authenticate ACS bank page."
}
Â
10. Redirect to Third Party Processor
Redirect to the appropriate third party processor via browser. The third party processor details are returned through the following parameters from the Do Payment API response. **Failure or rejection of the call for the respCode parameter will terminate the process.**
| parameter from Do Payment Response | Description |
|---|---|
| data | Third party URL endpoint |
| respCode | Indicates redirection method. For more details, refer to Payment Process Flow |
Â
11. Receive Payment Response via backend API
Please refer to: Payment Response - Backend API
The parameter "backendReturnUrl" that was previously sent via Payment Token Request is the merchant endpoint that will receive the backend notification. If the parameter "backendReturnUrl" is not set, the system will obtain the backend return URL from the merchant profile set in 2C2P's merchant portal by default.
{
"merchantID": "JT04",
"invoiceNo": "030920142157",
"cardNo": null,
"amount": 10,
"userDefined1": "",
"userDefined2": "",
"userDefined3": "",
"userDefined4": "",
"userDefined5": "",
"currencyCode": "THB",
"cardToken": "",
"recurringUniqueID": "",
"tranRef": "207308",
"referenceNo": "",
"approvalCode": null,
"eci": "",
"transactionDateTime": "20200903162822",
"agentCode": "UOB",
"channelCode": "WEBPAY",
"issuerCountry": "",
"installmentMerchantAbsorbRate": null,
"respCode": "0000",
"respDesc": "Success"
}
Â
12. Receive Payment Response via browser redirection
Please refer to: Payment Response - Frontend API
The parameter "frontendReturnUrl" that was previously sent via Payment Token Request is the merchant page that customers will be redirected to. If the parameter "frontendReturnUrl" is not set, the system will obtain the front end return URL from the merchant profile set in the 2C2P merchant portal by default. Refer to the sample response returned below.
{
"invoiceNo": "280520075921",
"channelCode": "CC",
"respCode": "2000",
"respDesc": "Transaction is completed, please do payment inquiry request for full payment information."
}
Â
13. Payment Inquiry to retrieve payment information
For merchants who do not implement "Receive Payment Response via backend API", you are required to call to the Payment Inquiry API to receive the payment response.
To prepare a payment inquiry request, refer to the sample payment inquiry request below.
Please refer to: Payment Inquiry API Request
{
"paymentToken": "kSAops9Zwhos8hSTSeLTUSj/JmHyLfUXuzXPk8sZznKI9QBBcjsmtrNW+TtusgCNpkTDDG1aDFR89mhRfF+548O6vK+fqywTUqPFsWDaWsM=",
"merchantID": "JT04",
"invoiceNo": "030920142157",
"locale": "en"
}
Â
14. Receive Payment Inquiry Response
To receive a payment inquiry response, refer to the sample payment inquiry response below.
Please refer to: Payment Inquiry API Response
{
"merchantID": "JT04",
"invoiceNo": "030920142157",
"cardNo": null,
"amount": 10,
"userDefined1": "",
"userDefined2": "",
"userDefined3": "",
"userDefined4": "",
"userDefined5": "",
"currencyCode": "THB",
"cardToken": "",
"recurringUniqueID": "",
"tranRef": "207308",
"referenceNo": "",
"approvalCode": null,
"eci": "",
"transactionDateTime": "20200903162822",
"agentCode": "UOB",
"channelCode": "WEBPAY",
"issuerCountry": "",
"installmentMerchantAbsorbRate": null,
"respCode": "0000",
"respDesc": "Success"
}
Updated almost 2 years ago