Developer ZoneRecipesAPI ReferenceChangelog
Developer Zone
Start typing to search…

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.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 modeDialogandDropIn**.

Default: false.

cancelConfirmation

BL

O

UI user cancel payment confirmation dialog.

  • *Note: Only for UI modeDialogandDropIn**.

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 ModeDialogandDropIn**.

Updated 20 days ago