Integrate Samsung Pay Web Checkout with merchant sites
integrate samsung pay web checkout with merchant sites objective learn how to integrate the samsung pay payment system into your merchant sites using the samsung pay web checkout sdk partnership request to use the samsung pay web checkout sdk, you must become an official samsung pay partner once done, you can fully utilize this code lab you can learn more about the partnership process by visiting the samsung pay page here in samsung developers notein accordance with the applicable samsung pay partners agreements, this code lab covers the setup and use of the samsung pay web checkout sdk for purposes of integrating samsung pay with merchant sites the use cases and corresponding code samples included are representative examples only and should not be considered as either recommended or required overview the samsung pay web checkout service enables users to pay for purchases on your website with payment cards saved in the samsung wallet app on their mobile device it supports browser-based payments on both computers and mobile devices a mobile device with samsung wallet installed is required to make purchases through samsung pay web checkout when the user chooses to pay with samsung pay, they must provide their samsung account id email id or scan the qr code on the screen with their mobile device the user then authorizes the purchase within the samsung wallet application, which generates the payment credential on the device and transmits it to your website through the web checkout for more information, see samsung pay web checkout set up your environment you will need the following access to samsung pay developers site samsung wallet test app from samsung pay developers site samsung galaxy device that supports samsung wallet app internet browser, such as google chrome codesandbox account notein this code lab, you can use the samsung wallet test app to try the functionality of the samsung pay web checkout service in a staging environment you can use the official samsung wallet app from the galaxy store once your service is in the production environment start your project and register your service in your browser, open the link below to access the project file of the sample merchant site codesandbox io/s/virtual-store-sample-fnydk5 click the fork button to create an editable copy of the project next, follow the steps below to register your sample merchant site in the samsung pay developers site go to my projects > service management click create new service select web online payment as your service type enter your service name and select your service country select your payment gateway from the list of supported payment gateways pg if your pg uses the network token mode, upload the certificate signing request csr or privacy enhanced mail pem file you obtained from your pg contact your pg for details enter the payment domain name s for your website in the service domain field and click add for example, if your domain is mywebstore com, but the checkout page is hosted on the subdomain payments mywebstore com, you will need to enter payments mywebstore com as the service domain for each additional domain url, click add in this code lab, the generated preview url of the forked project is your service domain click the name of the newly created service to see its details, such as the generated service id that you can use for all the registered service domains include the samsung pay web checkout javascript sdk the samsung pay web checkout sdk uses javascript to integrate the samsung pay payment system to your website this sdk allows users to purchase items via web browser in the <head> section of the index html file of the project, include the samsung pay web checkout javascript sdk file <script src="https //img mpay samsung com/gsmpi/sdk/samsungpay_web_sdk js"></script> initialize the samsung pay client to initiate payments using the samsung pay api, create a new instance of the paymentclient class and pass an argument specifying that the environment as stage write the code below in the <script> tag of the <body> section const samsungpayclient = new samsungpay paymentclient { environment "stage" } ; when the service is still in debug or test mode, you can only use the staging environment to test payment functionality without processing live transactions noteby default, the service is initially set to debug or test mode during creation to switch the service status to release mode, a request must be made through the samsung pay developers site after successfully transitioning to release mode, change the environment to production next, define the service id, security protocol, and card brands that the merchant can support as payment methods the service id is the unique id assigned to your service upon creation in the samsung pay developers site let paymentmethods = { version "2", serviceid "", //input your service id here protocol "protocol_3ds", allowedbrands ["visa", "mastercard"] }; check whether the samsung pay client is ready to pay using the given payment method call the createandaddbutton function if the response indicates that the client is ready samsungpayclient isreadytopay paymentmethods then function response { if response result { createandaddbutton ; } } catch function err { console error err ; } ; create and implement the samsung pay button go to the <body> section and, inside the page-container div, create a container for the samsung pay button <div align="center" id="samsungpay-container"></div> next, go back to the <script> tag and write the createandaddbutton function inside this function, generate the samsung pay button by calling the createbutton method ensure that the button appears on the page by appending it to the container you created function createandaddbutton { const samsungpaybutton = samsungpayclient createbutton { onclick onsamsungpaybuttonclicked, buttonstyle "black"} ; document getelementbyid "samsungpay-container" appendchild samsungpaybutton ; } function onsamsungpaybuttonclicked { // create the transaction information //launch the payment sheet } from the createandaddbutton function, call the onsamsungpaybuttonclicked function when the user clicks the generated button create the transaction information in the onsamsungpaybuttonclicked function, create the transactiondetail object for the user’s purchase input your service domain in the url key let transactiondetail = { ordernumber "sample0n1y123", merchant { name "virtual shop", url "", //input your service domain countrycode "us" }, amount { option "format_total_estimated_amount", currency "usd", total 2019 99 } }; below are the descriptions of the keys included in the transactiondetail object key type description ordernumber string order number of the transaction allowed characters [a-z][a-z][0-9,-] merchant object data structure containing the merchant information merchant name string merchant name merchant url string merchant domain url e g , samsung com the maximum length is 100 characters merchant countrycode string merchant country code e g , us for united states iso-3166-1 alpha-2 amount object data structure containing the payment amount amount option string display format for the total amount on the payment sheet format_total_estimated_amount = displays "total estimated amount " with the total amountformat_total_price_only = displays the total amount only amount currency string currency code e g , usd for us dollar the maximum length is 3 character amount total string total payment amount in the currency specified by amount currencythe amount must be an integer e g , 300 or in a format valid for the currency, such as 2 decimal places after a separator e g , 300 50 notefor the complete list of specifications for the transactiondetail object, see samsung pay web checkout api reference launch the payment sheet after creating the transaction information, call the loadpaymentsheet method to display the web checkout ui the user can either input their email address or scan the generated qr code a timer screen in the web checkout ui is displayed after the user input, while a payment sheet is launched in the user's samsung wallet app the payment sheet contains the payment card option s and the transaction details when the user confirms their payment on their mobile device, you will receive the paymentcredential object generated by the device then, inform the samsung server of the payment result using the notify method the paymentresult object contains the payment result information during transaction processing and after the payment is processed with the pg network notefor real transactions, you need to extract the payment credential information from the 3ds data key within the paymentcredential object and process it through your payment provider however, in this code lab, you only need to print the paymentcredential to the console samsungpayclient loadpaymentsheet paymentmethods, transactiondetail then function paymentcredential { console log "paymentcredential ", paymentcredential ; const paymentresult = { status "charged", provider "test pg" }; samsungpayclient notify paymentresult ; } catch function error { console log "error ", error ; } ; other possible values of the status key are charged - payment was charged successfully canceled - payment was canceled by either the user, merchant, or the acquiring bank rejected - payment was rejected by the acquiring bank erred - an error occurred during the payment process test the samsung pay button after integrating the samsung pay web checkout service into your sample merchant site, follow the steps below to test the functionality of the integrated service open your sample merchant site in a new tab then, click the pay with samsung pay button in the web checkout ui, enter the email address of your samsung account to send a payment request to samsung pay tap the push notification sent to the samsung wallet app installed on your mobile device then, click accept when the payment sheet is loaded, tap on pin and enter your pin to proceed a verified message will display in both the samsung wallet app and web checkout ui to indicate that the payment was processed successfully you're done! congratulations! you have successfully achieved the goal of this code lab topic now, you can integrate the samsung pay web checkout service into your website by yourself if you're having trouble, you may check the complete code below codesandbox io/s/virtual-store-complete-dkhzfx to learn more about developing apps for samsung pay devices, visit developer samsung com/pay