Integrate Samsung Pay SDK Flutter Plugin into merchant apps for in-app payment
integrate samsung pay sdk flutter plugin into merchant apps for in-app payment objective learn how to integrate in-app payment with your flutter-based merchant apps using samsung pay sdk flutter plugin partnership request to use the samsung pay sdk flutter plugin, you must become an official samsung partner once done, you can fully utilize this code lab you can learn more about the partnership process by visiting samsung pay in samsung developers overview the samsung pay sdk flutter plugin allows developers to use samsung wallet features in flutter applications it is the wrapper of samsung pay sdk, which is an application framework for integrating samsung wallet features on galaxy devices the samsung pay sdk flutter plugin offers in-app payment feature that gives customers the opportunity to pay for products and services with samsung wallet set up your environment notefor sdc24 attendees, skip this step as it’s already done for you you will need the following samsung wallet app version 5 6 53, 5 8 0 samsung pay sdk flutter plugin android studio latest version recommended java se development kit jdk 11 or later flutter sdk a compatible galaxy device with android q 10 0 or android api level 29 or later android os versions noteflutter sdk must be installed and set up properly when developing flutter applications after downloading, follow the installation guide appropriate to your operating system after proper installation and setup, configure your android studio to include the flutter plugin for intellij check this editor guide for the detailed steps sample code here is a sample code for you to start coding in this code lab download it and start your learning experience! in-app payment flutter plugin sample code 20 4 mb start your project in android studio, click open to open an existing project locate the flutterinapppayment project from the directory, and click ok go to file > settings > languages & frameworks > flutter to change the flutter sdk path input the directory path where your flutter sdk is installed and click apply install the plugin and configure the api level add samsungpaysdkflutter_v1 01 00 folder in the project go to samsungpaysdkflutter_v1 01 00 > pubspec yaml file and click on pub get in right side of the action ribbon or run flutter pub get in the command line next, go to flutterinapppayment > pubspec yaml and add the samsungpaysdkflutter_v1 01 00 plugin under dependencies samsung_pay_sdk_flutter path /samsungpaysdkflutter_v1 01 00 warningbe careful of line alignment of pubspec yaml file, as the indentations indicate the structure and hierarchy of the data from the terminal, run flutter pub get command or click on pub get in the right side of the action ribbon configure the api level samsung pay sdk flutter plugin supports samsung pay sdk version 2 18 or later hence, we must set a valid api version latest version 2 19 of samsung pay sdk go to android > app > src > main > androidmanifest xml and add the api level in the meta-data of application tag <meta-data android name="spay_sdk_api_level" android value="2 19" /> // most recent sdk version is recommended to leverage the latest apis add the samsung pay button go to the main project, flutterinapppayment project > lib > main dart here, the ui is created using the build widget this widget shows the sample item information such as image, name, and price add a bottomnavigationbar before the end of the body of scaffold to display the samsung pay button bottomnavigationbar visibility visible isspaystatusready, child inkwell ontap { requestpaymentwithsamsungwallet ; }, child image asset 'assets/pay_rectangular_full_screen_black png' , , , check samsung pay status in main dart > myhomepage class, create an instance of samsungpaysdkflutter with valid partnerinfo service id and service type during onboarding, the samsung pay developers site assigns the service id and service type these data are used for partner verification static final samsungpaysdkflutterplugin = samsungpaysdkflutter partnerinfo serviceid service_id, data {spaysdk partner_service_type servicetype inapp_payment name} ; notethe service id is already provided in the sample code for this code lab however, this service id is for test purposes only and cannot be used for an actual application or service to change the service id in your actual application, the value of the variable service_id should be modified to check whether samsung pay is supported on your galaxy device, call the getsamsungpaystatus api and change the samsung pay button visibility accordingly in checksamsungpaystatus method, apply the following code void checksamsungpaystatus { //update ui according to samsung pay status myhomepage samsungpaysdkflutterplugin getsamsungpaystatus statuslistener onsuccess status, bundle async { if status == "2" { setstate { isspaystatusready = true; } ; } else { setstate { isspaystatusready = false; } ; _showtoast context,"spay status not ready" ; } }, onfail errorcode, bundle { setstate { isspaystatusready = false; } ; _showtoast context,"spay status api call failed" ; } ; } inside initstate method, call checksamsungpaystatus to ensure that getsamsungpaystatus api is called before any other api is called checksamsungpaystatus ; notethe getsamsungpaystatus api must be called before using any other feature in the samsung pay sdk flutter plugin create a custom payment sheet samsung pay sdk flutter plugin offers a custom type payment sheet called customsheet to customize the ui with additional payment related data here, create customsheet using the following controls amountboxcontrol it is a mandatory control to build a customsheet it provides the monetary details of the transaction addresscontrol it is used to display the billing and shipping address in makeamountcontrol method, add items and total price to build amountboxcontrol amountboxcontrol additem strings product_item_id, "item", 1199 00, "" ; amountboxcontrol additem strings product_tax_id, "tax", 5 0, "" ; amountboxcontrol additem strings product_shipping_id, "shipping", 1 0, "" ; amountboxcontrol setamounttotal 1205 00, spaysdk format_total_price_only ; in makebillingaddress method, add the following code to create billingaddresscontrol set sheetitemtype as zip_only_address while creating billingaddresscontrol to get the zip code as we are expecting to get the user's billing address from samsung wallet, set sheetupdatedlistener addresscontrol billingaddresscontrol = addresscontrol strings billing_address_id, sheetitemtype zip_only_address name ; billingaddresscontrol setaddresstitle strings billing_address ; billingaddresscontrol sheetupdatedlistener = billinglistener; return billingaddresscontrol; notefrom samsung pay sdk version 2 19 onwards, users can only add zip code as their billing address only the zip code is fetched from the user's samsung wallet instead of the full billing address implement this listener in makeupcustomsheet method to update the custom sheet when the user updates their billing address sheetupdatedlistener sheetupdatedlistener = sheetupdatedlistener onresult string controlid, customsheet sheet { if controlid == strings billing_address_id { var addresscontrol = sheet getsheetcontrol controlid as addresscontrol; setstate { postalcode = addresscontrol address! postalcode; } ; } myhomepage samsungpaysdkflutterplugin updatesheet sheet ; } ; create the shipping address in buildshippingaddressinfo method to add it in shipping addresscontrol this is the shipping address from the merchant app maddress = address addressee "jane smith", addressline1 "123 main st", addressline2 "suite 456", city "anytown", state "st", countrycode "usa", postalcode "12345", phonenumber "+1 555-123-4567", email "example@email com" ; add this address in makeshippingaddress method shippingaddresscontrol address = buildshippingaddressinfo ; finally, complete the makeupcustomsheet method by adding amountboxcontrol, billingaddresscontrol, and shippingaddresscontrol customsheet addcontrol makeamountcontrol ; customsheet addcontrol makebillingaddress sheetupdatedlistener ; customsheet addcontrol makeshippingaddress ; create a transaction request to start the payment process, the merchant app should create a transaction request with payment information in maketransactiondetailswithsheet method, add the merchant name and custom sheet in customsheetpaymentinfo customsheetpaymentinfo customsheetpaymentinfo = customsheetpaymentinfo merchantname "in app payment flutter app", customsheet makeupcustomsheet ; your merchant app must fill the following mandatory fields in customsheetpaymentinfo customsheetpaymentinfo merchantid = "123456"; customsheetpaymentinfo setordernumber "amz007mar" ; customsheetpaymentinfo setmerchantcountrycode "us" ; customsheetpaymentinfo addressinpaymentsheet = addressinpaymentsheet need_billing_send_shipping; request payment with a custom payment sheet the startinapppaywithcustomsheet api is called to request payment using a custom payment sheet in samsung pay this api requires customsheetpaymentinfo and customsheettransactioninfolistener first, implement this listener before starting the payment customsheettransactioninfolistener transactionlistener { customsheettransactioninfolistener customsheettransactioninfolistener = customsheettransactioninfolistener oncardinfoupdated paymentcardinfo paymentcardinfo, customsheet customsheet { myhomepage samsungpaysdkflutterplugin updatesheet customsheet ; }, onsuccess customsheetpaymentinfo customsheetpaymentinfo, string paymentcredential, map<string, dynamic>? extrapaymentdata { print "payment success" ; }, onfail string errorcode, map<string, dynamic> bundle { print "payment failed" ; } ; return customsheettransactioninfolistener; } lastly, call startinapppaywithcustomsheet api to start the payment in the requestpaymentwithsamsungwallet method void requestpaymentwithsamsungwallet { myhomepage samsungpaysdkflutterplugin startinapppaywithcustomsheet maketransactiondetailswithsheet , transactionlistener ; } run the app build the app by running flutter build apk --debug in the command line or going to build > flutter > build apk deploy the app on the device test it by clicking on samsung pay button to proceed with the payment transaction to thoroughly test the sample app, you must add at least one payment card to the samsung wallet app you're done! congratulations! you have successfully achieved the goal of this code lab now, you can integrate in-app payment with your flutter app by yourself! to learn more about developing apps for samsung pay devices, visit developer samsung com/pay