Drop-in UI

2c2p provides drop-in UI web SDK and allow merchant to accept payment on their website.

js:
https://pgw.2c2p.com/sdk/js/pgw-sdk-4.1.0.js

css:
https://pgw.2c2p.com/sdk/css/pgw-sdk-style-4.1.0.css
https://pgw.2c2p.com/sdk/css/pgw-sdk-font-4.1.0.css

assets:
https://pgw.2c2p.com/sdk/pgw-sdk-assets-4.1.0.zip

Sample Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2C2P PGW WEB SDK Demo Code</title>
 
    <script src="https://pgw.2c2p.com/sdk/js/pgw-sdk-4.1.0.js"></script>
    <link rel="stylesheet" href="https://pgw.2c2p.com/sdk/css/pgw-sdk-style-4.1.0.css">
    <link rel="stylesheet" href="https://pgw.2c2p.com/sdk/css/pgw-sdk-font-4.1.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",
                    cancelConfirmation: true
                };
 
                PGWSDK.paymentUI(uiRequestFull, function(response) {
 
                     console.log(response);
 
                    if(response.responseCode == "0003") {
 
                        //User canceled transaction
                    } else if(response.responseCode == "2000") {
 
                        //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 assets and css files for custom own css style for DropIn and Dialog mode.
Merchant required self-host custom assets and css files 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.
cancelConfirmation	B	O	User cancel payment confirmation dialog. Note: Only for UI mode Dialog. 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.
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. Note: Only for UI Mode DropIn.