Case: a shop with a cart and payment

A catalog, a product page, a cart in the app memory, payment through your merchant account.

The shop in preview: catalogue, cart, orders.
The shop in preview: catalogue, cart, orders.
  1. A Products table: title, price (number), image, description, inStock (yes/no), category (select).
  2. The catalog. A two-column grid holding a repeater over Products, with a Product card inside using substitutions.
  3. The cart. A cart table with title, price and image columns and the “Everyone writes their own” permission. The “Add to cart” button gets Add a record: table cart, fields title = {{item.title}}, price = {{item.price}}.
  4. The badge. A Cart item in the bottom menu with the badge {{cart.count}}.
  5. The cart screen. A repeater over cart; each row has Remove a record with {{item}} as “which record”, and a Total component at the bottom: table cart, field price.
  6. Payment. Connect your merchant account and give the Pay button Take payment with the total as the amount. Follow it with Clear my records on the cart table and navigation to a Done screen.

Read next