Checkout example
This is an example of an online store and checkout app. It is built using Electric with Supabase and the Ionic framework.
You can see it running at checkout-demo.electric-sql.com and in the demo screencast below:
You can also open it in your mobile browser by scanning this QR code:
How the example works
The example app shows a simplified checkout flow for an e-commerce store. It starts with an auth screen. Once logged in, you can add products to a shopping basket. You can then checkout, entering your order and delivery details. There is then a step to place your order and wait for server confirmation that (in this case mock) payment has gone through and the order is confirmed.
The product catalogue is synchronised to the local device. This takes the network off the interaction path in the ordering flow. These is a direct relationship in e-commerce between latency and conversion rates. So this demonstrates a checkout flow that can maximum conversion. It also works offline, all the way up until order confirmation, which uses an event sourcing pattern to have server confirmation of the order.
Rather than calling an out-of-band order placement API, orders and their payment details are written to the local database. When the data syncs to the server, a Postgres database trigger calls a Supabase edge function. This processes the order and is a place where you can take payment, initiate fulfillment, etc. When finished processing, the edge function updates the order status column. This syncs back to the client and the client interface shows the order as confirmed.
This pattern allows a zero-barrier, local-first, offline-capable checkout flow to work with server-side confirmation and secure payment transactions.
Supabase integration
The example app uses Supabase for auth, edge functions and to host the Postgres database. See Deployment -> Supabase for details on using Electric with Supabase.
Authentication for the store uses Supabase Auth, using their standard form component. It then uses JWT token provided by Supabase to authenticate the connection to the Electric sync service. A Supabase Edge Function is used to process orders when they are placed.
Source code
Clone the monorepo:
git clone https://github.com/electric-sql/electric
Change into the checkout example directory:
cd electric/examples/checkout
Follow the instructions in the README.md.