The Samsung Pay Web Checkout feature can be easily implemented on your website.
Before you can integrate Samsung Pay Web Checkout, the following requirements must be met:
-
Include the Samsung Pay Web SDK JavaScript file in your website front-end:
<script src="https://img.mpay.samsung.com/gsmpi/sdk/samsungpay_web_sdk.js"></script>
-
Define the supported payment methods and Samsung Pay API version in the paymentMethods
object.
You must also provide your unique merchant ID in the serviceId
key.
const paymentMethods = {
"version": "2",
"serviceId": "dcc1cbb25d6a470bb42926",
"protocol": "PROTOCOL_3DS",
"allowedBrands": ["visa","mastercard"]
}
-
Initialize the Samsung Pay client by creating an instance of the PaymentClient
object.
You must also define the operation environment for your Web Checkout:
STAGE
= staging environment, used for testing
PRODUCTION
= production environment, for actual payments
const samsungPayClient = new SamsungPay.PaymentClient({environment: "STAGE"});
-
Check whether Samsung Pay is supported for the payment request, using the isReadyToPay()
method with the paymentMethods
object:
samsungPayClient.isReadyToPay(paymentMethods).then(function(response) {
if (response.result) {
// add a payment button
}
}).catch(function(err) {
console.error(err);
});
-
Create a container for the Samsung Pay button:
<div id="samsungpay-container"></div>
-
Implement the Samsung Pay button.
When the user clicks the button, the onClick()
listener is triggered.
function createAndAddButton() {
const samsungPayButton = samsungPayClient.createButton({
onClick: onSamsungPayButtonClicked,
buttonStyle: "black",
type: "buy"
});
document.getElementById("samsungpay-container").appendChild(samsungPayButton);
}
-
Create the transaction information.
The transactionDetail
object contains the order number, merchant information, and total amount for the purchase.
const transactionDetail = {
"orderNumber": "DSTRF345789dsgTY",
"merchant": {
"name": "Virtual Shop",
"url": "virtualshop.com",
"id": "xn7qfnd",
"countryCode": "US"
},
"amount": {
"option": "FORMAT_TOTAL_ESTIMATED_AMOUNT",
"currency": "USD",
"total": 300
}
}
-
Launch the payment sheet.
When the onClick()
event is triggered, your event handler must call the loadPaymentSheet()
method, which initiates the Web Checkout UI flow. When the user confirms the payment from their mobile device, you receive the paymentCredential
object generated by the device.
-
Extract the payment credential information from the 3DS.Data
key within the paymentCredential
object and process it through your payment provider.
-
Inform the Samsung server of the payment result using the notify()
method within the paymentResult
object.
For security reasons, the payment credential data that you receive is protected by JSON Web Encryption (JWE). To decrypt the payment credentials: