Drop In UI

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

css:
https://pgw-ui.2c2p.com/sdk/css/pgw-sdk-style-4.2.1.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.1.js"></script>
    <link rel="stylesheet" href="https://pgw-ui.2c2p.com/sdk/css/pgw-sdk-style-4.2.1.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

Parameter	Data Type	Mandatory	Description
url	C 255	M	V4 UI payment url. Generate from Payment Token API.
templateId	C 50	O	UI custom template id.
mode	C 20	O	UI 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.
appBar	BL	O	UI app bar header. Note: Only for UI mode Dialog and DropIn. Default: false.
cancelConfirmation	BL	O	UI user cancel payment confirmation dialog. Note: Only for UI mode Dialog and DropIn. Default: false.

UI Response

Parameter	Data Type	Mandatory	Description
paymentToken	C 255	M	Payment token. Use for request Transaction Status Inquiry or Payment Inquiry API.
transactionStatusInquiry	C 255	M	Payment transaction status inquiry response. Note: Only for response code 2000.
responseCode	C 255	M	Payment response code.
responseDescription	C 255	M	Payment response description.

UI Submit Request

PGWSDK.submitPayment method

Parameter	Data Type	Mandatory	Description
submitType	C 255	M	Payment 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 Dialog and DropIn.