Las tarifas de envío te permiten mostrar distintas opciones de envío, como estándar, urgente y al día siguiente, con estimaciones de entrega más precisas. Cobra a tu cliente por el envío utilizando diferentes productos de Stripe. Antes de crear una tasa de envío, descubre cómo recopilar las direcciones de facturación y envío.
Nota
Las tasas de envío solo admiten valores de importe fijos para todo el pedido. No puedes ajustar la tasa de envío en función del número de artículos del pedido.
Nota
Las tasas de envío solo admiten valores de importe fijos para todo el pedido. No puedes ajustar la tasa de envío en función del número de artículos del pedido.
Para añadir una tarifa de envío usando el Dashboard, haz lo siguiente:
- Haz clic en Crear 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 tu tarifa de envío
Para crear una sesión de Checkout que incluya tu tarifa de envío, transfiere el ID de la tarifa de envío generado al parámetro shipping_options. Si quieres crear la tasa de envío al mismo tiempo que una sesión de Checkout, usa el parámetro shipping_rate_data
con shipping_options
. Solo las sesiones de Checkout en modo de pago admiten opciones de envío.
En el siguiente ejemplo de código se añaden dos opciones de envío a la sesión de Checkout:
- Envío gratuito, con una entrega estimada de 5 a 7 días hábiles.
- Next Day Air, con un coste de 15,00 USD 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 mostrar las opciones de envío disponibles, por ejemplo, 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');