Sample Implementation
The following sample code implements the Samsung Pay Web Checkout button on a merchant site. The implementation steps are described in Web Checkout Integration.
For information about the content of the PaymentMethods, TransactionDetail, and PaymentCredential data structures, see the API Reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://img.mpay.samsung.com/gsmpi/sdk/samsungpay_web_sdk.js"></script>
</head>
<body>
<div id="samsungpay-container"></div>
<script>
const samsungPayClient = new SamsungPay.PaymentClient({environment: "STAGE"});
let paymentMethods = {
version: "2",
serviceId: "dcc1cbb25d6a470bb42926",
protocol: "PROTOCOL_3DS",
allowedBrands: ["visa","mastercard"]
}
samsungPayClient.isReadyToPay(paymentMethods).then(function(response) {
if (response.result) {
createAndAddButton();
}
}).catch(function(err) {
console.error(err);
});
function createAndAddButton() {
const samsungPayButton = samsungPayClient.createButton({
onClick: onSamsungPayButtonClicked,
buttonStyle: "black",
type: "buy"
});
document.getElementById("samsungpay-container").appendChild(samsungPayButton);
}
function onSamsungPayButtonClicked() {
let transactionDetail = {
orderNumber: "DSTRF345789dsgTY",
merchant: {
name: "Virtual Shop",
url: "virtualshop.com",
id: "xn7qfnd"
},
amount: {
option: "FORMAT_TOTAL_ESTIMATED_AMOUNT",
currency: "USD",
total: 300
}
}
samsungPayClient.loadPaymentSheet(paymentMethods, transactionDetail).then(function(paymentCredential) {
console.log("paymentCredential: ", paymentCredential);
const paymentResult = {
"status": "CHARGED",
"provider": "PG Name"
}
samsungPayClient.notify(paymentResult);
}).catch(function(error) {
console.log("error: ", error);
});
}
</script>
</body>
</html>