Shipping rates let you display various shipping options, such as standard, express, and overnight, with more accurate delivery estimates. Charge your customer for shipping using different Stripe products. Before you create a shipping rate, learn how to collect billing and shipping addresses.
Note
Shipping rates only support fixed amount values for the entire order. You can’t adjust the shipping rate based on the number of items in the order.
Note
Shipping rates only support fixed amount values for the entire order. You can’t adjust the shipping rate based on the number of items in the order.
To add a shipping rate using the Dashboard:
- Click Create shipping rate.
- Enter an amount, a description, and an optional delivery estimate.
- Click Save, and copy the shipping rate ID (
shr_123456).
Enter your shipping rate details
To create a Checkout Session that includes your shipping rate, pass in the generated shipping rate ID to the shipping_options parameter. If you want to create the shipping rate at the same time as a Checkout Session, use the shipping_rate_data parameter with shipping_options. Only Checkout Sessions in payment mode support shipping options.
The following code sample adds two shipping options to the Checkout Session:
- Free shipping, with an estimated delivery of 5-7 business days.
- Next day air, at a cost of 15.00 USD, with an estimated delivery of exactly 1 business day.
curl https://api.stripe.com/v1/checkout/sessions \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
On your client, use the shippingOptions object to render the available shipping options, such as in a radio button list. When your customer selects a shipping option, call updateShippingOption with the ID of the shipping option.
<div id="shipping-options"></div>
checkout.session().shippingOptions.forEach((option) => {
const form = document.createElement('form');
shippingOptions.forEach(option => {
const label = document.createElement('label');
const radio = document.createElement('input');
radio.type = 'radio';
radio.id = option.id;
radio.name = 'shippingOption';
radio.value = option.id;
radio.addEventListener('click', () => {
checkout.updateShippingOption(option.id)
})
const labelText = document.createTextNode(option.displayName);
label.appendChild(radio);
label.appendChild(labelText);
form.appendChild(label);
});
document.getElementById('shipping-options').appendChild(form);
});
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
