Accept Payments

These integration examples describe the published 2.x SDK contract. Managed Cloud installations can run a different, pinned checkout contract; an npm tag alone does not establish compatibility. Confirm the SDK/API pair for your installation before using payment-session or customer-auth methods. The hosted storefront and checkout use their bundled client. See release compatibility.

Crave selects the restaurant’s connected payment provider server-side. Square is selected whenever it is connected; Stripe is used only where Square is disconnected.

Create a payment session

const payment = await storefront.checkout.createPaymentSession(
  locationId,
  cartId,
  { idempotencyKey: crypto.randomUUID() },
);

The SDK sends the cart capability, current revision, and idempotency key. A raw REST request must send the same headers:

curl -X POST "https://api.craveup.com/api/v1/storefront/locations/loc_123/carts/cart_456/payment-session" \
  -H "X-Cart-Token: $CART_ACCESS_TOKEN" \
  -H 'If-Match: "cart-4"' \
  -H "Idempotency-Key: payment_01"

If payment.provider is SQUARE, tokenize with Square Web Payments and send the token to checkout.confirmPayment. If it is STRIPE, confirm its client secret with Stripe Elements.

Confirm a Stripe session with Stripe Elements

import {
  PaymentElement,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";

export function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    if (!stripe || !elements) return;

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/order/confirmation`,
      },
    });

    if (error) showPaymentError(error.message);
  }

  return (
    <form onSubmit={submit}>
      <PaymentElement />
      <button>Pay now</button>
    </form>
  );
}

Use Stripe publishable configuration in the client. Stripe secret keys remain on Crave-managed services. Never collect or log raw card numbers. After Stripe returns, poll storefront.checkout.getOrderResult(locationId, cartId). Treat only completed as success; payment_pending and order_pending are retryable states, while failed is terminal.

Checkout Flow

See the complete checkout state machine.

Order Tracking

Poll the order result and load protected receipts.

Platform

Getting Started

Quickstarts

Implementation

AI

Ordering Flow

More Guides

Integrations

Reference

Create a payment session

Confirm a Stripe session with Stripe Elements

Checkout Flow

Order Tracking

​Create a payment session

​Confirm a Stripe session with Stripe Elements

Checkout Flow

Order Tracking

Create a payment session

Confirm a Stripe session with Stripe Elements