Ayuda › Montar tu checkout

Conectar tu tienda de Shopify

Son dos conexiones distintas, y conviene no confundirlas:

Van separadas a propósito: si una falla, la otra sigue.

12

1. El dominio .myshopify.com de tu tienda.
2. El Client secret de tu app. Solo se enseña el final, para que lo reconozcas; para cambiarlo, generas uno nuevo en el Dev Dashboard.

Los nombres de los botones de Shopify que aparecen abajo están tal como los escribe su documentación, en inglés. Si tienes tu panel en español, los verás traducidos, pero el camino es el mismo.

La app custom

La app la creas tú, con tu cuenta, en el Dev Dashboard de la organización dueña de la tienda. No es una app del App Store: es tuya, y el token que nos das solo sirve para tu tienda.

1. Apps › Create app › Start from Dev Dashboard, con un nombre tuyo.
2. Versions › una versión nueva, con la App URL por defecto, la Webhooks API version y los Scopes que el panel te da listos para copiar. Luego, Release.
3. Install app › elige tu tienda › Install.
4. App settings › copia el Client ID y el Client secret y pégalos en VMAPAY, junto con tu dominio .myshopify.com.

Ponle el nombre de tu marca, no «VMAPAY». Ese nombre sale en la cronología de cada pedido que creemos en tu Shopify, a la vista de quien mire el pedido.

La app y la tienda tienen que estar en la misma organización. Tener la tienda no la mete en ella: se comprueba en el Dev Dashboard, en Dev stores.

Los permisos te los lista el panel uno a uno, con para qué sirve cada uno. No pedimos ninguno que no usemos.

El script del tema

Es una sola línea al final de la cabecera de tu tema. Desde que está, el botón de pagar de tu tienda lleva a tu checkout.

<script src="https://<host>/s/v1.js?k=<tu clave>" defer></script>

La línea entera, con tu clave ya dentro, te la da el panel: cópiala de ahí.

Que la ponga la app

En el alta tienes «Instalarlo por mí»: con el permiso de temas que ya le diste a tu app, la escribimos nosotros en tu tema. Es lo recomendado, y no solo por comodidad: si la línea desaparece, la volvemos a poner.

Y si desconectas la app o archivas la tienda, la quitamos.

Ponerla a mano

Es el respaldo, y funciona igual de bien:

1. En tu panel de Shopify, Online Store › Themes › el botón de los tres puntos › Edit code.
2. Abre layout/theme.liquid y pega la línea justo antes de </head>.
3. Guarda.

1

1. La línea que va en tu tema, con tu clave ya dentro: cópiala de aquí.

Duplica tu tema antes de tocarlo, que es lo que recomienda Shopify. Si algo sale mal, vuelves a la copia.

Por qué puede desaparecer

Al actualizar un tema, Shopify quita del tema nuevo los cambios de código que no sean compatibles con la actualización. Tu línea es uno de esos cambios. Lo mismo pasa si cambias de tema: el nuevo no la tiene.

Por eso la vigilamos: miramos tu escaparate cada cierto tiempo y, si la línea ya no está, te avisamos. Si dejaste que la pusiera la app, la volvemos a poner sin que tengas que hacer nada.

Qué hace, y qué no

La línea no cambia el aspecto de tu tienda ni ralentiza su carga: va con defer, así que el navegador pinta la página primero. Si un comprador llega a pulsar «Pagar» antes de que cargue, va al checkout de Shopify y compra igual.

La clave que lleva (k=) es pública por diseño: está a la vista en el HTML de tu escaparate y no da acceso a nada. Copiarla en otra tienda no sirve: el carrito se lee siempre en la tienda a la que pertenece esa clave.

Mientras montas todo esto

Tus clientes siguen pagando en el checkout de Shopify, como siempre. El cambio ocurre cuando pones el script y activas el checkout, que es el último paso del alta.