On e-commerce apps like Haute Corner, the checkout is the screen that matters most. It has to be smooth, and it has to be secure. Stripe makes both achievable without handling card numbers yourself.

The shape of the flow

  1. The app sends the cart to your backend.
  2. The backend works out the total from its own prices and creates a PaymentIntent with Stripe.
  3. The backend returns the PaymentIntent's client secret to the app.
  4. The app shows Stripe's Payment Sheet, which collects and submits the card details directly to Stripe.
  5. Stripe notifies your backend through a webhook when the payment succeeds.

Card details go from the phone straight to Stripe. Your servers never see them, which keeps you out of most PCI compliance work.

Never trust prices from the app

The app can be modified. Always calculate the amount on the server from product ids and quantities:

const amount = cart.reduce((sum, item) => {
  const product = productsById[item.productId]
  return sum + product.priceInCents * item.quantity
}, 0)

const intent = await stripe.paymentIntents.create({
  amount,
  currency: 'usd',
  automatic_payment_methods: { enabled: true },
})

Fulfil orders from the webhook

Don't mark an order as paid because the app said so. Mark it paid when Stripe's payment_intent.succeeded webhook arrives, after verifying the webhook signature. The app can lose connection right after paying; the webhook still arrives.

Test the unhappy paths

Stripe's test cards cover declines, insufficient funds and 3D Secure challenges. Run through each one before launch. A customer who sees a clear "your card was declined, try another" message often completes the purchase; one who sees a spinner forever doesn't.

Use the Payment Sheet

Stripe's prebuilt sheet handles Apple Pay, Google Pay, saved cards and authentication challenges. Building that yourself takes weeks and is easy to get wrong.