Drop In UI

2C2P provides PGW web SDK for drop in V4 UI that allow merchant to accept payment on their website.

js:
https://pgw-ui.2c2p.com/sdk/js/pgw-sdk-4.2.0.js

css:
https://pgw-ui.2c2p.com/sdk/css/pgw-sdk-style-4.2.0.css

Sample Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2C2P PGW WEB SDK Demo Code</title>
 
    <script src="https://pgw-ui.2c2p.com/sdk/js/pgw-sdk-4.2.0.js"></script>
    <link rel="stylesheet" href="https://pgw-ui.2c2p.com/sdk/css/pgw-sdk-style-4.2.0.css">
 
    <script>
 
        window.onload = function() {
 
            document.getElementById("button_payment_ui").onclick = function() {
 
                const uiRequestMandatory = {
 
                    url: "https://sandbox-pgw-ui.2c2p.com/payment/4.1/#/token/kSAops9Zwhos8hSTSeLTUcdCmCwE2NKHpYOYbRTKX03oDqTwbeDrc23fcz8cnQjb%2ftMq62WvQJu1SrEq%2flBCdYGVkLif8FrLfqx8%2f39t304%3d"
                };
 
                //or
 
                const uiRequestFull = {
 
                    url: "https://sandbox-pgw-ui.2c2p.com/payment/4.1/#/token/kSAops9Zwhos8hSTSeLTUcdCmCwE2NKHpYOYbRTKX03oDqTwbeDrc23fcz8cnQjb%2ftMq62WvQJu1SrEq%2flBCdYGVkLif8FrLfqx8%2f39t304%3d",
                    templateId: "ikea",
                    mode: "DropIn",
                    appBar: true,
                    cancelConfirmation: true
                };
 
                PGWSDK.paymentUI(uiRequestFull, function(response) {
 
                     console.log(response);
 
                    if(response.responseCode == "0003") {
 
                        //User canceled transaction
                    } else if(response.responseCode == "2000") {
 
                        let transactionStatusInquiry = response.transactionStatusInquiry;
 
                        if(transactionStatusInquiry) {
                             
                            //Handle transaction status inquiry API response or redirect to your payment result page.
                        } else {
 
                            //Request payment inquiry API or redirect to your payment result page.
                        }
                    } else {
 
                        console.log("Response callback: " + response.paymentToken + " // " + response.responseCode + " // " + response.responseDescription);
                    }
                });
            };
 
            document.getElementById("button_payment_submit").onclick = function() {
 
                PGWSDK.submitPayment("submit_gcard");
            };
        }
    </script>
</head>
<body>
 
<button id="button_payment_ui" type="button">Submit Payment UI</button>
<button id="button_payment_submit" type="button">Submit Payment Submit</button>
 
<br><br><br>
 
<div style="height: 1000px;">
 
    <!-- Mandatory for UI mode: DropIn and Dialog -->
    <div id="pgw-ui-container"></div>
</div>
 
</body>
</html>

Custom CSS styles

  • Merchant can download css file for custom own css style for DropIn and Dialog mode.
  • Merchant required self-host custom css file on their server.

UI Request

ParameterData TypeMandatoryDescription
urlC 255MV4 UI payment url.

Generate from Payment Token API.
templateIdC 50OUI custom template id.
modeC 20OUI display mode.

Mode:
Fullscreen: Load V4 UI within same tab with fullscreen.

DropIn: Load V4 UI within same tab with specify area.

Dialog: Load V4 UI within same tab with pop up dialog.

Tab: Load V4 UI to new tab.

Default: Fullscreen.
appBarBLOUI app bar header.

Note: Only for UI mode Dialog and DropIn.

Default: false.
cancelConfirmationBLOUI user cancel payment confirmation dialog.

Note: Only for UI mode Dialog and DropIn.

Default: false.

UI Response

ParameterData TypeMandatoryDescription
paymentTokenC 255MPayment token.

Use for request Transaction Status Inquiry or Payment Inquiry API.
transactionStatusInquiryC 255MPayment transaction status inquiry response.

Note: Only for response code 2000.
responseCodeC 255MPayment response code.
responseDescriptionC 255MPayment response description.

UI Submit Request

PGWSDK.submitPayment method

ParameterData TypeMandatoryDescription
submitTypeC 255MPayment submit type.

submit_gcard - Global Credit Card.

submit_lcard - Local Credit Card.

submit_dpay - Digital Payment.

submit_qr - QR Payment.

submit_counter - Counter Payment.

submit_ssm - Self Service Machine.

submit_webpay - Web Payment / Direct Debit.

submit_imbank - iBanking / mBanking.

submit_gbnpl - Global Buy Now Pay Later.

submit_cancel - Cancel Payment.

Note: Only for UI Mode DropIn.