redirectToCheckout()

To send the buyer to Stripe's Checkout experience, use redirectToCheckout

redirectToCheckout is configured for you by the props passed to CartProvider. You can pass it a sessionId (the preferred way) or refer to products in your Stripe dashboard to fulfill purchases.

With use-shopping-cart's redirectToCheckout, you don't need to pass anything more than the sessionId you get from Stripe because all of the config is handled in the CartProvider props.

This is how you'd use redirectToCheckout() with a serverless function:

{}

Copy
import React, { useState } from 'react'
import { Link } from 'gatsby'
import { useShoppingCart } from 'use-shopping-cart'
export function Cart() {
  const [status, setStatus] = useState('idle')
  const { redirectToCheckout, cartCount } = useShoppingCart()
  async function handleClick(event) {
    event.preventDefault()
    if (cartCount > 0) {
      setStatus('idle')
      const error = await redirectToCheckout()
      if (error) setStatus('redirect-error')
    } else {
      setStatus('missing-items')
    }
  }
  return (
    <article
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '50%'
      }}
    >
      {status === 'missing-items' && (
        <p>
          Your cart is empty. Please go to{' '}
          <Link to={'/usage/addItem()'}>addItem()</Link> and add an item to the
          cart
        </p>
      )}
      {status === 'redirect-error' && (
        <p>Unable to redirect to Stripe checkout page.</p>
      )}
      <button
        onClick={handleClick}
        style={{ height: 50, width: 100, marginBottom: 30 }}
      >
        Checkout
      </button>
    </article>
  )
}

Please refer to Stripe's official documentation to learn more about redirectToCheckout.