Flutter SDK

1. Configuration files

1.1 pubspec.yaml

In your pubspec.yaml add the following lines:

dependencies:
  wonder_payment_plugin: ^x.x.x

1.2 iOS Configuration files

iOS:

1. In your Info.plist, add the following lines:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>payment_sdk_demo</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_APP_SCHEME</string>
    </array>
  </dict>
</array>

2. This is configuration of whitelist

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>weixin</string>
        <string>weixinULAPI</string>
        <string>weixinURLParamsAPI</string>
        <string>uppaysdk</string>
        <string>uppaywallet</string>
        <string>uppayx1</string>
        <string>uppayx2</string>
        <string>uppayx3</string>
        <string>octopus</string>
        <string>alipayhk</string>
        <string>alipays</string>
    </array>

3. If you use Wechat Pay, you must add a dependency

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>wechat_pay</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_WECHAT_APP_ID</string>
        </array>
    </dict>
</array>

4. In your AppDelegate.swift add the following lines:

func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
    return WonderPayment.handleOpenURL(url: url)
}

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    return WonderPayment.handleOpenURL(url: url)
}

1.3 Android Configuration files

1.In your android/build.gradle add the following lines:

dependencyResolutionManagement {
  repositories {
    mavenCentral()
    maven {
      url 'https://raw.githubusercontent.com/wonder-sources/WonderPayment-Android/master'
    }
  }
}

2. Create an empty Activity in the application package name directory and add the following to the manifest file:

<activity-alias
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:targetActivity="com.wonder.payment.sdk.wxapi.WXPayEntryResultActivity" />

3. In your AndroidManifest.xml add the following lines

<!--    WeChat Pay   Create an empty Activity in the application package name directory -->

<activity-alias
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:targetActivity="com.wonder.payment.sdk.wxapi.WXPayEntryResultActivity" />

    <!--    Alipay Auto Debit    -->
 <activity
     android:name="com.wonder.payment.sdk.activity.AlipayResultActivity"
     android:exported="true"
     android:launchMode="singleTask"
     android:taskAffinity="${applicationId}"
     android:theme="@android:style/Theme.Translucent.NoTitleBar">
     <intent-filter>
         <action android:name="android.intent.action.VIEW" />

         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />

         <data
             android:host="alipay"
             android:scheme="paydemo" />
     </intent-filter>
 </activity>

 <!--    Payme    -->
  <activity
     android:name="com.wonder.payment.sdk.activity.PaymeResultActivity"
     android:exported="true"
     android:launchMode="singleTask"
     android:taskAffinity="${applicationId}"
     android:theme="@android:style/Theme.Translucent.NoTitleBar">
     <intent-filter>
         <action android:name="android.intent.action.VIEW" />

         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />

         <data
             android:host="payme"
             android:scheme="paydemo" />
     </intent-filter>
   </activity>

2. Initiate the SDK

To initiate the SDK, customer needs know:

Set Up the Payment Configurations. Retrieve appID as a first step when initiating the SDK when you onboard on Wonder, in order to get access to our Payment Gateway configurations. For specific methods such as Apple Pay, Google Pay, Wechat Pay, you will be required to apply directly with the schemes in order to obtain the unique identifier, for the activation of those methods.
To set up a method for future payments, you must generate a customerID for Tokenisation process.
Customer can opt to customise the UI of the payment elements, or follow the default UI settings.

2.1 Payment configuration

WonderPaymentPlugin.init(
    paymentConfig: PaymentConfig(
      environment: PaymentEnvironment.staging, // [staging | alpha | production]
      appId: "YOUR_APP_ID",
      fromScheme: "YOUR_APP_SCHEME",
      wechat: WechatConfig(
        appId: "WECHAT_APP_ID",
        universalLink: "YOUR_APP_UNIVERSAL_LINK",
      ),
      applePay: ApplePayConfig(
        merchantIdentifier: 'YOUR_MERCHANT_IDENTIFIER',
        merchantName: 'YOUR_MERCHANT_NAME',
        countryCode: 'HK',
      ),
      googlePay: GooglePayConfig(
        merchantName: 'YOUR_MERCHANT_NAME',
        merchantId: 'YOUR_MERCHANT_IDENTIFIER',
        countryCode: 'HK',
        currencyCode: 'HKD',
      ),
    ),
    uiConfig: UIConfig(
      displayStyle: DisplayStyle.confirm,
    ),
  );

PaymentConfig class

Variable	Type	Required	Description
appId	String	Y	The APP ID Generated from New Api credential on Wonder Dashboard
customerId	String	N	This field is needed if customer would like to access to tokenisation feature, check out tokenisation feature here. User can create the customerId by calling the Create Customer API. Refer to : https://developer-stage.wonder.today/openapi/customer
environment	enum	Y	The environment of the payment SDK. Available options are:.staging, .alpha, .production
locale	String	N	Localised language that the app is opened in. Available options:.zh_CN .zh_HK .en_US
fromScheme	String	Y	Used to redirect back to the customer’s app after app-to-app call payment is completed.
wechatAppId	String	N	The appId applied on WeChat pay, the merchant need to give it to our side for WeChat Pay configuration.
googleConfig	GoogleConfig	N	Refer to the below configs if customer wants to enable Google Pay payment.
GoogleConfig.countryCode	String	Y	ISO 3166-1 alpha-2 country code where the transaction is processed.
GoogleConfig.currencyCode	String	Y	The ISO 4217 alphabetic currency code.
GoogleConfig.merchantId	String	Y	A Google merchant identifier issued after registration with the Google Pay & Wallet Console.
GoogleConfig.merchantName	String	Y	Merchant name encoded as UTF-8. Merchant name is rendered in the payment sheet.

