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
andDialog
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 DropIn. |
Updated 16 days ago