Las tarifas de envío te permiten mostrar varias opciones de envío, como estándar, exprés y al día siguiente, con estimaciones de entrega más precisas. Cobra a tu cliente por el envío con diferentes productos de Stripe. Antes de crear una tarifa de envío, aprende a recopilar las direcciones de pagos y de envío.
Nota
Las tarifas de envío solo admiten valores de monto fijo para todo el pedido. No puedes ajustar la tarifa de envío en función de la cantidad de artículos del pedido.
Nota
Las tarifas de envío solo admiten valores de monto fijo para todo el pedido. No puedes ajustar la tarifa de envío en función de la cantidad de artículos del pedido.
Para agregar una tarifa de envío usando el Dashboard:
- Haz clic en Crea una tarifa de envío.
- Introduce un importe, una descripción y una estimación de envío opcional.
- Haz clic en Guardar y copia el ID de la tarifa de envío (
shr_123456
).

Introduce los datos de la tarifa de envío
Para crear una sesión de Checkout que incluya tu tarifa de envío, especifica el ID de la tarifa de envío generado en el parámetro shipping_options. Si quieres crear la tarifa de envío al mismo tiempo que una sesión de Checkout, usa el parámetro shipping_rate_data
con shipping_options
. Solo las Checkout Sessions en modo de pago admiten opciones de envío.
En el siguiente ejemplo de código se agregan dos opciones de envío a la sesión de Checkout:
- Envío gratuito con entrega estimada de 5 a 7 días hábiles.
- Envío por Next Day Air, con un costo de USD 15.00 y una entrega estimada de 1 día hábil.
curl https://api.stripe.com/v1/checkout/sessions \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
-d billing_address_collection=required \
-d "shipping_address_collection[allowed_countries][0]"=US \
-d "shipping_address_collection[allowed_countries][1]"=CA \
-d "shipping_options[0][shipping_rate_data][type]"=fixed_amount \
-d "shipping_options[0][shipping_rate_data][fixed_amount][amount]"=0 \
-d "shipping_options[0][shipping_rate_data][fixed_amount][currency]"=usd \
-d "shipping_options[0][shipping_rate_data][display_name]"="Free shipping" \
-d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][unit]"=business_day \
-d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][value]"=5 \
-d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][unit]"=business_day \
-d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][value]"=7 \
-d "shipping_options[1][shipping_rate_data][type]"=fixed_amount \
-d "shipping_options[1][shipping_rate_data][fixed_amount][amount]"=1500 \
-d "shipping_options[1][shipping_rate_data][fixed_amount][currency]"=usd \
-d "shipping_options[1][shipping_rate_data][display_name]"="Next day air" \
-d "shipping_options[1][shipping_rate_data][delivery_estimate][minimum][unit]"=business_day \
-d "shipping_options[1][shipping_rate_data][delivery_estimate][minimum][value]"=1 \
-d "shipping_options[1][shipping_rate_data][delivery_estimate][maximum][unit]"=business_day \
-d "shipping_options[1][shipping_rate_data][delivery_estimate][maximum][value]"=1 \
-d "line_items[0][price_data][currency]"=usd \
-d "line_items[0][price_data][product_data][name]"=T-shirt \
-d "line_items[0][price_data][unit_amount]"=2000 \
-d "line_items[0][quantity]"=1 \
-d mode=payment \
-d ui_mode=custom \
--data-urlencode return_url="https://example.com/return"
En tu cliente, usa el objeto shippingOptions para representar las opciones de envío disponibles, como en una lista de botones de opción. Cuando tu cliente seleccione una opción de envío, llama a updateShippingOption con el ID de la opción de envío.
<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');