MAISON CODE .
/ Checkout · Shopify Plus · React · Extensions

Extensibilidad de pago: modificar lo no modificable

El final de `checkout.liquid`. Cómo usar las funciones de Shopify y las extensiones de UI para crear una lógica de pago personalizada de forma segura.

AB
Alex B.
Extensibilidad de pago: modificar lo no modificable

Durante una década, “checkout.liquid” fue el santo grial (y la pesadilla) de Shopify Plus. Permitía un control total, pero se rompía fácilmente y no era seguro actualizarlo. Shopify lo ha matado. El futuro es la Extensibilidad de pago.

La arquitectura: interfaz de usuario en espacio aislado

Ya no puedes escribir JavaScript arbitrario (riesgo de Magecart). Debe escribir Extensiones de UI que se ejecuten en un entorno limitado seguro. Shopify los procesa de forma nativa, lo que significa que son rápidos y están optimizados para dispositivos móviles.

gráfico TD
    Dev[Desarrollador] -->|Escribe| Aplicación[Aplicación Shopify]
    Aplicación -->|Implementaciones| Extensión[Extensión de la interfaz de usuario de pago]
    
    Shopify[Pagar en Shopify] -->|Cargas| Extensión
    Extensión -->|Renderizar| Componentes[Banner / Venta adicional / Entrada]
    
    subgrafo "La caja de arena"
    Componentes
    fin

Caso de uso 1: el bloque “Venta adicional”

Queremos ofrecer “Seguro de envío” por $2,99 justo encima del botón “Pagar ahora”.

// extensiones/seguro/src/Checkout.jsx
importar {
  reaccionar extensión,
  casilla de verificación,
  utilizarApplyCartLinesChange,
} de '@shopify/ui-extensions-react/checkout';

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

función aplicación() {
  const applyChange = useApplyCartLinesChange();
  
  regresar (
    <Casilla de verificación al cambiar={(marcada) => {
      si (marcado) {
        aplicar cambio ({
          escriba: 'addCartLine',
          ID de mercancía: 'gid://shopify/ProductVariant/12345',
          cantidad: 1,
        });
      }
    }}>
      Agregar protección de envío (+$2,99)
    </casilla de verificación>
  );
}

Esto es limpio, nativo y optimizado para la conversión.

Caso de uso 2: Lógica de validación (funciones)

Queremos bloquear los apartados de correos para el envío Fedex Express. Usamos Funciones de Shopify (Wasm) para hacer cumplir esta regla de validación en el lado del servidor. Es infinitamente más rápido y confiable que el antiguo Editor de secuencias de comandos.

Cronograma de migración

Si todavía estás en checkout.liquid, estás en el reloj. Shopify lo está desaprobando. La migración le da acceso a:

  • Pago en una página: 10 % más de conversión.
  • Integración de Shop Pay: sin problemas.
  • Rendimiento: tiempos de carga 2 veces más rápidos.

¿Sigues ejecutando el pago heredado?

No espere el aviso de cierre. Contrate a nuestros arquitectos.