How Delivery Checkout works
Learn how to add a checkout widget to your e-commerce site
Integrating with Ingrid Checkout consists of two parts:
- Managing the Checkout Session (see backend integration guide)
- Embedding the Shipping Selector (see frontend integration guide)
Checkout Session is Ingrid's core concept. It holds information about customer's transaction and contains available delivery options. Whenever something important happens; e.g. customer adds something to the cart, changes the delivery option or your backend decides to change the shipping address on behalf of the customer the session will be updated.
The Shipping Selector is customizable widget, that allow customers to interact with Checkout Session. It will be embedded into your e-commerce checkout page.
It is possible to configure the integration and customize the selector widget in our Merchant Platform.
Session lifecycle
The basic lifecycle of the checkout session is presented below:
- When the customer is ready to finalize the purchase, your backend is creating a Checkout Session.
- The Session provides HTML snippets that needs to be embedded into the checkout page.
- Customer and your backend can interact with the session
- When the purchase is done, your backend is completing a Checkout Session.
- After the transaction, the order is eventually created.
sequenceDiagram
actor C as Customer
participant S as Server
participant API as Ingrid API
participant IS as Ingrid Session
C->>S: Navigates to checkout page
S->>API: Create Checkout Session
note right of IS: Session is Active
API->>S: Return Checkout Session with HTML snippet
S->>C: Embeds the snippet into checkout page
loop
S->>API: Update Session
C->>IS: Update Session
end
C->>S: Complete purchase
S->>API: Complete Checkout Session
note right of IS: Session is Completed
What next?
- Integration prerequisites, read carefully before integration
- Backend Integration Guide
- Frontend Integration Guide
- Features, if you want to configure a specific aspect of the integration