Extensibilidad de pago de Shopify Plus: experiencias de pago personalizadas

El pago de Shopify genera una conversión promedio del 15%, una de las más altas del comercio electrónico. Esa estadística es la razón por la que Shopify históricamente restringió la personalización del proceso de pago: su proceso de pago está bien optimizado y las modificaciones personalizadas tienden a reducir la conversión. Pero los comerciantes tienen razones legítimas para personalizar: visualización de puntos de fidelidad, preferencias de entrega, mensajes de obsequio, campos de orden de compra B2B y requisitos de cumplimiento que el pago estándar no puede cumplir.

La extensibilidad del pago es la respuesta de Shopify Plus a esta tensión. Permite una personalización significativa del proceso de pago mientras mantiene intacta la arquitectura de pago optimizada de Shopify y mantiene actualizaciones automáticas a medida que Shopify evoluciona la plataforma. El enfoque obsoleto checkout.liquid se rompía cada vez que Shopify actualizaba el pago. Las extensiones son seguras para actualizaciones por diseño.

Conclusiones clave

• Checkout Extensibility reemplaza el obsoleto checkout.liquid: todos los comerciantes Plus deben migrar antes de 2025 (ya pasado)
• Las extensiones de interfaz de usuario agregan componentes de React a espacios de pago específicos sin anular la plantilla de pago principal de Shopify.
• Las funciones de pago habilitan una lógica personalizada del lado del servidor para descuentos, envío y filtrado de métodos de pago.
• Las extensiones se ejecutan en un entorno aislado: no pueden acceder al DOM fuera de su destino de renderizado.
• La API de marca permite una personalización visual completa de los colores, la tipografía y el radio de las esquinas del proceso de pago.
• Las extensiones posteriores a la compra agregan ofertas de ventas adicionales con un solo clic después de la confirmación del pedido (ubicación de conversión más alta)
• La página de agradecimiento y la página de estado del pedido ahora son totalmente personalizables con extensiones
• Rendimiento: las extensiones se representan en el lado del servidor en la infraestructura de Shopify, sin penalización en el rendimiento del lado del cliente.

---

La arquitectura de la extensibilidad del pago

Comprender la arquitectura técnica le ayuda a tomar mejores decisiones sobre qué construir y cómo.

Puntos de extensión (ranuras)

La interfaz de usuario de pago de Shopify tiene puntos de extensión predefinidos: ubicaciones específicas donde puedes inyectar componentes personalizados de React. Piense en ellos como espacios estructurados en una plantilla de pago que acepta componentes aprobados:

La zona de pruebas de extensión

Las extensiones se ejecutan en un entorno JavaScript aislado. Se comunican con el proceso de pago de Shopify a través de una API estandarizada (el paquete @shopify/ui-extensions) en lugar de manipulación directa de DOM. Esto significa:

• Las extensiones no pueden leer ni modificar otras partes de la página de pago
• Las extensiones no pueden acceder a las cookies del navegador, al almacenamiento local ni a JavaScript externo.
• Las solicitudes de red de extensiones deben pasar por los puntos finales aprobados de Shopify
• Las extensiones pueden leer datos de pago (contenido del carrito, información del cliente, selección de envío) a través de la API

Esta zona de pruebas es la razón por la que las extensiones son seguras para actualizarse: Shopify puede actualizar la plantilla de pago sin interrumpir las integraciones de las extensiones.

---

Configuración de su entorno de desarrollo de extensiones

Requisitos previos

• Tienda Shopify Plus con acceso a la tienda de desarrollo
• Node.js 18+ y npm/pnpm
• Shopify CLI 3.x

Configuración inicial

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

Esto crea una extensión de pago en el directorio de tu aplicación Shopify.

Estructura del archivo de extensión

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

La extensión mínima (TypeScript/React)

Una extensión de pago que muestra un mensaje personalizado:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

Nota: Los ejemplos de código son ilustrativos; La API de Shopify UI Extensions real evoluciona; siempre consulte la documentación actual para desarrolladores de Shopify.

---

Casos de uso de extensiones de alto valor

1. Visualización y canje de puntos de fidelidad

Muestre el saldo actual de puntos de fidelidad de un cliente y permítale aplicar puntos como descuento:

La extensión lee la identificación del cliente desde el contexto de pago, llama a la API de su plataforma de fidelización (Smile.io, LoyaltyLion) a través del proxy fetch de Shopify, muestra el saldo y, tras la confirmación, aplica un código de descuento a través de la API de descuento de Shopify.

Esto reemplaza un punto de fricción común: los clientes que quieren canjear puntos de fidelidad pero tienen que salir del proceso de pago para encontrar su código, lo que a menudo resulta en el abandono del carrito.

Impacto de conversión esperado: aumento del 3 al 8 % en la tasa de finalización del proceso de pago para los miembros del programa de fidelización que ven los puntos disponibles.

2. Mensaje de regalo y opciones de embalaje

