Credenciales y entornos#
Configura las credenciales para tu Visualizer SDK storefront y, si es necesario, para el Product Import API. Leer la documentación pública no crea credenciales ni otorga acceso a una tienda.
¿A dónde pertenece cada credencial?#
| Integración | Credencial | Dónde pertenece |
|---|---|---|
| SDK del storefront | Shop ID y Publishable Key | Atributos del script del SDK del storefront |
| Product Import API | Client ID y Client Secret | Tu backend o un trabajo seguro del lado del servidor |
Un Publishable Key está pensado para el navegador. Un Client Secret debe permanecer en tu servidor. Nunca los pegues en un tema, Markdown público, bundle del cliente ni captura de soporte.
Obtener y configurar credenciales#
Abre el panel de control del comerciante, selecciona la tienda correcta y revisa la integración y configuración de SDK. Sigue las instrucciones de incorporación para Client ID y Client Secret.
Configurar Allowed Origins (CORS)#
Antes de probar o publicar el SDK, abre Panel de control → Configuración para la tienda correcta y busca Allowed Origins (CORS).
- Introduce los orígenes de los storefronts que cargarán el SDK, separados por comas. Por ejemplo:
https://example.com, https://www.example.com, https://shop.example.com. - Usa el protocolo y el nombre de host, más el puerto cuando corresponda, sin ruta de página, cadena de consulta ni fragmento. Añade también tu origen de vista previa o staging si pruebas el SDK allí; usa
http://localhost:3000solo cuando ese sea tu origen de prueba local real. - Haz clic en Save, luego recarga el storefront y prueba el SDK de nuevo.
Comprueba la URL real que visitan los clientes: https://example.com y https://www.example.com son orígenes distintos. Una prueba local o de vista previa exitosa no garantiza que el origen publicado esté configurado.
Reemplazar valores de ejemplo#
Los ejemplos utilizan marcadores de posición como <SHOP_ID>, <PUBLISHABLE_KEY> y <YOUR_CLIENT_SECRET>. Reemplácelos únicamente en el entorno previsto. Los ejemplos HTML pueden codificar los corchetes angulares como < y >; reemplace el marcador de posición completo, incluida dicha codificación.
Entornos del SDK y la Importación de Productos#
El navegador carga https://sdk.ideal.house/sdk.js con el Shop ID y Publishable Key de la misma tienda. La Product Import API continúa usando https://sdkapi.ideal.house, con su autenticación del lado del servidor documentada.
Configura los orígenes de tu storefront de vista previa y producción por separado, como se describe arriba. Usa productos de prueba preparados antes de publicar y completa después la lista de verificación de lanzamiento.