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>