Agregue un campo de mensaje de regalo y una opción de envoltura de regalo al finalizar la compra. La extensión:

• Muestra un botón de alternancia que dice "Esto es un regalo".
• Cuando está habilitado, revela un campo de texto para el mensaje de regalo.
• Opcionalmente muestra una venta adicional de envoltorio de regalo (precio fijo agregado como una línea de pedido)
• Guarda el mensaje como un atributo de pedido accesible en su flujo de trabajo de embalaje.

Impacto esperado: entre el 2% y el 5% de los pedidos utilizan mensajes de regalo; las ventas adicionales crean ingresos incrementales.

3. Campo de número de orden de compra B2B

Los compradores B2B requieren un número de orden de compra para sus sistemas de adquisiciones. Sin este campo, la fricción en el proceso de pago B2B es significativa:

La extensión agrega un campo de entrada de texto "Número de orden de compra", lo marca como requerido para clientes B2B (detectado a través de etiquetas de cliente) y guarda el número de orden de compra como un atributo de pedido. El número de orden de compra aparece en las facturas y en el administrador de pedidos.

Consideración de implementación: Detecte clientes B2B comprobando las etiquetas de los clientes mediante el gancho useCustomer.

4. Preferencia de fecha de entrega

Para los comerciantes que ofrecen múltiples opciones de velocidad de entrega, mostrar las fechas de entrega estimadas junto con las opciones de envío reduce la incertidumbre en la toma de decisiones y aumenta la selección de envío premium:

La extensión se conecta a purchase.checkout.shipping-option-item.render-after para inyectar un cálculo de fecha de entrega debajo de cada opción de envío. El cálculo de la fecha utiliza la fecha actual + los días de tránsito de envío (obtenidos de la API de su operador o codificados por zona de envío).

Impacto esperado: aumento del 8 al 15 % en la selección de envío rápido cuando se muestran las fechas de entrega precisas.

5. Venta adicional/venta cruzada al finalizar la compra

Un bloque de ventas adicionales de productos antes del botón "Completar pedido": la última oportunidad de aumentar el AOV antes de la compra:

La extensión lee el contenido del carrito, llama a la API de su motor de recomendaciones y muestra 1 o 2 productos complementarios relevantes con un solo clic para agregar al carrito. Los artículos agregados a través de la extensión actualizan el total de pago de Shopify en tiempo real.

Impacto esperado: entre el 5% y el 12% de los compradores agregan un artículo del bloque de ventas adicionales del proceso de pago.

---

Extensiones posteriores a la compra: la oportunidad de mayor retorno de la inversión

Las extensiones posteriores a la compra aparecen en la página de confirmación del pedido inmediatamente después de que el cliente completa el pago. El cliente se encuentra en un estado de máxima positividad: acaba de comprar algo que quería. Esta es la ubicación de mayor conversión para ofertas de ventas adicionales.

Venta adicional posterior a la compra con un clic

La extensión posterior a la compra puede ofrecer un complemento de producto que se cobra al método de pago ya autorizado del cliente sin un nuevo flujo de pago:

1. El cliente completa el pedido n.° 1234
2. Aparece la extensión: "Completa tu compra: agrega [Producto] por $19 (un clic, sin volver a ingresar la información de pago)"
3. El cliente acepta o rechaza
4. Si se acepta: crea un nuevo cargo y una nueva línea de pedido.
5. El cliente es redirigido a la página de estado del pedido final.

Impacto esperado: Tasa de aceptación del 8 al 20 % en ofertas posteriores a la compra bien configuradas al precio correcto (oferta de entre $10 y $30 para un pedido principal de más de $100).

Personalizaciones de la página de agradecimiento

Más allá de las ventas adicionales, la extensión de la página de agradecimiento puede:

• Mostrar los puntos de fidelidad obtenidos con este pedido
• Mostrar CTA del programa de referencia con un enlace para compartir previamente completado
• Oferta de actualización de suscripción para compradores únicos de productos consumibles.
• Solicitar seguimiento en redes sociales con incentivo.
• Mostrar instrucciones de cuidado del producto para compradores de categoría por primera vez.

---

Funciones de pago: extensiones lógicas del lado del servidor

Las funciones de pago son más poderosas que las extensiones de la interfaz de usuario: modifican la lógica central de cálculo del pago. Se ejecutan en el lado del servidor como WebAssembly compilado, lo que significa que son rápidos y no pueden ser ignorados por la manipulación del lado del cliente.

Funciones de descuento

Implemente una lógica de descuento compleja que el motor de descuento nativo de Shopify no admite:

Funciones de envío

Modifica cómo Shopify calcula y presenta las opciones de envío:

• Ocultar ciertos métodos de envío según el contenido del carrito (no hay envío estándar para artículos de gran tamaño)
• Inyecte tarifas de envío personalizadas de su proveedor de logística
• Aplicar recargos de envío para direcciones de entrega remotas
• Ofrecer envío gratuito una vez que el carrito alcance un umbral (calculado en tiempo real)

