Durante una década, checkout.liquid fue la herramienta poderosa definitiva para los desarrolladores de Shopify Plus. Nos dio acceso HTML/JS sin formato al proceso de pago. Abusamos de ello. Realizamos “DOM Scraping” para ocultar las tarifas de envío. Usamos bucles setInterval para piratear obsequios. Inyectamos 50 píxeles de seguimiento diferentes que ralentizaron la carga de la página a 8 segundos. Era flexible, pero frágil e inseguro.

Shopify lo ha desaprobado. El reemplazo es Extensibilidad de pago. Esto no es sólo una actualización; es un cambio de paradigma. Estamos pasando de “trucos del lado del cliente” a “funciones del lado del servidor”. Estamos pasando de “jQuery” a “Rust & React”.

En Maison Code Paris, hemos migrado más de 50 comerciantes a Extensibility. Aquí está la guía de ingeniería.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

1. La arquitectura: poder en el espacio aislado

¿Por qué Shopify hizo esto?

Seguridad: Los scripts en checkout.liquid técnicamente podrían robar números de tarjetas de crédito. Las extensiones están protegidas.
Rendimiento: Las extensiones se ejecutan en un Web Worker o en el Servidor (WASM). El hilo principal permanece libre.
Actualice la seguridad: debido a que no puede tocar el DOM, Shopify puede rediseñar el pago por completo (por ejemplo, Pago en una página) y su extensión simplemente “funcionará”.

Hay dos componentes principales:

Extensiones de UI: Representación de píxeles en la pantalla (tipo React).
Funciones: Lógica de Negocios en el servidor (Rust/WASM).

2. Componentes de la interfaz de usuario: el modelo de “renderizado remoto”

Escribes código que se parece a React, pero no se procesa directamente en el DOM. Envía un árbol JSON a Shopify, que representa componentes nativos. Es por eso que no puedes usar <div> o classname. Debes usar las Primitivas de Shopify.

// extensiones/mensaje-regalo/Checkout.jsx
importar {
  reaccionar extensión,
  campo de texto,
  pila de bloques,
  texto,
  utilizarAplicarAtributoCambiar
} de '@shopify/ui-extensions-react/checkout';

exportar la extensión predeterminada ('purchase.checkout.block.render', () => <GiftMessage />);

función MensajeRegalo() {
  const applyChange = useApplyAttributeChange();

  const handleInput = (valor) => {
    aplicar cambio ({
      tipo: 'actualizarAtributo',
      clave: '_gift_note',
      valor: valor
    });
  };

  regresar (
    <Espaciado de BlockStack="apretado">
      <Text size="medium"weight="bold">¿Es esto un regalo?</Text>
      <TextField label="Nota de regalo" multilínea onChange={handleInput} />
    </BlockStack>
  );
}

Restricción de clave: No puede acceder a “ventana” o “documento”. Si necesita recuperar datos, debe utilizar el gancho useQuery proporcionado por el sandbox o realizar llamadas fetch a su propio proxy.

3. Funciones de Shopify: lógica al límite (óxido)

Esta es la parte más poderosa. Anteriormente, para hacer “Descuentos escalonados” (compre 5 y obtenga un 20 % de descuento), usaba Shopify Scripts (Ruby). Los scripts tenían errores, eran difíciles de probar y tenían límites estrictos de CPU. Las funciones de Shopify se compilan en WebAssembly (Wasm). Se ejecutan en <5ms.

Los escribimos en Rust porque es el lenguaje de mayor rendimiento para Wasm.

Estudio de caso: descuento por volumen

// src/run.rs
utilizar shopify_function::preludio::*;
utilizar shopify_function::Resultado;

#[función_shopify]
fn ejecutar(entrada: entrada::ResponseData) -> Resultado<salida::FunciónResultado> {
    let mut descuentos = vec![];

    para línea en input.cart.lines {
        let cantidad = línea.cantidad;
        
        // Definir lógica
        let porcentaje = si cantidad >= 50 {
            25.0 // Venta al por mayor
        } si no, si cantidad >= 10 {
            10.0 // A granel
        } más {
            0.0
        };

        si porcentaje > 0,0 {
            descuentos.push(Descuento {
                valor: ValorDeDescuento::Porcentaje(porcentaje),
                mensaje: formato!("Descuento por volumen ({}%)", porcentaje),
                objetivos: vec![Objetivo::ProductVariant(line.merchandise.id)],
            });
        }
    }

    Ok(salida::ResultadoFunción {
        descuentos,
        discount_application_strategy: DiscountApplicationStrategy::Máximo,
    })
}

Este binario se carga en Shopify. Se escala infinitamente.

4. Validación: bloqueo de pedidos incorrectos

Antiguamente, para evitar que P.O. Envío de caja, utilizamos validación JS. Los usuarios inteligentes (o bots) desactivaron JS y realizaron pedidos de todos modos. Ahora usamos Funciones de validación de carrito. Esto se ejecuta en el backend antes de que pueda continuar el pago.

# Consulta de entrada
consulta de entrada {
  carro {
    grupos de entrega {
      dirección de entrega {
        dirección1
        ciudad
        código de país
      }
    }
  }
}

Si la función Rust devuelve un error, el botón “Pagar ahora” está deshabilitado en el nivel API. Es imposible pasar por alto.

5. Píxeles web: la solución de seguimiento

Los equipos de marketing odian la migración porque “¡Perderemos nuestro seguimiento de GTM!”. En realidad, la extensibilidad corrige el seguimiento. La API de Web Pixels se suscribe a eventos de pago (checkout_completed, paid_info_submitted) en un entorno limitado seguro. Debido a que utiliza la API Browser Beacon, es sorprendentemente resistente a los bloqueadores de anuncios. Vemos un aumento del 15 % en las conversiones rastreadas después de migrar a Web Pixels.

