Ayuda

Configurar la tienda

Todos los pasos para abrir tu tienda, en orden: primero en tu cuenta de Stripe, adonde llegan los pagos, y luego en tu panel de Tilefolio. Calcula una media hora, más el tiempo que Stripe tarde en revisar tu cuenta. Solo puede hacerlo el propietario de la web: los editores no ven estos ajustes.

Antes de empezar

• Tu web está suscrita: la tienda se abre tras el primer pago, no durante la prueba gratuita. Puedes prepararlo todo (Stripe, ajustes, productos) durante la prueba.
• Ten abiertas dos pestañas: tu panel de Stripe (dashboard.stripe.com) y tu panel de Tilefolio. Copiarás tres cosas de uno a otro: una clave (Stripe → Tilefolio), la dirección del webhook (Tilefolio → Stripe) y el secreto de firma del webhook (Stripe → Tilefolio).
• Los menús de Stripe se nombran abajo como Stripe los muestra en inglés, y los campos del panel como los muestra el panel, con su significado entre paréntesis. Su lugar puede cambiar un poco cuando Stripe actualiza su panel.

1. En Stripe: la cuenta

1. Crea una cuenta en stripe.com, o usa la que tienes. Elige el país donde estás establecido tú, o tu empresa: fija la moneda de tus transferencias y las comisiones de Stripe.
2. Activa los pagos: Stripe pide qué vendes, tu identidad, tu dirección y la cuenta bancaria donde ingresar el dinero. Mientras la cuenta no esté activada, solo acepta pagos de prueba.
3. En Settings > Business > Public details, revisa el nombre público de la empresa, el correo de asistencia y el descriptor de extracto (lo que el comprador ve en el extracto de su tarjeta): aparecen en la página de pago y en los recibos.
4. En Settings > Branding (opcional): tu logotipo, tu icono y tus colores, para la página de pago y los recibos de Stripe.
5. En Settings > Payment methods: las formas de pago que se ofrecen. Las tarjetas están activas; activa Apple Pay, Google Pay, y TWINT si vendes en CHF. La página de pago ofrece las que convienen al comprador y a la moneda.
6. En Settings > Customer emails: activa Successful payments (pagos realizados), para que cada comprador reciba un recibo. Tilefolio no envía ningún correo al comprador.

2. En Stripe: la clave restringida

La clave permite a tu web pedir a Stripe una página de pago. Una clave restringida solo puede hacer lo que la tienda necesita, al contrario que la clave secreta, que puede hacerlo todo en tu cuenta.

1. Abre Developers > API keys y luego Create restricted key. Si Stripe pregunta cómo vas a usarla, elige configurar tú mismo sus permisos.
2. Dale un nombre, por ejemplo «Tilefolio».
3. Deja todos los permisos en None, salvo:
   • Checkout Sessions: Write (para crear la página de pago, y leer sus líneas una vez pagada);
   • Products y Prices: Read (para leer los productos de cada pedido pagado).
4. Haz clic en Create key, confirma con el código que te envía Stripe y copia la clave: empieza por rk_live_. Stripe solo la muestra una vez: si la pierdes, crea otra.

Una clave secreta (sk_live_…) también funciona, pero da acceso completo a tu cuenta de Stripe: mejor la clave restringida.

3. En Tilefolio: pegar la clave y copiar la dirección del webhook

1. En tu panel, en la página de inicio, haz clic en Edit my site (abre Site settings, los ajustes de la web).
2. Abre el panel Shop del formulario y pega la clave en Stripe: secret key (la clave secreta) y haz clic en Save. La clave se queda en el panel, nunca en la web; los espacios copiados por error se quitan.
3. A la derecha del formulario, el recuadro Shop muestra la Stripe webhook address (dirección del webhook) de tu web, de la forma https://…/api/shop/stripe-webhook/…. Haz clic en Copy.

Esta dirección es propia de tu web: no cambia si más adelante añades un nombre de dominio.

4. En Stripe: el webhook

El webhook es la forma en que Stripe avisa a tu web de que un pedido está pagado: sin él, los pagos se hacen pero ningún pedido aparece en tu panel y el stock no baja.

