Collect Payment

Flow Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    autonumber
    actor u as User
    participant b as Browser
    participant cs as Customer Server
    participant dt1 as DT One

    u->>+b: Open customer's webpage
    note over u, dt1: UI SDK initialized and the user selects and checkouts a product.
    b->>cs: Payment Hook<br/>(Session ID extracted<br/>from Session Data, Payment Details)
    activate cs
    cs->>b: Render Payment Page

    note over b, cs: Collect payment, finalize session and redirect<br/>to Transaction status view (Session ID)

    note over b,dt1: The finalize session call should happen with 1 hour of payment hook

    cs->>dt1: Finalize Session<br/>(Auth, Session ID, Payment Details)
    activate dt1

    dt1->>cs: Finalize Session Response
    deactivate dt1

    cs->>b: Render Transaction Status Page
    deactivate cs
    deactivate b

Steps

After a user succesfully submits a transaction (in this case, a payment), the UI SDK executes the callbacks.onSubmit function. This function, which is described in detail in the callbackssection of the Configure Solution Behavior (sdkConfiguration File) page, returns a Transaction object and a Session ID.

Transaction Object

This JSON object encapsulates all essential data related to a transaction. This data can be used for purposes like displaying order information to the user, processing payments, and storing records in your database. For a full specification with code examples, see Transaction Object.

Session ID

This field uniquely identifies the user's session.

It is crucial for all subsequent interactions with the DT One platform.