// análisis.js
analítica.subscribe('checkout_completed', (evento) => {
  constante total = event.data.checkout.totalPrice.amount;
  // Enviar a GA4
  gtag('evento', 'compra', { valor: total });
});

6. Pago sin cabeza versus extensibilidad

Durante años, el “Pago sin cabeza” fue la única forma de lograr personalización. Pero era peligroso. Usted pasó a ser responsable del cumplimiento de PCI. La extensibilidad del proceso de pago elimina la necesidad del pago sin dispositivo. Obtienes el 90% de la flexibilidad (campos personalizados, ventas adicionales, lógica) con el 0% de mantenimiento. A menos que sea Nike o Apple, no necesita una configuración de pago personalizada. Cumplir con la plataforma (Shopify) le garantiza recibir actualizaciones de Apple Pay, PayPal y Shop Pay al instante.

7. Mercados globales: pago localizado

¿Vender en Francia o en EE. UU.?

EE.UU.: Necesita el menú desplegable “Estado”.
Francia: Necesita gestión “Cedex”.
Japón: Necesita “Prefectura”. Con extensibilidad, utilizamos la API de localización. Nuestras extensiones muestran diferentes campos según el context.market. Podemos mostrar una instrucción “Dejar en la puerta” para pedidos de EE. UU., pero ocultarla para pedidos alemanes (donde podría ser ilegal o poco común). Esta es una representación dinámica en el borde.

8. API de marca: no más CSS

Ya no puede editar checkout.css o checkout.scss. Utiliza la API de marca (GraphQL). Tu defines: *Colores Primarios.

Radios de esquina (redondeados vs cuadrados).
Fuentes (Subir WOFF2).
Diseños de encabezado/pie de página.

La “Vista del Escéptico”: “¡Pero no puedo mover el botón 5px hacia la izquierda!” Contrapunto: Bien. No deberías. Cada vez que pirateas el diseño, rompes la accesibilidad. Shopify ha gastado millones probando el diseño óptimo. Confía en la plataforma. Concéntrese en el Contenido y la Lógica, no en el relleno.

7. Extensiones posteriores a la compra: el momento dorado

La caja no termina cuando pagan. La Página de agradecimiento es el inmueble de mayor conversión en el comercio electrónico. Tasa de apertura: 100%. Atención: 100%. Con la extensibilidad, podemos inyectar aquí una “venta adicional con un clic”. “Compraste las Zapatillas. ¿Quieres el Limpiador por €10? (Sin costo de envío).” Debido a que tenemos el order_id y el paid_token, podemos procesar esta transacción sin volver a ingresar el CVV. Esta característica por sí sola paga el costo total de la migración en 1 mes.

8. Pruebas: el entorno Sandbox

En los viejos tiempos “líquidos”, probábamos en producción. Espantoso. Ahora tenemos el Partner Dashboard Sandbox. Puedes simular:

Red Lenta (3G).
Errores de API (Fallo de Inventario).
Diferentes Mercados (USD vs EUR). Escribimos Pruebas unitarias para nuestras funciones Rust. La “prueba de carga” se ejecuta en 10 ms. Demostramos que “Compre 5 y obtenga un 10 % de descuento” funciona matemáticamente antes de implementarlo en una tienda que procesa 1 millón de dólares al día.

9. Conclusión

La extensibilidad de pago es un filtro. Filtra a los “Hackers” y mantiene a los “Ingenieros”. Te obliga a escribir código limpio, modular y comprobable. El resultado es una experiencia de pago más rápida, segura y preparada para los próximos 10 años de comercio electrónico.

¿Pánico por la fecha límite?

Se acerca la fecha de desuso de checkout.liquid.

Reserve su Auditoría Migratoria. Lea sobre Precios B2B y Código limpio.

La migración de una tienda compleja lleva entre 4 y 8 semanas.

Auditoría: Exporte checkout.liquid y asigne cada bloque <script>.
- Google Ads -> Píxeles web.
- Lógica de Envío -> Funciones de Entrega.

Control deslizante de ventas adicionales -> Extensión de interfaz de usuario.

Priorizar: “Imprescindibles” frente a “basura heredada”. Por lo general, el 30% de los scripts son códigos inactivos.
Desarrollar: cree extensiones localmente usando shopify app dev.
Prueba A/B: Puede publicar el nuevo pago en estado “Borrador” y obtener una vista previa.
Ir en vivo: cambie la bandera en Configuración de pago.

8. Conclusión

¿Pánico por la fecha límite?

Se acerca la fecha de desuso de checkout.liquid.

Reserve su Auditoría Migratoria. Contrate a nuestros arquitectos.

Por qué Maison Code habla de esto

1. La arquitectura: poder en el espacio aislado

2. Componentes de la interfaz de usuario: el modelo de “renderizado remoto”

3. Funciones de Shopify: lógica al límite (óxido)

Estudio de caso: descuento por volumen

4. Validación: bloqueo de pedidos incorrectos

5. Píxeles web: la solución de seguimiento

6. Pago sin cabeza versus extensibilidad

7. Mercados globales: pago localizado

8. API de marca: no más CSS

7. Extensiones posteriores a la compra: el momento dorado

8. Pruebas: el entorno Sandbox

9. Conclusión

¿Pánico por la fecha límite?

8. Conclusión

¿Pánico por la fecha límite?

Privacidad