1. Abre Developers > Webhooks y luego Add destination.
2. Eventos de: Your account. Deja la versión de la API que propone Stripe.
3. Selecciona exactamente estos dos eventos (escribe su nombre en el campo de búsqueda):
   • checkout.session.completed: se ha pagado una página de pago;
   • checkout.session.async_payment_succeeded: un pago que llega más tarde (domiciliación bancaria…) se ha completado.
   Tu web ignora los demás eventos: no hace falta añadirlos.
4. Tipo de destino: Webhook endpoint. En Endpoint URL, pega la dirección copiada del recuadro Shop y crea el destino.
5. En la página del destino, muestra su Signing secret (secreto de firma) y cópialo: empieza por whsec_.

5. En Tilefolio: los ajustes de la tienda

De vuelta en Site settings:

1. Stripe: webhook secret (el secreto del webhook): pega el secreto de firma (whsec_…).
2. Shop: currency (moneda): CHF, EUR, USD o GBP. Es la moneda de todos tus precios y gastos de envío; el comprador paga en ella.
3. Shop: shipping countries (países de envío): adonde envías, con códigos de país de dos letras separados por comas (ES, FR, DE, US…), o EU para toda la Unión Europea. Cada uno puede ir seguido de sus propios gastos de envío. Por ejemplo ES, EU 15, FR 12, US 25: Francia por 12, el resto de la UE por 15, Estados Unidos por 25, España por los gastos de envío de abajo. Un país escrito solo prevalece sobre EU. Hace falta al menos un país. En el carrito, el comprador elige su país, y la página de Stripe solo acepta una dirección en ese país.
4. Shop: shipping cost (gastos de envío): los de los países que no tienen los suyos, se suman una vez a cada pedido sea cual sea su tamaño. 0 o vacío: envío gratuito.
5. Shop: free shipping from (envío gratuito a partir de, opcional): a partir de este importe de compra, el envío es gratuito en todas partes. Vacío: nunca.
6. Shop: contact e-mail (correo de contacto, opcional): se muestra en el carrito, para que puedan escribirte antes de comprar. Vacío: el carrito remite a tu página de contacto.
7. Haz clic en Save. Si un valor es incorrecto, se rechaza el guardado con un mensaje que dice cuál: una clave que no empieza por rk_live_, rk_test_, sk_live_ o sk_test_, un secreto que no empieza por whsec_, o un código de país desconocido.

Y si quieres: Menu: shop cambia el nombre del menú de la tienda («Boutique» por defecto), y Home page (página de inicio) con products abre tu web en la tienda (ver Páginas, menús y textos).

6. Añadir tus productos

Crea tus teselas de producto, con su precio, su stock, sus fotos y su descripción: ver Añadir un producto. Antes de que se abra la tienda, ya aparecen en tu web con su precio, y su botón indica «Buying is currently disabled».

7. Pedirnos que abramos la tienda

1. Escribe a contact@tilefolio.com desde la dirección de correo de tu cuenta, con la dirección de tu web y lo que piensas vender.
2. Comprobamos que la clave, el secreto del webhook y al menos un país de envío están configurados, y abrimos la tienda. El carrito aparece entonces en lo alto de tu web.

Con la tienda abierta, la clave, el secreto del webhook y los países de envío se pueden cambiar, pero no vaciar. Para cerrar la tienda, escríbenos: el carrito y las teselas de producto desaparecen de la web; los pedidos anteriores se quedan en el panel.

8. Comprobar con un primer pedido

1. En tu web, pon un producto barato en el carrito, elige tu país y paga.
2. Tras el pago, llegas a la página de agradecimiento de tu web y Stripe te envía el recibo por correo.
3. En tu panel, el pedido aparece en Orders en pocos segundos, y el stock del producto ha bajado en uno.
4. Reembólsalo desde Stripe (Payments, busca el pago, Refund) y vuelve a subir el stock en el producto.

Probarlo antes con el modo de prueba de Stripe

Para probar la tienda sin dinero real, haz los pasos 2 y 4 en el modo de prueba de Stripe (un entorno de prueba): la clave empieza entonces por rk_test_, y el webhook de prueba tiene su propio secreto de firma. Indícalo en tu correo. Paga con la tarjeta de prueba 4242 4242 4242 4242, cualquier fecha futura y cualquier código. Cuando todo funcione, sustituye la clave y el secreto del webhook por los del modo real: una clave y un secreto de modos distintos no funcionan juntos.

Si algo no funciona

¿Sigues atascado? Escríbenos a contact@tilefolio.com, sin enviar nunca tu clave ni tus secretos por correo.