Capture and approve the order

When your customer reaches checkout, the SDK extracts the order from the merchant page and hands it to your app. You show your own approval UI, and — once the customer confirms — your backend creates the transaction.

Detect checkout

The SDK matches the WebView URL against the session's checkoutUrls and fires:

checkoutCallback = object : CheckoutCallback {
    override fun onCheckoutDetected() {
        // Customer is on a checkout page — show your payment hint / button
    }
    override fun onCheckoutExited() {
        // Customer left checkout — hide the hint
    }
}

A common pattern (used by the sample app) is a floating "Pay with YourBrand" button that appears on onCheckoutDetected.

Request order details

When the customer taps your payment entry point, ask the SDK to capture and analyze the current page:

session.requestOrderDetails(object : OrderCallback {
    override fun onOrderReady(orderInfo: OrderInfo) {
        // Show your approval UI with the extracted order
    }
    override fun onError(error: OpenFabricError) {
        // Extraction failed — let the customer pay with the
        // merchant's own payment methods
    }
})

The SDK captures the checkout page (sanitized — scripts stripped, sensitive values redacted), submits it to Open Fabric for extraction, and returns:

OrderInfo field	Description
items	Line items: itemName, and optional itemImageUrl, itemPrice, itemQuantity.
totalAmount	The displayed order total.
customerInfo	Optional firstName, lastName, email, mobileNumber extracted from the page.
shippingAddress	Optional addressLine1, postalCode, city.

note

totalAmount, itemPrice, and itemQuantity are passed through verbatim from the merchant page — they may include currency symbols and arbitrary formatting. Display them as-is; the authoritative transaction amount is set at transaction creation on your backend.

First analysis of a new merchant can take longer

On merchants with an established configuration, extraction returns in a couple of seconds. The very first sessions on a newly onboarded merchant may take noticeably longer while Open Fabric derives the merchant's checkout structure — show a loading state in your approval UI.

Show your approval UI

The approval experience is fully yours: render the order (items, total, shipping details) in your own overlay or bottom sheet, apply your credit/risk checks, and let the customer confirm. The SDK injects no payment UI into the merchant page.

Create and approve the transaction

On confirmation, your app calls your backend, and your backend calls the Create Transaction API with instrument: in_app_shopping and the session_id from session creation:

Sample request

Headers:
  Idempotency-Key: 40709949-0712-487c-a2fe-1dd2e64af506

{
  "tenant_reference_id": "your-order-123456",
  "amount": 129.00,
  "currency": "SGD",
  "instrument": "in_app_shopping",
  "session_id": "01927d8a-9c3e-7b7a-9f4e-1d2a3b4c5d6e"
}

Sample response

{
  "id": "9f2c1e3a-7b4d-4f5e-8c9a-1b2d3e4f5a6b",
  "tenant_id": "7c1b2e3a-4f5d-4b8e-9a1c-2d3e4f5a6b7c",
  "tenant_reference_id": "your-order-123456",
  "amount": 129.00,
  "currency": "SGD",
  "status": "approved",
  "card_fetch_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...",
  "payment_attempt_id": "01927d8b-1a2b-7c3d-8e4f-5a6b7c8d9e0f",
  "created_at": "2026-07-08T10:15:00Z",
  "updated_at": "2026-07-08T10:15:00Z"
}

Atomic create-and-approve

Unlike other instruments (which create a transaction your backend approves in a second step), in_app_shopping creates and approves the transaction in one call — your customer has already consented in your approval UI. The virtual card is minted immediately and the response always contains card_fetch_token and payment_attempt_id.

Return card_fetch_token and payment_attempt_id to your app. They are the inputs to the final step.

Next: Run the payment.