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

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)

Sample Code

Here is a sample code for you to start coding in this Code Lab. Download it and start your learning experience!

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

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})); 

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();

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; 

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! If you are having trouble, you may download this file:

To learn more about developing apps for Samsung Pay devices, visit:
developer.samsung.com/pay