Payment UI

The Payment UI feature allows merchant provide payment UI to user with little to no effort by using 2C2P's PGW payment UI.

📘

API Method

PGW SDK API Interface

🚧

References

SDK Payment Classes
SDK Payment Enums

 

1. Generate Payment Token

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

📘

Payment Token API

Refer to: Payment Token API

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

 

2. Receive Payment Token Response

To receive a payment token response, refer to the sample payment token response below. The response will contain the payment token ID which must be passed to the merchant application.

String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
val paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
NSString *paymentToken = @"roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
let paymentToken: String = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
let paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';

 

3. Prepare Payment UI Request

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

📘

Payment UI Request Parameters

Refer to: Payment UI Request API Parameters

PaymentUIRequest paymentUIRequest = new PaymentUIBuilder(activity).build();
val paymentUIRequest = PaymentUIBuilder(activity).build()
PaymentUIRequest *paymentUIRequest = [[[PaymentUIBuilder alloc] initWithUiViewController: uiViewController] build];
let paymentUIRequest: PaymentUIRequest = PaymentUIBuilder(uiViewController: uiViewController).build()
let paymentUIRequest = {};

 

4. Prepare Transaction Request

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

📘

Payment Transaction Request API Parameters

Refer to: Do Payment Request API Parameters

TransactionResultRequest transactionResultRequest = new TransactionResultRequestBuilder(paymentToken)
                                                    .with(paymentUIRequest)
                                                    .build();
val transactionResultRequest = TransactionResultRequestBuilder(paymentToken).apply {
        with(paymentUIRequest)
}.build()
TransactionResultRequest *transactionResultRequest = [[[[TransactionResultRequestBuilder alloc] initWithPaymentToken: paymentToken]
                                                           withPaymentUIRequest: paymentUIRequest]
                                                           build];
let transactionResultRequest: TransactionResultRequest = TransactionResultRequestBuilder(paymentToken: paymentToken)
                                                         .with(paymentUIRequest)
                                                         .build()
let transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'data': {
         ...paymentUIRequest
      }
   }
};

 

5. Execute Payment UI Request

To execute a payment request and receive the API response, refer to the parameters below.

📘

Payment Transaction Response API Parameters

Refer to: Do Payment Response API Parameters

PGWSDK.getInstance().proceedTransaction(transactionResultRequest, new APIResponseCallback<TransactionResultResponse>() {

    @Override
    public void onResponse(TransactionResultResponse response) {

         if (response.getResponseCode().equals(PaymentUIResponseCode.TransactionCompleted)) {
                    
              //Inquiry transaction status inquiry by using payment token.
              String paymentToken = response.getPaymentToken();
         } else {

              //Get error response and display error
         }
    }

    @Override
    public void onFailure(Throwable error) {
                
         //Get error response and display error
    }
});
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, object : APIResponseCallback<TransactionResultResponse> {
 
      override fun onResponse(response: TransactionResultResponse) {
 
            if (response.responseCode == APIResponseCode.TransactionCompleted) {
 
                  //Inquiry transaction status inquiry by using payment token.
                  val paymentToken = response.paymentToken
            } else {
 
                  //Get error response and display error
            }
      }
 
      override fun onFailure(error: Throwable) {
 
            //Get error response and display error
      }
})
[[PGWSDK shared] proceedTransactionWithTransactionResultRequest: transactionResultRequest response: ^(TransactionResultResponse * _Nonnull response) {
                
     if([response.responseCode isEqualToString: PaymentUIResponseCode.TransactionCompleted]) {
             
          //Inquiry transaction status inquiry by using payment token.
          NSString *paymentToken = response.paymentToken;
     } else {
             
          //Get error response and display error.
     }
} failure: ^(NSError * _Nonnull error) {
        
     //Get error response and display error.
}];
PGWSDK.shared.proceedTransaction(transactionResultRequest: transactionResultRequest, { (response: TransactionResultResponse) in

     if response.responseCode == PaymentUIResponseCode.TransactionCompleted {
                
           //Inquiry transaction status inquiry by using payment token.
           let paymentToken: String = response.paymentToken
     } else {

           //Get error response and display error
     }
}) { (error: NSError) in

     //Get error response and display error
}
await RTNPGW.paymentUI(JSON.stringify(transactionResultRequest)).then((response: string) => {
       
       let transactionResultResponse = JSON.parse(response);
 
       if (transactionResultResponse?.responseCode == PaymentUIResponseCode.TransactionCompleted) {
 
              //Inquiry transaction status inquiry by using payment token.
              let paymentToken = transactionResultResponse?.paymentToken;
       } else {
 
              //Get error response and display error
       }
}).catch ((error: Error) => {
               
        //Get error response and display error
});

 

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


Full Sample Code

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

//Step 1: Generate payment token.
String paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
 
//Step 2: Construct payment ui request.
PaymentUIRequest paymentUIRequest = new PaymentUIBuilder(activity).build();
 