2.2 UI configuration

The attributes of UIConfig are as follows：

class UIConfig {
  Color? background;
  Color? secondaryBackground;
  Color? primaryTextColor;
  Color? secondaryTextColor;
  Color? secondaryButtonColor;
  Color? secondaryButtonBackground;
  Color? primaryButtonColor;
  Color? primaryButtonBackground;
  Color? textFieldBackground;
  Color? linkColor;
  Color? successColor;
  Color? errorColor;
  Color? borderColor;
  double? borderRadius;
  Color? dividerColor;
  DisplayStyle? displayStyle;
  bool? showResult;
  bool? paymentRetriesEnabled;
}

UIConfig class

Variable	Type	Required	Description
background	Color	N	Default data: #FFFFFF
secondaryBackground	Color	N	Default data: #F7F8F9
primaryTextColor	Color	N	Default data: #000000
secondaryTextColor	Color	N	Default data: #8E8E93
primaryButtonColor	Color	N	Default data: #FFFFFF
primaryButtonBackground	Color	N	Default data: #000000
secondaryButtonColor	Color	N	Default data: #000000
secondaryButtonBackground	Color	N	Default data: #FFFFFF
textFieldBackground	Color	N	Default data: #F5F5F5
linkColor	Color	N	Default data: #0094FF
successColor	Color	N	Default data: #4CD964
borderColor	Color	N	Default data: #565656
dividerColor	Color	N	Default data: #EBEFF2
errorColor	Color	N	Default data: #FC2E01
borderRadius	float	N	Default: 12.0f
displayStyle	enum	N	User can choose how the general UX flow of the payment selection process on Wonder pre-built payment page. Options: confirm, oneClick.Default data: oneClick
showResult	boolean	N	This is to set if customer would like to determine that, upon payment result is returned, the flow should be redirecting back to Wonder pre-built payment result page or not.Default data: true
paymentRetriesEnabled	boolean	N	This is to define if payment is failed, can user try again or return failed result

1695632213641

3. Payment

3.1 Complete payment flow

Initialize Payment Intent, and Complete Payment Immediately

Upon successful SDK configuration set up, the customer can initialize and open Wonder pre-built payment session for every payment intent. The app user can select the pre-enabled payment options in the pre-built UI page to complete the payment. This flow is to trigger and complete payment continuously in one flow.

final intent = PaymentIntent(
    amount: 0.1,
    currency: "HKD",
    orderNumber: "202403081229292766405205",
  );

final result = await WonderPaymentPlugin.present(intent);

3.2 Alternative payment flow

Alternative Flow - Initialize Payment Intent, and Pay Later

Alternatively, the customer can choose to initialize the payment intent, and save the payment method option, and then pay later during the checkout process. This is suitable for customer that wishes to let their payer to pre-choose the default payment method first (step 1), and then complete payment later (step 2).

Step 1: Select payment method
a
final intent = PaymentIntent(
    amount: 0.1,
    currency: "HKD",
    orderNumber: "202403081229292766405205",
  );

final method = await WonderPaymentPlugin.select(intent.transactionType);
intent.paymentMethod = method;

Step 2: Start the payment process

final result = await WonderPaymentPlugin.pay(intent);

3.3 Preview payment method

View your current payment method and add a verified credit card

WonderPaymentPlugin.preview()

3.4 Class Definition

[PaymentIntent]

Variable	Type	Required	Description
amount	double	Y	Order amount
currency	string	Y	Order currency
orderNumber	string	Y	Order number
paymentMethod	PaymentMethod	N	When calling the present method, there is no need to pass the payment method. However, when calling the pay method, you need to specify
supportedPaymentModes	[PaymentMode]	N	Currently supported PaymentMode array. PaymentMode enumeration value: preAuth｜autoDebit｜sale
lineItems	[LineItem]	N	Details

[LineItem]

Variable	Type	Required	Description
purchasableType	string	Y	Item type，eg. Reward,Tip
purchaseId	int	N	ItemId
quantity	Int	Y	Item quantity
price	double	Y	Item unit price
total	double	Y	Item total amount

Present result object [PaymentResult]

This section presents the result of the payment intent.

Variable	Type	Required	Description
status	enum	Y	Completed, Canceled, Failed,
code	string	N	If the payment goes wrong, an error code is returned
message	string	N	If the payment goes wrong, an error message is returned

Flutter SDK

1. Configuration files​

1.1 pubspec.yaml​

In your pubspec.yaml add the following lines:​

1.2 iOS Configuration files​

iOS:​

1. In your Info.plist, add the following lines:​

2. This is configuration of whitelist​

3. If you use Wechat Pay, you must add a dependency​

4. In your AppDelegate.swift add the following lines:​

1.3 Android Configuration files​

1.In your android/build.gradle add the following lines:​

2. Create an empty Activity in the application package name directory and add the following to the manifest file:​

3. In your AndroidManifest.xml add the following lines​

2. Initiate the SDK​

2.1 Payment configuration​

PaymentConfig class​

2.2 UI configuration​

The attributes of UIConfig are as follows：​

UIConfig class​

3. Payment​

3.1 Complete payment flow​

Initialize Payment Intent, and Complete Payment Immediately​

3.2 Alternative payment flow​

Alternative Flow - Initialize Payment Intent, and Pay Later​

3.3 Preview payment method​

View your current payment method and add a verified credit card​

3.4 Class Definition​

[PaymentIntent]​

[LineItem]​

Present result object [PaymentResult]​