Skip to main content

Payment SDK

The Payment SDK allows you to embed Wonder Payment Gateway's payment capabilities into your application. Supported both Web and Native.

Overall Flow

  1. Please use Create Order API to pre-create an order on your backend side.
  2. Initializing Payment SDK with Order number and AppID.
  3. If you need to support the user credit card tokenisation feature, then you also need to get the unique customer token via the API, refer Create customer API
    info

    Once you receive the callback from the payment sdk, you should call the Query Order API to query the backend status.

Integrate SDK into your project

Add the SDK to the project​

Our SDK helps customer build customizable payment flows into your applications, available in both Android and IOS app.

In your Podfile add the following lines:

pod 'WonderPaymentSDK'
OR
pod 'WonderPaymentSDK', 'x.x.x'

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>paydemo</string>
    </array>
  </dict>
</array>

// If you use WechatPay, you must add a dependency
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>weixinULAPI</string>
  <string>weixinURLParamsAPI</string>
</array>

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

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.

Set up payment configuration​

WonderPayment.initSDK(
  paymentConfig: PaymentConfig(
      appId: "f3615c8b-e402-48ac-bcd9-5af7a473ebdc",
      customerId: "87d8f5a5-e745-456d-938e-065bb77cedc7",
      fromscheme: "paydemo",
      // staging, alpha, production
      environment: .staging,
      /*
        public enum Locale: String {
          case zh_CN = "zh-CN", zh_HK = "zh-HK", en_US = "en-US"
        }
      */
      locale: .zh_HK,
      wechat: WechatConfig(
          appId: "wx5ac0eb5676b32e80",
          universalLink: "https://heypark.gobindo.com/"
      ),
      applePay: ApplePayConfig(
          merchantIdentifier: "merchant.app.wonder.hq.staging",
          merchantName: "Jek",
          countryCode: "HK"
      )
  ),
  uiConfig: UIConfig(
      displayStyle: .confirm
  )
)

PaymentConfig class​

VariableTypeRequiredDescription
appIdStringYThe APP ID generated from New Api credential on Wonder Dashboard
customerIdStringNThis 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
fromschemeStringYUsed to redirect back to the customer’s app after app-to-app call payment is completed.
environmentenumNThe environment of the payment SDK. Available options are:.staging, .alpha, .production
localeenumNLocalised language that the app is opened in. Available options:.zh_CN .zh_HK .en_US
wechatWechatConfigNRefer to the below configs if customer wants to enable Wechat Pay payment. To apply for in-app Wechat Pay acceptance, view more at https://open.weixin.qq.com/
-- appIdStringYThe appId applied on WeChat pay, the merchant need to give it to our side for WeChat Pay configuration.
-- universalLinkStringYThe official website of the merchat’s app
applePayApplePayConfigNRefer to the below configs if customer wants to enable Apple Pay payment. To apply for Apple Pay, view more at https://developer.apple.com/help/account/configure-app-capabilities/configure-apple-pay#create-a-merchant-identifier
-- merchantIdentifierStringYAn identifier you register with Apple that uniquely identifies your business as a merchant able to accept payments.
-- merchantNameStringYThe merchant’s display name that the Apple Pay server associates with the payment token.
-- countryCodeStringYThe merchant’s two-letter ISO 3166 country code.

UIConfig class​

public class UIConfig {

    public var background: UIColor = .white
    public var secondaryBackground: UIColor = UIColor(hexString: "#FFF7F8F9")
    public var primaryTextColor: UIColor = .black
    public var secondaryTextColor: UIColor = UIColor(hexString: "#FF8E8E93")
    public var primaryButtonColor: UIColor = .black
    public var secondaryButtonColor: UIColor = .white
    public var primaryButtonBackground: UIColor = .white
    public var secondaryButtonBackground: UIColor = .black
    public var secondaryButtonDisableBackground: UIColor = UIColor(hexString: "#FF8E8E93")
    public var textFieldBackground: UIColor = UIColor(hexString: "#FFF5F5F5")
    public var linkColor: UIColor = UIColor(hexString: "#FF0094FF")
    public var errorColor: UIColor = UIColor(hexString: "#FFFC2E01")
    public var borderRadius: CGFloat = 12
    /// Choose the confirmation mode. If it is false, the confirmation button will not be displayed. Click the button to pay directly

    public var displayStyle: DisplayStyle = .oneClick
    /// to display the payment result in paymeny SDK or not
    public var showResult: Bool = true
}

public enum DisplayStyle: String {
    //One key, double confirm
    case oneClick,confirm1
}
VariableTypeRequiredDescription
backgroundColorNDefault data: #FFFFFF
secondaryBackgroundColorNDefault data: #F7F8F9
primaryTextColorColorNDefault data: #000000
secondaryTextColorColorNDefault data: #8E8E93
primaryButtonColorColorNDefault data: #FFFFFF
primaryButtonBackgroundColorNDefault data: #000000
secondaryButtonColorColorNDefault data: #000000
secondaryButtonBackgroundColorNDefault data: #FFFFFF
secondaryButtonDisableBackgroundColorNDefault data: #8E8E93
textFieldBackgroundColorNDefault data: #F5F5F5
linkColorColorNDefault data: #0094FF
errorColorColorNDefault data: #FC2E01
borderRadiusfloatNDefault: 12
displayStyleenumNUser can choose how the general UX flow of the payment selection process on Wonder pre-built payment page. Options: confirm, oneClick.Default data: oneClick
showResultbooleanNThis 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

1695632213641 1695632213641 1695632213641

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.

let paymentIntent = PaymentIntent(
  amount: 0.1,
  currency: "HKD",
  orderNumber: "202403081229292766405205"
)
WonderPayment.present(intent: paymentIntent) {
  result in
  print(result.status)
}

Present Result Object [PaymentResult]​

This section presents the result of the payment intent.

VariableTypeRequiredDescription
statusenumYcompleted, canceled, failed
codestringNIf the payment goes wrong, an error code is returned
messagestringNIf the payment goes wrong, an error message is returned

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

let paymentIntent = PaymentIntent(
    amount: 0.1,
    currency: "HKD",
    orderNumber: "202404181750209612110734"
)
let newIntent = paymentIntent.copy()
 WonderPayment.select(intent: paymentIntent) {
    method in
    newIntent.paymentMethod = method
}


Step 2: Start the payment process

WonderPayment.pay(intent: newIntent) { result in
    print(result.status)
}

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

WonderPayment.preview()

Check payment details​

tip

If you need to query payment details, please query through the server interface