//Step 3: Construct transaction request.
TransactionResultRequest transactionResultRequest = new TransactionResultRequestBuilder(paymentToken)
                                                    .with(paymentUIRequest)
                                                    .build();
 
//Step 4: Execute payment ui request.
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, new APIResponseCallback<TransactionResultResponse>() {

    @Override
    public void onResponse(TransactionResultResponse response) {

         if (response.getResponseCode().equals(PaymentUIResponseCode.TransactionCompleted)) {
                    
              //Inquiry transaction status inquiry by using payment token.
              String paymentToken = response.getPaymentToken();
         } else {

              //Get error response and display error
         }
    }

    @Override
    public void onFailure(Throwable error) {
                
         //Get error response and display error
    }
});
//Step 1: Generate payment token.
val paymentToken = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
 
//Step 2: Construct payment ui request.
val paymentUIRequest = PaymentUIBuilder(activity).build()
         
//Step 3: Construct transaction request.
val transactionResultRequest = TransactionResultRequestBuilder(paymentToken).apply {
        with(paymentUIRequest)
}.build()
 
//Step 4: Execute payment ui request.
PGWSDK.getInstance().proceedTransaction(transactionResultRequest, object : APIResponseCallback<TransactionResultResponse> {
 
      override fun onResponse(response: TransactionResultResponse) {
 
            if (response.responseCode == APIResponseCode.TransactionCompleted) {
 
                  //Inquiry transaction status inquiry by using payment token.
                  val paymentToken = response.paymentToken
            } else {
 
                  //Get error response and display error
            }
      }
 
      override fun onFailure(error: Throwable) {
 
            //Get error response and display error
      }
})
//Step 1: Generate payment token.
NSString *paymentToken = @"roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL";
 
//Step 2: Construct payment ui request.
PaymentUIRequest *paymentUIRequest = [[[PaymentUIBuilder alloc] initWithUiViewController: uiViewController] build];
 
//Step 3: Construct transaction request.   
TransactionResultRequest *transactionResultRequest = [[[[TransactionResultRequestBuilder alloc] initWithPaymentToken: paymentToken]
                                                           withPaymentUIRequest: paymentUIRequest]
                                                           build];
     
//Step 4: Execute payment ui request.
[[PGWSDK shared] proceedTransactionWithTransactionResultRequest: transactionResultRequest response: ^(TransactionResultResponse * _Nonnull response) {
                
     if([response.responseCode isEqualToString: PaymentUIResponseCode.TransactionCompleted]) {
             
          //Inquiry transaction status inquiry by using payment token.
          NSString *paymentToken = response.paymentToken;
     } else {
             
          //Get error response and display error.
     }
} failure: ^(NSError * _Nonnull error) {
        
     //Get error response and display error.
}];
//Step 1: Generate payment token.
let paymentToken: String = "roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL"
    
//Step 2: Construct payment ui request.
let paymentUIRequest: PaymentUIRequest = PaymentUIBuilder(uiViewController: uiViewController).build()
         
//Step 3: Construct transaction request.
let transactionResultRequest: TransactionResultRequest = TransactionResultRequestBuilder(paymentToken: paymentToken)
                                                         .with(paymentUIRequest)
                                                         .build()
         
//Step 4: Execute payment ui request.
PGWSDK.shared.proceedTransaction(transactionResultRequest: transactionResultRequest, { (response: TransactionResultResponse) in

     if response.responseCode == PaymentUIResponseCode.TransactionCompleted {
                
           //Inquiry transaction status inquiry by using payment token.
           let paymentToken: String = response.paymentToken
     } else {

           //Get error response and display error
     }
}) { (error: NSError) in

     //Get error response and display error
}
//Step 1: Generate payment token.
let paymentToken = 'roZG9I1hk/GYjNt+BYPYbxQtKElbZDs9M5cXuEbE+Z0QTr/yUcl1oG7t0AGoOJlBhzeyBtf5mQi1UqGbjC66E85S4m63CfV/awwNbbLbkxsvfgzn0KSv7JzH3gcs/OIL';
 
//Step 2: Construct payment ui request.
let paymentUIRequest = {};
 
//Step 3: Construct transaction request.
let transactionResultRequest = {
   'paymentToken': paymentToken,
   'payment': {
      'data': {
         ...paymentUIRequest
      }
   }
};
 
//Step 4: Execute payment ui request.
await RTNPGW.paymentUI(JSON.stringify(transactionResultRequest)).then((response: string) => {
       
       let transactionResultResponse = JSON.parse(response);
 
       if (transactionResultResponse?.responseCode == PaymentUIResponseCode.TransactionCompleted) {
 
              //Inquiry transaction status inquiry by using payment token.
              let paymentToken = transactionResultResponse?.paymentToken;
       } else {
 
              //Get error response and display error
       }
}).catch ((error: Error) => {
               
        //Get error response and display error
});