Skip to main content

​
PaymentForm

Need storefront configuration?

Use the public API origin, merchant slug, and location ID. Storefront components never receive a Crave API key; register each exact browser origin before making requests.
Renders Stripe Elements for an ONLINE order submission. Crave persists the canonical order before it creates or recovers the connected-account PaymentIntent.

​
Preview

​
Behavior

  • Read checkout.getCollectionOptions for the current cart before rendering. Mount this component only when the server-returned ONLINE option is available.
  • Submit the order with collectionMode: "ONLINE"; online responses never select Square, Clover, or Toast.
  • Mount Stripe Elements with the returned clientSecret and immutable connectedAccountId.
  • Poll getOrderSubmissionOutcome with the returned attemptId after confirmation, redirects, ambiguous responses, or browser restarts.
  • Reuse the original submission idempotency key. Never create a second order to recover a response.
  • Handle every online outcome status: PAID is settled, PROCESSING is still resolving, CUSTOMER_ACTION_REQUIRED needs the customer back in Stripe with the returned clientSecret, and ACTION_REQUIRED carries a safeErrorCode and needs a decision. ACCEPTED with a verification object belongs to pay-at-store collection and is never returned for ONLINE.
  • Raw card data stays in Stripe-hosted fields and is never accepted or logged by Crave application code.
Square, Clover, and Toast are POS-native order and reconciliation integrations. Do not load their browser payment SDKs or tokenize a POS payment source in the storefront. Pay-at-store checkout has no payment form.
While the outcome is PROCESSING, do not offer a retry that submits again. The attempt is unresolved rather than failed, and a second submission charges the customer twice. Re-poll with the same attemptId instead.