Funciones de personalización de pagos

Controla qué métodos de pago aparecen:

• Ocultar "Pago contra reembolso" para pedidos internacionales
• Mostrar solo transferencia bancaria para pedidos superiores a $10,000
• Ocultar PayPal para categorías de productos específicas (motivos de cumplimiento)
• Mostrar descripciones o íconos de métodos de pago personalizados

---

API de marca: personalización visual del pago

La API Checkout Branding permite una personalización visual integral sin tocar la lógica de pago:

Lo que puedes personalizar

Configure a través de Shopify Admin → Configuración → Pago y cuentas de clientes → Personalizar pago o mediante la API de marca directamente para la configuración programática en múltiples tiendas.

---

Migración desde checkout.liquid

Si tu tienda Shopify Plus usaba checkout.liquid (obsoleto en agosto de 2024, migración forzada completa), debes reconstruir las personalizaciones como extensiones. Personalizaciones comunes de checkout.liquid y sus equivalentes de extensión:

Limitaciones frente a checkout.liquid

Las extensiones no pueden replicar la inyección arbitraria de JavaScript ni la manipulación completa de la plantilla. Si su checkout.liquid contenía lógica condicional compleja o diseños de interfaz de usuario profundamente personalizados, algunas funciones pueden requerir reconstrucción con Checkout Functions o pueden no ser replicables en el marco de extensiones en absoluto.

---

Preguntas frecuentes

¿Las funciones de extensibilidad de pago funcionan en dispositivos móviles y de escritorio?

Sí. Las extensiones de interfaz de usuario se procesan utilizando los componentes de interfaz de usuario de Shopify, que son inherentemente responsivos. El proceso de pago de Shopify maneja la capacidad de respuesta del diseño: su extensión se muestra dentro de su espacio designado, que se adapta automáticamente al tamaño de la pantalla. No es necesario escribir diseños para dispositivos móviles y de escritorio por separado.

¿Pueden las extensiones ralentizar la experiencia de pago?

Las extensiones de UI se procesan en el servidor dentro de la infraestructura de Shopify; no requieren la ejecución de JavaScript del lado del cliente para el procesamiento inicial. Sin embargo, las extensiones que realizan llamadas API (para obtener saldos de fidelidad, datos de recomendaciones, etc.) agregan latencia de red. Mantenga las llamadas API por debajo de 200 ms almacenando en caché las respuestas y optimizando sus puntos finales. Shopify detecta las extensiones que ralentizan constantemente el proceso de pago y pueden desactivarse.

¿Cómo pruebo las extensiones de Checkout antes de publicarlas?

Usa la tienda de desarrollo de Shopify para probar extensiones sin afectar tu pago de producción. Shopify CLI proporciona un servidor de desarrollo local que muestra una vista previa de su extensión en el entorno real de pago de Shopify. Las extensiones también se pueden implementar en su tienda de producción en un estado "oculto", visible solo a través de una URL de vista previa, lo que resulta útil para la revisión de las partes interesadas antes del lanzamiento público.

¿Qué habilidades técnicas se requieren para crear extensiones de pago?

Las extensiones de interfaz de usuario requieren conocimientos de React y TypeScript. Las funciones de pago requieren Rust o JavaScript (compilado en WebAssembly a través de una cadena de herramientas proporcionada por Shopify). La mayoría de los desarrolladores con experiencia en React pueden crear extensiones de interfaz de usuario después de revisar la documentación de Shopify. Las funciones de pago son más exigentes técnicamente: un desarrollador senior con experiencia en backend es apropiado para funciones no triviales.

¿Las extensiones de pago están disponibles en planes de Shopify que no sean Plus?

Las extensiones posteriores a la compra y las extensiones de la página de agradecimiento están disponibles en todos los planes de Shopify. Las extensiones de la interfaz de usuario de pago (personalización durante el proceso de pago) son solo para Plus. Las funciones de pago son solo Plus. La API de marca para la personalización visual del proceso de pago es solo Plus (aunque la personalización básica del proceso de pago del editor de temas está disponible en todos los planes).

---

Próximos pasos

La extensibilidad del pago es la capacidad técnicamente más compleja del conjunto de funciones de Shopify Plus. El retorno de la inversión es claro: el canje de fidelidad, los campos B2B, las ventas adicionales posteriores a la compra y la transparencia de la fecha de entrega tienen un impacto de conversión documentado. La implementación requiere habilidad de desarrollo de React y familiaridad con las API de extensión de Shopify.

El equipo Shopify Plus de ECOSIRE crea y mantiene extensiones de pago para comerciantes que van desde marcas DTC hasta distribuidores B2B. Nuestros desarrolladores son socios certificados de Shopify Plus con experiencia específica en extensibilidad de pago, funciones de pago y API de marca.

Comuníquese para analizar sus requisitos de personalización del proceso de pago: evaluaremos sus necesidades y diseñaremos una arquitectura de extensión que aumente las conversiones sin comprometer el rendimiento del proceso de pago.