Comprando productos

Vamos a usar React.useEffect para ejecutar Stripe al momento que carga nuestra página en el navegador. Solo debemos ejecutar esta función una vez, así que el segundo argumento de useEffect debe ser un array vacío:

// cart
const [stripe, setStripe] = useState();

useEffect(() => {
  setStripe(window.Stripe(
    process.env.STRIPE_PK,
    { betas: ['checkout_beta_4'] },
  ));
}, []);

De esta forma podemos configurar nuestro botón de compra para que envíe al usuario al formulario de pago de Stripe:

const handleSubmit = asynv e => {
  e.preventDefault();

  const { error } = await stripe.redirectToCheckout({
    items: cart.map(({ .sku, quantity }) => ({ sku, quantity })),
    successUrl: process.env.SUCCESS_REDIRECT,
    canelUrl: process.env.CANCEL_REDIRECT,
  });

  if (error) throw error;
}

/* ... */

<Button onClick={handleSubmit}>Comprar</Button>

Screen reader support enabled.