Integration Guide

Ship your first Wonder payment in under an hour.

A practical, end-to-end walkthrough for building a new web or mobile app on top of Wonder. Follow the five steps below, then drop into the SDK that matches your product.

Start the guide Jump to web or mobile

5-step quick start

From signup to live transactions.

Every Wonder integration — web, mobile or terminal — follows the same backbone. Get these five building blocks right and the rest is just choosing an SDK.

01
Create your Wonder business account
Sign up on Wonder, complete business onboarding, then activate a sandbox environment from the Wonder Dashboard.
Open Wonder Dashboard Get Started docs
02
Create an AppID & implement the signature
Every Open API request is signed with RSA-SHA256. Generate an AppID, upload your public key, and wire up signing on your backend.
Create AppID Authentication
03
Pick your integration path
Web checkout, native mobile, or terminal? Choose the SDK that fits your product surface — they all share the same Order and Customer APIs.
Web & Mobile SDKs
04
Receive webhooks
Register an HTTPS endpoint to get notified about order, transaction and payout events. Always verify the signature before trusting the payload.
Webhook docs
05
Go live
Once your business application is approved, switch your AppID to production and point all calls to gateway.wonder.today.
Environments

Pick your platform

Web or mobile — same Open API, different SDK.

The backend flow is identical: create the order server-side, mount the SDK on the client, listen for the webhook. Pick the surface that matches your product.

Web

Web app integration

Embed Wonder checkout into any website or e-commerce platform with a few lines of JavaScript — themeable, mobile-first, PCI-compliant.

Drop-in Web SDK or fully hosted Payment Page
Supports cards, FPS, Apple Pay, Google Pay, WeChat Pay, Alipay, PayMe, Octopus
Pre-create the order server-side, then mount the SDK on the client

// 1. Server: create an order with your signed Open API request
POST https://gateway-stg.wonder.today/svc/payment/api/v1/orders
{
  "order_no": "ORDER_20260101_0001",
  "amount": "100.00",
  "currency": "HKD"
}

// 2. Client: mount the Wonder Web SDK with the returned order_no
<script src="https://cdn.wonder.app/sdk/web/v1/wonder.js"></script>
<script>
  Wonder.checkout({
    appId: "YOUR_APP_ID",
    orderNo: "ORDER_20260101_0001",
    onSuccess: (result) => console.log("paid", result),
    onCancel:  ()       => console.log("cancelled"),
  });
</script>

Web SDK reference

Mobile

Mobile app integration

Native SDKs for iOS, Android and Flutter. Accept cards, wallets and tokenised payments inside your app with 3DS, Apple Pay and Google Pay built in.

iOS (Swift), Android (Kotlin), Flutter and React Native SDKs
App-to-app handoff to Wonder Pay for zero PCI scope
Tokenise customers for one-tap repeat purchases

// iOS (Swift)
import WonderSDK

WonderSDK.shared.configure(appId: "YOUR_APP_ID", env: .sandbox)

WonderSDK.shared.checkout(
  orderNo: "ORDER_20260101_0001",
  presentingViewController: self
) { result in
  switch result {
  case .success(let txn): print("paid", txn.id)
  case .cancelled:        print("cancelled")
  case .failure(let err): print("error", err)
  }
}

Mobile SDK guide

Developer resources