Drop-in UI

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




Sample Code

<!DOCTYPE html>
    <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">
        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"
                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) {
                    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() {
<button id="button_payment_ui" type="button">Submit Payment UI</button>
<button id="button_payment_submit" type="button">Submit Payment Submit</button>
<div style="height: 1000px;">
    <!-- Mandatory for UI mode: DropIn and Dialog -->
    <div id="pgw-ui-container"></div>

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

ParameterData TypeMandatoryDescription
urlC 255MV4 UI payment url.

Generate from Payment Token API.
templateIdC 50OUI custom template id.
modeC 20OUI display 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.
cancelConfirmationBOUser cancel payment confirmation dialog.

Note: Only for UI mode Dialog.

Default: false.

UI Response

ParameterData TypeMandatoryDescription
paymentTokenC 255MPayment token.

Use for request Transaction Status Inquiry or Payment Inquiry API.
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.

Note: Only for UI Mode DropIn.