Cart

A client-side shopping cart widget that works with moat's hosted checkout. Drop into any page; syncs with a server-side Cart session.

The Cart service is a front-end companion to the Cart API. It renders a shopping cart UI on your page and keeps it in sync with a server-side cart session — so your checkout can span multiple pages, be recovered if the customer navigates away, and convert into a transaction cleanly.

Include the library

<script src="https://sandbox.fluidpay.com/js/cart/v1/cart.js"></script>
<div id="cart"></div>

Initialize

const cart = new MoatCart({
  apikey: "pub_YOUR_PUBLIC_KEY",
  container: "#cart",
  cartId: "cart_01H9XK...",         // optional — resumes an existing cart
  onItemsChange: (items, totals) => {
    console.log("Cart updated", items, totals);
  },
  onCheckout: (cartId) => {
    // Customer clicked checkout — redirect or open the tokenizer
    window.location.href = "/checkout?cart=" + cartId;
  }
});

// Add items from your UI
cart.addItem({ sku: "WIDGET-001", description: "Blue Widget", quantity: 2, unit_amount: 1500 });
cart.applyDiscount({ code: "SAVE10", amount: 300 });

Methods

Method	Purpose
`addItem(item)`	Add a line item. Returns a promise that resolves when synced.
`updateItem(id, patch)`	Update quantity or amount.
`removeItem(id)`	Remove an item.
`applyDiscount(discount)`	Apply a discount code or amount.
`setShipping(address)`	Set the shipping address. Triggers tax recalculation if tax is enabled.
`getCart()`	Returns the current cart object.
`checkout()`	Programmatically trigger the `onCheckout` callback.
`destroy()`	Tear down the widget.

Styling

The widget respects CSS variables set on its container or on :root. Override these to match your brand:

#cart {
  --cart-bg: #fff;
  --cart-fg: #1a1a1a;
  --cart-accent: #6b6ef5;
  --cart-font: "Inter", sans-serif;
  --cart-radius: 12px;
}

Finalizing

When the customer is ready to pay, read the cartId from the widget, collect a payment method (typically via the Tokenizer), and finalize the cart server-side with POST /api/cart/{id}/pay.