---
updatedAt: 2025-05-28T08:42:47.000Z
agentTools:
  projectIndex: https://developer.2c2p.com/llms.txt
---

# 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.

> 📘 API Method
>
> [PGW SDK API Interface](https://developer.2c2p.com/docs/sdk-classes-apis-interface#section-pgw-sdk-api-interface)

> 🚧 References
>
> [SDK Payment Classes](https://developer.2c2p.com/docs/sdk-classes-payment-info)\
> [SDK Payment Enums](https://developer.2c2p.com/docs/sdk-classes-payment-enums)

 

## 1. Prepare Payment Token Request

To prepare a payment token request, refer to the required parameters below.

> 📘 Payment Token API
>
> Refer to: [Payment Token API](https://developer.2c2p.com/docs/api-payment-token)

```json
{
    "merchantID": "JT04",
    "invoiceNo": "1595219400",
    "description": "2 days 1 night hotel room",
    "amount": 10.0,
    "currencyCode": "THB",
    "nonceStr": "a8092512-b144-41b0-8284-568bb5e9264c",
    "paymentChannel": ["WEBPAY"]
}
```

 

## 2. Receive Payment Token Response

To receive a payment token response, refer to the sample payment token response below.

```java
String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
```
```coffeescript Kotlin
String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
```
```objectivec
NSString *paymentToken = @"roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
```
```swift
let paymentToken: String = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
```
```coffeescript Flutter
String paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';
```
```coffeescript React Native
let paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';
```

 

## 3. Prepare Payment Request

To prepare a payment request, refer to the sample code below.

> 📘 Payment Request Parameters
>
> Refer to: [Payment Request API Parameters](https://developer.2c2p.com/docs/sdk-classes-payment-request#web-payment-webpay)

> 🚧 Payment Channel Matrix
>
> To see the available payment channels and agents for supported banks, refer to: [Payment Channel Matrix](https://developer.2c2p.com/docs/reference-payment-channels#web-payment-webpay)

```java
PaymentCode paymentCode = new PaymentCode("123", "THBBL", "WEBPAY");
 
PaymentRequest paymentRequest = new WebPaymentBuilder(paymentCode)
                                .setName("DavidBilly")
                                .setEmail("davidbilly@2c2p.com")
                                .setMobileNo("0888888888")
                                .build();
```
```coffeescript Kotlin
val paymentCode = PaymentCode("123", "THBBL", "WEBPAY")
  
val paymentRequest = WebPaymentBuilder(paymentCode).apply {
       name("DavidBilly")
       email("davidbilly@2c2p.com")
       mobileNo("0888888888")
}.build()
```
```objectivec
PaymentCode *paymentCode = [[PaymentCode alloc] initWithChannelCode: @"123" agentCode: @"THBBL" agentChannelCode: @"WEBPAY"];
          
PaymentRequest *paymentRequest = [[[[[[WebPaymentBuilder alloc] initWithPaymentCode: paymentCode]
                                       name: @"DavidBilly"]
                                       email: @"davidbilly@2c2p.com"]
                                       mobileNo: @"0888888888"]
                                       build];
```
```swift
let paymentCode: PaymentCode = PaymentCode(channelCode: "123", "THBBL", "WEBPAY")
 
let paymentRequest: PaymentRequest = WebPaymentBuilder(paymentCode: paymentCode)
                                     .name("DavidBilly")
                                     .email("davidbilly@2c2p.com")
                                     .mobileNo("0888888888")
                                     .build()
```
```coffeescript Flutter
Map<String, dynamic> paymentCode = {
   'channelCode': '123',
   'agentCode': 'THBBL',
   'agentChannelCode': 'WEBPAY'
};
 
Map<String, dynamic> paymentRequest = {
   'name': 'DavidBilly',
   'email': 'davidbilly@2c2p.com',
   'mobileNo': '0888888888'
};
```
```coffeescript React Native
let paymentCode = {
   'channelCode': '123',
   'agentCode': 'THBBL',
   'agentChannelCode': 'WEBPAY'
};
 
let paymentRequest = {
   'name': 'DavidBilly',
   'email': 'davidbilly@2c2p.com',
   'mobileNo': '0888888888'
};
```

 

## 4. Prepare Transaction Request

To prepare a transaction request, refer to the parameters below.

> 📘 Transaction Request API Parameters
>
> Refer to: [Do Payment Request API Parameters](https://developer.2c2p.com/docs/sdk-classes-apis-interface#section-do-payment-request-api)

```java
TransactionResultRequest transactionResultRequest = new TransactionResultRequestBuilder(paymentToken)
                                                    .with(paymentRequest)
                                                    .build();
```
```coffeescript Kotlin
val transactionResultRequest = TransactionResultRequestBuilder(paymentToken).apply {
       with(paymentRequest)
}.build()
```
```objectivec
TransactionResultRequest *transactionResultRequest = [[[[TransactionResultRequestBuilder alloc] initWithPaymentToken: paymentToken]
                                                          withPaymentRequest: paymentRequest]
                                                          build];
```
```swift
let transactionResultRequest: TransactionResultRequest = TransactionResultRequestBuilder(paymentToken: paymentToken)
                                                         .with(paymentRequest)
                                                         .build()
```
```coffeescript Flutter
Map<String, dynamic> transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'code': {
        ...paymentCode
      },
      'data': {
        ...paymentRequest
      }
   }
};
```
```coffeescript React Native
let transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'code': {
        ...paymentCode
      },
      'data': {
        ...paymentRequest
      }
   }
};
```

 

## 5. Receive Transaction Request Response

To receive a transaction request response, refer to the parameters below.

> 📘 Transaction Response API Parameters
>
> Refer to: [Do Payment Response API Parameters](https://developer.2c2p.com/docs/sdk-classes-apis-interface#section-do-payment-response-api)

> 🚧 References
>
> **Response Code**\
> To view payment process flows based on response code, refer to: [**Payment Flow Response Codes**](https://developer.2c2p.com/docs/response-code-payment-flow)

```java
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, new APIResponseCallback<TransactionResultResponse>() {
 
     @Override
     public void onResponse(TransactionResultResponse response) {
 
          if (response.getResponseCode().equals(APIResponseCode.TransactionAuthenticateRedirect) || response.getResponseCode().equals(APIResponseCode.TransactionAuthenticateFullRedirect)) {
 
               String redirectUrl = response.getData(); //Open WebView
           } else {
 
               //Get error response and display error.
           }
     }
 
     @Override
     public void onFailure(Throwable error) {
 
          //Get error response and display error.
     }
});
```
```coffeescript Kotlin
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, object : APIResponseCallback<TransactionResultResponse> {
   
       override fun onResponse(response: TransactionResultResponse) {
   
              if (response.responseCode == APIResponseCode.TransactionAuthenticateRedirect || response.responseCode == APIResponseCode.TransactionAuthenticateFullRedirect) {
   
                     val redirectUrl = response.data //Open WebView
              } else {
   
                     //Get error response and display error.
              }
       }
   
       override fun onFailure(error: Throwable) {
   
              //Get error response and display error.
       }
})
```
```objectivec
[[PGWSDK shared] proceedTransactionWithTransactionResultRequest: transactionResultRequest response: ^(TransactionResultResponse * _Nonnull response) {
            
     if([response.responseCode isEqualToString: APIResponseCode.TransactionAuthenticateRedirect] || [response.responseCode isEqualToString: APIResponseCode.TransactionAuthenticateFullRedirect]) {
                 
         NSString *redirectUrl = response.data; //Open WebView
     } else {
                
         //Get error response and display error.
     }
} failure: ^(NSError * _Nonnull error) {
            
     //Get error response and display error.
}];
```
```swift
PGWSDK.shared.proceedTransaction(transactionResultRequest: transactionResultRequest, { (response:TransactionResultResponse) in
     
     if response.responseCode == APIResponseCode.TransactionAuthenticateRedirect || response.responseCode == APIResponseCode.TransactionAuthenticateFullRedirect {
                  
          let redirectUrl: String = response.data //Open WebView
     } else {
                 
          //Get error response and display error.
     }
}) { (error: NSError) in
             
     //Get error response and display error.
}
```
```coffeescript Flutter
PGWSDK().proceedTransaction(transactionResultRequest, (response) {
 
   if (response['responseCode'] == APIResponseCode.transactionAuthenticateRedirect || response['responseCode'] == APIResponseCode.transactionAuthenticateFullRedirect) {
 
       String redirectUrl = response['data']; //Open WebView
   } else {
 
       //Get error response and display error.
   }
}, (error) {
 
    //Get error response and display error.
});
```
```coffeescript React Native
await RTNPGW.proceedTransaction(JSON.stringify(transactionResultRequest)).then((response: string) => {
    
    let transactionResultResponse = JSON.parse(response);
    
    if (transactionResultResponse?.responseCode == APIResponseCode.transactionAuthenticateRedirect || transactionResultResponse?.responseCode == APIResponseCode.transactionAuthenticateFullRedirect) {
    
        let redirectUrl = transactionResultResponse?.data; //Open WebView
    } else {
    
        //Get error response and display error.
    }
}).catch ((error: Error) => {
    
    //Get error response and display error
});
```

> 👍 Callback for PGW Payment Authentication
>
> Refer to: [Handle PGW Payment Authentication](https://developer.2c2p.com/docs/sdk-handle-pgw-payment-authentication)

 

## 6. Initiate Transaction Status Inquiry

To retrieve transaction details and status, merchants must initiate the Transaction Status Inquiry API. Refer to the sample code below.

> 📘 Transaction Status Inquiry API
>
> Refer to: [Transaction Status Inquiry API](https://developer.2c2p.com/docs/api-sdk-transaction-status-inquiry)

<br />

## Full Sample Code

The following sample code demonstrates requests and responses for each step of the process.

```java
//Step 1: Generate payment token.
String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
 
//Step 2: Construct Web Payment request.
PaymentCode paymentCode = new PaymentCode("123", "THBBL", "WEBPAY");
 
PaymentRequest paymentRequest = new WebPaymentBuilder(paymentCode)
                                .setName("DavidBilly")
                                .setEmail("davidbilly@2c2p.com")
                                .setMobileNo("0888888888")
                                .build();
 
//Step 3: Construct transaction request.
TransactionResultRequest transactionResultRequest = new TransactionResultRequestBuilder(paymentToken)
                                                    .with(paymentRequest)
                                                    .build();
 
//Step 4: Execute payment request.
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, new APIResponseCallback<TransactionResultResponse>() {
 
     @Override
     public void onResponse(TransactionResultResponse response) {
 
          if (response.getResponseCode().equals(APIResponseCode.TransactionAuthenticateRedirect) || response.getResponseCode().equals(APIResponseCode.TransactionAuthenticateFullRedirect)) {
 
               String redirectUrl = response.getData(); //Open WebView
           } else {
 
               //Get error response and display error.
           }
     }
 
     @Override
     public void onFailure(Throwable error) {
 
          //Get error response and display error.
     }
});
```
```coffeescript Kotlin
//Step 1: Generate payment token.
String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
 
//Step 2: Construct Web Payment request.
val paymentCode = PaymentCode("123", "THBBL", "WEBPAY")
  
val paymentRequest = WebPaymentBuilder(paymentCode).apply {
       name("DavidBilly")
       email("davidbilly@2c2p.com")
       mobileNo("0888888888")
}.build()
 
//Step 3: Construct transaction request.
val transactionResultRequest = TransactionResultRequestBuilder(paymentToken).apply {
       with(paymentRequest)
}.build()
 
//Step 4: Execute payment request.
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, object : APIResponseCallback<TransactionResultResponse> {
   
       override fun onResponse(response: TransactionResultResponse) {
   
              if (response.responseCode == APIResponseCode.TransactionAuthenticateRedirect || response.responseCode == APIResponseCode.TransactionAuthenticateFullRedirect) {
   
                     val redirectUrl = response.data //Open WebView
              } else {
   
                     //Get error response and display error.
              }
       }
   
       override fun onFailure(error: Throwable) {
   
              //Get error response and display error.
       }
})
```
```objectivec
//Step 1: Generate payment token.
NSString *paymentToken = @"roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
 
//Step 2: Construct Web Payment request.
PaymentCode *paymentCode = [[PaymentCode alloc] initWithChannelCode: @"123" agentCode: @"THBBL" agentChannelCode: @"WEBPAY"];
          
PaymentRequest *paymentRequest = [[[[[[WebPaymentBuilder alloc] initWithPaymentCode: paymentCode]
                                       name: @"DavidBilly"]
                                       email: @"davidbilly@2c2p.com"]
                                       mobileNo: @"0888888888"]
                                       build];
     
//Step 3: Construct transaction request.
TransactionResultRequest *transactionResultRequest = [[[[TransactionResultRequestBuilder alloc] initWithPaymentToken: paymentToken]
                                                          withPaymentRequest: paymentRequest]
                                                          build];
 
//Step 4: Execute payment request.
[[PGWSDK shared] proceedTransactionWithTransactionResultRequest: transactionResultRequest response: ^(TransactionResultResponse * _Nonnull response) {
            
     if([response.responseCode isEqualToString: APIResponseCode.TransactionAuthenticateRedirect] || [response.responseCode isEqualToString: APIResponseCode.TransactionAuthenticateFullRedirect]) {
                 
         NSString *redirectUrl = response.data; //Open WebView
     } else {
                
         //Get error response and display error.
     }
} failure: ^(NSError * _Nonnull error) {
            
     //Get error response and display error.
}];
```
```swift
//Step 1: Generate payment token.
let paymentToken: String = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
    
//Step 2: Construct Web Payment request.
let paymentCode: PaymentCode = PaymentCode(channelCode: "123", "THBBL", "WEBPAY")
 
let paymentRequest: PaymentRequest = WebPaymentBuilder(paymentCode: paymentCode)
                                     .name("DavidBilly")
                                     .email("davidbilly@2c2p.com")
                                     .mobileNo("0888888888")
                                     .build()
         
//Step 3: Construct transaction request.
let transactionResultRequest: TransactionResultRequest = TransactionResultRequestBuilder(paymentToken: paymentToken)
                                                         .with(paymentRequest)
                                                         .build()
         
//Step 4: Execute payment request.
PGWSDK.shared.proceedTransaction(transactionResultRequest: transactionResultRequest, { (response:TransactionResultResponse) in
     
     if response.responseCode == APIResponseCode.TransactionAuthenticateRedirect || response.responseCode == APIResponseCode.TransactionAuthenticateFullRedirect {
                  
          let redirectUrl: String = response.data //Open WebView
     } else {
                 
          //Get error response and display error.
     }
}) { (error: NSError) in
             
     //Get error response and display error.
}
```
```coffeescript Flutter
//Step 1: Generate payment token.
String paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';
 
//Step 2: Construct Web Payment request.
Map<String, dynamic> paymentCode = {
   'channelCode': '123',
   'agentCode': 'THBBL',
   'agentChannelCode': 'WEBPAY'
};
 
Map<String, dynamic> paymentRequest = {
   'name': 'DavidBilly',
   'email': 'davidbilly@2c2p.com',
   'mobileNo': '0888888888'
};
 
//Step 3: Construct transaction request.
Map<String, dynamic> transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'code': {
        ...paymentCode
      },
      'data': {
        ...paymentRequest
      }
   }
};
 
//Step 4: Execute payment request.
PGWSDK().proceedTransaction(transactionResultRequest, (response) {
 
   if (response['responseCode'] == APIResponseCode.transactionAuthenticateRedirect || response['responseCode'] == APIResponseCode.transactionAuthenticateFullRedirect) {
 
       String redirectUrl = response['data']; //Open WebView
   } else {
 
       //Get error response and display error.
   }
}, (error) {
 
    //Get error response and display error.
});
```
```coffeescript React Native
//Step 1: Generate payment token.
let paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';
 
//Step 2: Construct Web Payment request.
let paymentCode = {
   'channelCode': '123',
   'agentCode': 'THBBL',
   'agentChannelCode': 'WEBPAY'
};
 
let paymentRequest = {
   'name': 'DavidBilly',
   'email': 'davidbilly@2c2p.com',
   'mobileNo': '0888888888'
};
 
//Step 3: Construct transaction request.
let transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'code': {
        ...paymentCode
      },
      'data': {
        ...paymentRequest
      }
   }
};
 
//Step 4: Execute payment request.
await RTNPGW.proceedTransaction(JSON.stringify(transactionResultRequest)).then((response: string) => {
    
    let transactionResultResponse = JSON.parse(response);
    
    if (transactionResultResponse?.responseCode == APIResponseCode.transactionAuthenticateRedirect || transactionResultResponse?.responseCode == APIResponseCode.transactionAuthenticateFullRedirect) {
    
        let redirectUrl = transactionResultResponse?.data; //Open WebView
    } else {
    
        //Get error response and display error.
    }
}).catch ((error: Error) => {
    
    //Get error response and display error
});
```