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.
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"});
If your project has a Content-Security-Policy (CSP) applied, please ensure that you add a nonce to the CSS to maintain compliance. This can be done by updating your SDK configuration as follows:
const samsungPayClient = new SamsungPay.PaymentClient({environment: "STAGE", nonce: "your-nonce"});
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);
});
Add the Samsung Pay button to your page using the official button asset:
<div id="samsungpay-container">
<button id="samsung-pay-btn">
<img src="/your/path../samsung-pay-button.png" alt="Samsung Pay" style="{follow the Samsung's official branding guideline}" />
</button>
</div>
NoteDownload the official Samsung Pay button image and branding guideline from Download page and use it directly in your HTML as shown here. Download.
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.
samsungPayClient.loadPaymentSheet(paymentMethods, transactionDetail).then(function(paymentCredential) {
// Process payment with provider
...
...
const paymentResult = {
"status": "CHARGED",
"provider": "PG Name"
}
samsungPayClient.notify(paymentResult);
}).catch(error => {
// Show error in developer console for debugging
console.error(err);
});
Payment credential sample
The paymentCredential is the resulting output of the loadPaymentSheet() method.
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.