import React from 'react'; import {useCheckout, AddressElement} from '@stripe/react-stripe-js'; const Shipping = () => { const [editing, setEditing] = React.useState(true); const [error, setError] = React.useState(null); const {runServerUpdate, id, shippingAddress, getShippingAddressElement} = useCheckout(); const updateShippingOptions = async (shippingDetails) => { const response = await fetch("/calculate-shipping-options", { method: "POST", headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ checkout_session_id: id, shipping_details: shippingDetails, }) }); if (response.type === 'error') { setError(response.message); setEditing(true); } else { setError(null); setEditing(false); } return result; } const handleEdit = (event) => { event.preventDefault(); setEditing(true); } const handleSave = async () => { const addressElement = getShippingAddressElement(); if (!addressElement) { return; } const aeValue = await addressElement.getValue(); if (!aeValue.complete) { return; } try { await runServerUpdate(() => updateShippingOptions(aeValue.value)); } catch (e) { setError(e?.message); setEditing(true); } } if (!editing && shippingAddress) { const {line1, line2, city, postal_code, state, country} = shippingAddress.address; return (

{shippingAddress.name}

{line1}

{line2}

{city} {state} {postal_code} {country}

); } return (

{error &&

{error}

}

); };

Personnaliser dynamiquement les options d'expédition

Actualisez les options de livraison en fonction de l'adresse de livraison du client.