{"id":73242,"date":"2024-02-10T18:34:13","date_gmt":"2024-02-10T17:34:13","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=73242&#038;preview=true&#038;preview_id=73242"},"modified":"2024-02-12T08:57:55","modified_gmt":"2024-02-12T07:57:55","slug":"integracion-de-pasarelas-de-pago","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/","title":{"rendered":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico"},"content":{"rendered":"<p>En el pasado, los sitios web est\u00e1ticos sol\u00edan incluir im\u00e1genes y descripciones de los productos, incitando a los clientes a hacer pedidos por correo electr\u00f3nico o tel\u00e9fono. Hoy, sin embargo, los clientes esperan una experiencia m\u00e1s din\u00e1mica con s\u00f3lidas funcionalidades de comercio electr\u00f3nico. Esto agiliza el proceso de compra, animando a los usuarios a completar las transacciones en tu sitio en lugar de explorar las opciones de la competencia.<\/p>\n<p>A\u00f1adir una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico es bastante sencillo. Las interfaces de programaci\u00f3n de aplicaciones (API) y las arquitecturas sin servidor (serverless) te permiten integrar funciones de comercio electr\u00f3nico en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-sitio-web-estatico\/\">sitios web est\u00e1ticos<\/a>, permitiendo a tu empresa aceptar transacciones directamente.<\/p>\n<p>Este tutorial explora c\u00f3mo a\u00f1adir las pasarelas de pago <a href=\"https:\/\/kinsta.com\/es\/blog\/stripe-vs-paypal\/\">PayPal y Stripe<\/a> al sitio est\u00e1tico de una tienda de env\u00edo de flores. Sigue los pasos para aprender a a\u00f1adir estas funciones a tu sitio web y obtener nuevas oportunidades para impulsar las ventas online.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>C\u00f3mo empezar<\/h2>\n<p>Antes de sumergirte en los pasos para integrar una pasarela de pago y un proceso de pago en tu sitio est\u00e1tico, vamos a sentar las bases para una implementaci\u00f3n fluida y satisfactoria.<\/p>\n<ol start=\"1\">\n<li>Descarga y despliega <a href=\"https:\/\/github.com\/contentlab-io\/Integrate-a-Checkout-and-Payment-Gateway-with-Your-Static-Site\">este c\u00f3digo de ejemplo de sitio est\u00e1tico<\/a> en <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">el alojamiento de sitios est\u00e1ticos de Kinsta<\/a>.<\/li>\n<li>Reg\u00edstrate para obtener una <a href=\"https:\/\/www.paypal.com\/kn\/welcome\/signup\" target=\"_blank\" rel=\"noopener noreferrer\">cuenta de PayPal<\/a>, optando por una cuenta de empresa, ya que es m\u00e1s adecuada para este tutorial. Este tipo de cuenta es necesaria para probar los botones que integres. Tras registrarte, a\u00f1ade la informaci\u00f3n de tu empresa y vincula una cuenta bancaria. Una vez verificada tu cuenta, podr\u00e1s obtener las credenciales de la API en el <a href=\"https:\/\/developer.paypal.com\/home\" target=\"_blank\" rel=\"noopener noreferrer\">portal del Programador de PayPal<\/a> para su uso posterior.<\/li>\n<li>Crea una <a href=\"https:\/\/dashboard.stripe.com\/register\">cuenta de Stripe<\/a>, introduciendo tus datos empresariales y bancarios. Stripe ofrece una activaci\u00f3n r\u00e1pida de la cuenta, lo que resulta ventajoso para este proyecto. Una vez que tu cuenta est\u00e9 activa, podr\u00e1s acceder inmediatamente al <a href=\"https:\/\/dashboard.stripe.com\/login\">panel de Stripe<\/a>. Aqu\u00ed es donde recuperas tu clave API, un componente crucial necesario en los pasos posteriores.<\/li>\n<\/ol>\n<h3>Revisa el sitio est\u00e1tico de muestra<\/h3>\n<p>Este tutorial utiliza un sitio est\u00e1tico preexistente para mostrar la integraci\u00f3n de las funciones de pago de PayPal y Stripe. A pesar de su contenido est\u00e1tico, el sitio web de muestra imita una florister\u00eda online.<\/p>\n<p><a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">La infraestructura de alojamiento de sitios est\u00e1ticos de Kinsta<\/a> proporciona un entorno eficaz para implementar y probar las funciones de pago de PayPal y Stripe para crear un sitio Web est\u00e1tico m\u00e1s sofisticado y atractivo.<\/p>\n<p>Despu\u00e9s de desplegar tu sitio en Kinsta, ve a la p\u00e1gina de inicio. Haz clic en el bot\u00f3n <strong>ORDER INQUIRY (CONSULTAR PEDIDO)<\/strong>.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/flower-shop-page.png\" alt=\"Una p\u00e1gina web de una florister\u00eda con una imagen de un ramo, un bot\u00f3n de solicitud de pedido y enlaces a p\u00e1ginas y al carrito de la compra\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Ejemplo de p\u00e1gina de inicio de un sitio con un bot\u00f3n de <strong>CONSULTA DE<\/strong> <strong>PEDIDO<\/strong>.<\/figcaption><\/figure>\n<p>Selecciona un producto disponible en la p\u00e1gina del <strong>Cat\u00e1logo de Flores \u2014 <\/strong>la Rosa Turca.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/catalog-of-flowers.png\" alt=\"El cat\u00e1logo de flores, con varios ramos, sus tama\u00f1os y precios, cada uno con un icono de carrito de la compra para a\u00f1adirlo al carrito\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Ejemplo de p\u00e1gina del cat\u00e1logo del sitio con varias opciones de flores.<\/figcaption><\/figure>\n<p>Esta acci\u00f3n te lleva a la p\u00e1gina de detalles del producto, donde est\u00e1n implementados los botones de pago para PayPal y Stripe.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/turkish-rose-product.png\" alt=\"Opciones para pedir la Rosa Turca. Hay opciones de tama\u00f1o y color, elecci\u00f3n de entrega por mensajero o recogida, y el precio\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">P\u00e1gina de productos del sitio de muestra.<\/figcaption><\/figure>\n<h2>C\u00f3mo integrar el proceso de pago de PayPal en tu sitio est\u00e1tico<\/h2>\n<p>A\u00f1adir un proceso de pago PayPal ofrece a tus clientes una forma de pago segura y de confianza y agiliza el proceso de transacci\u00f3n, mejorando la experiencia del usuario. Esta integraci\u00f3n puede aumentar significativamente la funcionalidad de tu sitio y la satisfacci\u00f3n del cliente.<\/p>\n<p>A continuaci\u00f3n te explicamos c\u00f3mo integrar el pago con PayPal en tu sitio est\u00e1tico:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n en el <a href=\"https:\/\/developer.paypal.com\/dashboard\/\" target=\"_blank\" rel=\"noopener noreferrer\">Panel de Control del Programador de PayPal<\/a>.<\/li>\n<li>En el panel, ve a la secci\u00f3n <strong>Aplicaciones y credenciales<\/strong>. Activa el modo <strong>Sandbox<\/strong> y haz clic en <strong>Crear Aplicaci\u00f3n<\/strong>.<\/li>\n<li>En el formulario, da un nombre a tu aplicaci\u00f3n (por ejemplo, Kinsta Gateway Demo). Selecciona <strong>Vendedor<\/strong> como tipo y haz clic en <strong>Crear Aplicaci\u00f3n<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/create-app-paypal.png\" alt=\"El formulario Crear App en PayPal con un campo para el nombre de la app, botones de opci\u00f3n para elegir el tipo como vendedor o plataforma, un campo para la cuenta sandbox\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Formulario Crear Aplicaci\u00f3n de PayPal.<\/figcaption><\/figure><\/li>\n<li>Copia el <strong>ID de Cliente<\/strong> de la secci\u00f3n de <strong>credenciales de API<\/strong> para crear m\u00e1s tarde un bot\u00f3n de pago de PayPal.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/kinsta-gateway-demo.png\" alt=\"Credenciales en PayPal para la app de demostraci\u00f3n Kinsta Gateway. La secci\u00f3n de credenciales de la API tiene el nombre de la aplicaci\u00f3n, el ID de cliente y la clave secreta. La informaci\u00f3n de la cuenta sandbox contiene la URL, la regi\u00f3n, el correo electr\u00f3nico y la contrase\u00f1a.\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Credenciales de la aplicaci\u00f3n de PayPal.<\/figcaption><\/figure><\/li>\n<li>Despl\u00e1zate por la p\u00e1gina de la aplicaci\u00f3n para revisar otros ajustes. Los valores predeterminados est\u00e1n bien para este tutorial. Haz clic en <strong>Guardar Cambios<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/paypal-app-features.png\" alt=\"Las caracter\u00edsticas de la app de PayPal con casillas de verificaci\u00f3n incluyen Aceptar pagos para Vault, SDK de Pago Nativo, Suscripciones, Facturaci\u00f3n y PayPal Here. Las opciones de casillas de verificaci\u00f3n bajo Otras caracter\u00edsticas incluyen Pagos, Disputas de clientes, Iniciar sesi\u00f3n con PayPal y B\u00fasqueda de transacciones.\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Funciones de la aplicaci\u00f3n de PayPal.<\/figcaption><\/figure><\/li>\n<li>A continuaci\u00f3n, integra el proceso de pago de PayPal en tu sitio est\u00e1tico. Crea un bot\u00f3n de pago utilizando el <a href=\"https:\/\/developer.paypal.com\/beta\/apm-beta\/additional-information\/js-sdk-params-payment-fields\/\">SDK JavaScript de m\u00e9todos de pago alternativos (APM)<\/a> de PayPal. Te permite integrar varias formas de pago en un sitio est\u00e1tico sin necesidad de configurar una aplicaci\u00f3n back-end. A\u00f1ade el siguiente c\u00f3digo JavaScript al archivo <strong>product.html<\/strong> justo antes de la etiqueta de cierre <code>&lt;\/body&gt;<\/code>. Sustituye <code>YOUR_CLIENT_ID<\/code> por tu Id. de cliente de PayPal. Es posible que tambi\u00e9n tengas que sustituir la divisa <code>USD<\/code> por la divisa que acepte tu cuenta PayPal.\n<pre><code class=\"language-html\">&lt;!-- PAYPAL BUTTON SCRIPT--&gt;\n&lt;script   \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID&currency=USD\"   \ndata-sdk-integration-source=\"button-factory\"&gt;&lt;\/script&gt;\n&lt;script&gt;\npaypal.Buttons({\n\tcreateOrder: function(data, actions) {\n\t\/\/ Set up the transaction\n\treturn actions.order.create({\n\t\tpurchase_units: [{\n\t\tamount: {\n\t\t\tvalue: '1.00'\n\t\t}\n\t\t}]\n\t});\n\t},\n\tonApprove: function(data, actions) {\n\t\/\/ Capture the funds from the transaction\n\treturn actions.order.capture().then(function(details) {\n\t\t\/\/ Show a success message to the buyer\n\t\talert('Transaction completed by ' + details.payer.name.given_name);\n\t});\n\t}\n}).render('#paypal-button-container');\n&lt;\/script&gt;\n&lt;!-- PAYPAL BUTTON SCRIPT--&gt;<\/code><\/pre>\n<p>La funci\u00f3n <code>paypal.Buttons<\/code> define dos funciones:<\/p>\n<ul>\n<li><strong><code>createOrder<\/code><\/strong> \u2014 Configura los detalles de la transacci\u00f3n, como el importe de la compra (1,00 USD en este caso).<\/li>\n<li><strong><code>onApprove<\/code><\/strong> \u2014 Gestiona la aprobaci\u00f3n de la transacci\u00f3n, capturando los fondos y mostrando un mensaje de \u00e9xito al comprador. En el c\u00f3digo anterior, estamos utilizando la funci\u00f3n <code>alert()<\/code>.<\/li>\n<\/ul>\n<p>Por \u00faltimo, la funci\u00f3n <code>render<\/code> especifica que el bot\u00f3n de PayPal debe mostrarse dentro del <code>&lt;div&gt;<\/code> existente con el ID <code>paypal-button-container<\/code>.<\/p>\n<p>Ahora tienes PayPal integrado en tu sitio est\u00e1tico.<\/li>\n<\/ol>\n<h2>C\u00f3mo integrar el proceso de pago de Stripe en tu sitio est\u00e1tico<\/h2>\n<p>Stripe es una plataforma tecnol\u00f3gica muy utilizada que ofrece soluciones de procesamiento de pagos para empresas de todos los tama\u00f1os. A continuaci\u00f3n te explicamos c\u00f3mo a\u00f1adir el pago con Stripe a tu sitio est\u00e1tico:<\/p>\n<ol start=\"1\">\n<li>Antes de implementar el bot\u00f3n de pago de Stripe, puedes gestionar los productos y precios a trav\u00e9s de una API o del <a href=\"https:\/\/stripe.com\/dashboard\">panel de control de Stripe<\/a>. Para utilizar el panel de control, \u00e1brelo, selecciona el<strong> Modo Prueba<\/strong> y haz clic en <strong>Cat\u00e1logo de Productos<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-catalog-page.png\" alt=\"P\u00e1gina del cat\u00e1logo de productos con opciones para listar todos los productos, los disponibles o los archivados, y un bot\u00f3n para a\u00f1adir un producto.\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">P\u00e1gina Cat\u00e1logo de productos de Stripe.<\/figcaption><\/figure><\/li>\n<li>Haz clic en el bot\u00f3n <strong>+ A\u00f1adir Producto<\/strong> para abrir el formulario <strong>A\u00f1adir un producto<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/add-a-product-fields.png\" alt=\"A\u00f1ade una opci\u00f3n de producto con campos para el nombre y la descripci\u00f3n, detalles de la imagen con la opci\u00f3n de eliminarla, un enlace para m\u00e1s opciones, botones para elegir recurrente o \u00fanico, un campo para el importe y un cuadro desplegable para la divisa, y un enlace para opciones avanzadas de precios\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">P\u00e1gina <strong>A\u00f1adir un producto<\/strong> de Stripe.<\/figcaption><\/figure><\/li>\n<li>Introduce los detalles de tu producto en los campos siguientes:\n<ul>\n<li><strong>Nombre<\/strong>: Rosa Turca<\/li>\n<li><strong>Descripci\u00f3n<\/strong>: Se trata de una hermosa Rosa Turca<\/li>\n<li><strong>Imagen<\/strong>: (Sube el archivo <strong><a href=\"https:\/\/github.com\/contentlab-io\/Kinsta-Integrate-a-Checkout-and-Payment-Gateway-with-Your-Static-Site\/blob\/main\/images\/turkishrose.png\" target=\"_blank\" rel=\"noopener noreferrer\">imagesturkishrose.png<\/a><\/strong> de muestra)<\/li>\n<li><strong>Modelo de pago<\/strong>: Pago \u00fanico<\/li>\n<li><strong>Importe: <\/strong>1.00 $<\/li>\n<li><strong>Divisa<\/strong>: USD (o la moneda que elijas)<\/li>\n<\/ul>\n<\/li>\n<li>Haz clic en <strong>A\u00f1adir producto<\/strong>.<\/li>\n<li>En la lista de la p\u00e1gina <strong>Cat\u00e1logo de productos<\/strong>, selecciona el producto <strong>Rosa Turca<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-catalog-listings.png\" alt=\"Listados del cat\u00e1logo de productos que incluyen la Rosa Turca, su imagen en miniatura, el precio, la moneda, la fecha de creaci\u00f3n y la fecha de actualizaci\u00f3n\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Stripe Detalles del cat\u00e1logo de productos.<\/figcaption><\/figure><\/li>\n<li>En la secci\u00f3n <strong>Precios<\/strong> de los productos, haz clic en <strong>Crear enlace de pago<\/strong>. Revisa las opciones del producto y aseg\u00farate de que la cantidad es <code>1<\/code>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/image11.png\" alt=\"Detalles del producto Rosa Turca, incluido el precio, la moneda, la fecha de actualizaci\u00f3n, el nombre, la descripci\u00f3n y la imagen, y las opciones de precio, incluido el ID de la aplicaci\u00f3n y un bot\u00f3n para crear un enlace de pago\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Detalles del producto Stripe para la Rosa Turca.<\/figcaption><\/figure><\/li>\n<li>Haz clic en <strong>Crear enlace<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/image6.png\" alt=\"Opciones para crear un enlace de pago. Incluye el producto, un campo para la cantidad y una casilla de verificaci\u00f3n para permitir que los clientes ajusten la cantidad, un enlace para a\u00f1adir otro producto, opciones para recopilar direcciones, n\u00fameros de tel\u00e9fono y campos personalizados de los clientes, un men\u00fa para opciones avanzadas y una vista previa del aspecto que tendr\u00e1 la p\u00e1gina de pago para ese producto, incluidos los detalles de Apple Pay\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Detalles de pago del producto de Stripe.<\/figcaption><\/figure><\/li>\n<li>En la p\u00e1gina <strong>ENLACE DE PAGO<\/strong>, haz clic en el<strong> bot\u00f3n Comprar<\/strong>.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/payment-link-details.png\" alt=\"Detalles del enlace de pago, incluidos el nombre y el precio del producto y la opci\u00f3n de copiar el enlace de pago, el c\u00f3digo QR, el bot\u00f3n de compra y otros\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Detalles de la p\u00e1gina ENLACE DE PAGO de Stripe.<\/figcaption><\/figure><\/li>\n<li>Cuando aparezca el panel del <strong>bot\u00f3n Comprar<\/strong>, podr\u00e1s ver el c\u00f3digo generado para el bot\u00f3n de pago. Elige el Dise\u00f1o del<strong> bot\u00f3n<\/strong>, activa <strong>Cambiar texto del bot\u00f3n<\/strong> y escribe \u00abComprar con Stripe\u00bb en el campo <strong>Cambiar texto del bot\u00f3n<\/strong>. A continuaci\u00f3n, haz clic en <strong>Guardar cambios y copiar c\u00f3digo<\/strong> para copiar el c\u00f3digo generado en el portapapeles de tu sistema operativo.\n<p><figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/buy-button-options.png\" alt=\"Opciones del bot\u00f3n de compra con el c\u00f3digo visible a la izquierda, y una vista previa a la derecha. Las opciones incluyen configurarlo como tarjeta o bot\u00f3n, el idioma, un conmutador para cambiar el texto del bot\u00f3n y un campo para escribir el texto\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Formulario de Stripe para crear un bot\u00f3n de compra.<\/figcaption><\/figure><\/li>\n<li>Pega el c\u00f3digo copiado en el archivo <strong>product.html<\/strong> del c\u00f3digo de ejemplo antes de la etiqueta de cierre <code>&lt;\/body&gt;<\/code> (entre los comentarios <code>STRIPE BUTTON BEGIN<\/code> y <code>STRIPE BUTTON END<\/code> ), de forma similar a PayPal.\n<pre><code class=\"language-html\">&lt;!-- STRIPE BUTTON BEGIN --&gt;\n&lt;script&gt; async\n  src=\"https:\/\/js.stripe.com\/v3\/buy-button.js\"&gt;\n&lt;\/script&gt;\n\n&lt;stripe-buy-button&gt;\n  buy-button-id=\"BUY_BUTTON_ID\"\n  publishable-key=\"PUBLISHABLE_KEY\"\n&gt;\n&lt;\/stripe-buy-button&gt;\n&lt;!-- STRIPE BUTTON END --&gt;<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>Cuando hayas terminado de implementar los botones de pago de PayPal y Stripe, despliega el c\u00f3digo del sitio est\u00e1tico en tu entorno de alojamiento de sitios est\u00e1ticos de Kinsta.<\/p>\n<h2>Prueba el proceso de pago<\/h2>\n<p>Abre la p\u00e1gina de detalles del producto del sitio est\u00e1tico de demostraci\u00f3n. Aseg\u00farate de que los botones de PayPal y Stripe se muestran correctamente.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/site-checkout-page.png\" alt=\"La p\u00e1gina de pago del sitio de muestra muestra la imagen, el nombre, el precio y las opciones de tama\u00f1o, color y entrega; el usuario puede hacer clic en PayPal, Tarjeta de d\u00e9bito o cr\u00e9dito con PayPal o Comprar con Stripe.\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">P\u00e1gina de producto del sitio de muestra con botones de pago para PayPal y Stripe.<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n de pago de PayPal. Se abrir\u00e1 un cuadro de di\u00e1logo de inicio de sesi\u00f3n en el que tu cliente se autenticar\u00e1 con PayPal para realizar la compra.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/log-in-paypal.png\" alt=\"Opciones para iniciar sesi\u00f3n en PayPal o crear una cuenta\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Flujo de PayPal con opciones para identificarse o registrarse.<\/figcaption><\/figure>\n<p>Si encuentras problemas de inicio de sesi\u00f3n en esta fase, puede deberse a que est\u00e1s probando con una cuenta personal en lugar de una cuenta de empresa.<\/p>\n<p>Alternativamente, los clientes pueden elegir el bot\u00f3n <strong>Tarjeta de D\u00e9bito o Cr\u00e9dito<\/strong> de PayPal. Haz clic en esa opci\u00f3n para ver el cuadro de di\u00e1logo. Introduce algunos datos de la cuenta.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/pay-with-debit-card.png\" alt=\"Opciones para pagar con tarjeta de d\u00e9bito o cr\u00e9dito, incluyendo un men\u00fa de pa\u00eds o regi\u00f3n, un campo para el correo electr\u00f3nico, un men\u00fa de tipo de tel\u00e9fono y un campo para el n\u00famero, botones de opci\u00f3n para elegir d\u00e9bito o cr\u00e9dito y un campo para el n\u00famero de tarjeta\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Flujo de PayPal con opciones para utilizar una tarjeta de d\u00e9bito o de cr\u00e9dito.<\/figcaption><\/figure>\n<p>PayPal deber\u00eda presentar los datos de tu pedido y de tu cuenta. Haz clic en <strong>Completar Compra<\/strong>.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/payment-details-paypal.png\" alt=\"Detalles de pago con coste, direcci\u00f3n de env\u00edo y un enlace para cambiarla, lista de tarjetas de d\u00e9bito o cr\u00e9dito a elegir, una casilla de verificaci\u00f3n para que sea el m\u00e9todo preferido, un enlace para a\u00f1adir una tarjeta y un bot\u00f3n para completar la compra.\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Flujo de PayPal con la confirmaci\u00f3n de la compra.<\/figcaption><\/figure>\n<p>Cuando PayPal aprueba la transacci\u00f3n, el c\u00f3digo JavaScript del cliente muestra una alerta inform\u00e1ndote de que la transacci\u00f3n se ha completado. Esta alerta es para fines de desarrollo y depuraci\u00f3n \u2014 no debes utilizarla en c\u00f3digo de producci\u00f3n.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/notification-for-complete.png\" alt=\"Una ventana emergente notifica al usuario que la transacci\u00f3n se ha completado\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Flujo de PayPal con una alerta de transacci\u00f3n completada.<\/figcaption><\/figure>\n<p>Para verificar esa transacci\u00f3n, abre el <a href=\"https:\/\/www.paypal.com\/mep\/dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">panel de PayPal para Empresas<\/a>. Haz clic en <strong>Actividad &gt; Todas las Transacciones <\/strong>para mostrar una lista detallada de todas las transacciones recientes.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/paypal-payment-details-info.png\" alt=\"Detalles de las transacciones en PayPal, incluyendo la fecha, el tipo, el nombre, el pago, el importe bruto, la tarifa, el importe neto y un men\u00fa para acciones como a\u00f1adir seguimiento\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Detalles de la transacci\u00f3n de PayPal para empresas.<\/figcaption><\/figure>\n<p>En la p\u00e1gina <strong>product.html<\/strong> del sitio de flores, tambi\u00e9n puedes probar el flujo de pago de Stripe pulsando el bot\u00f3n <strong>Comprar con Stripe<\/strong>. Esta acci\u00f3n activa el cuadro de di\u00e1logo de Stripe que contiene los detalles del producto y las opciones de pago, incluidos Google Pay, Link y los pagos con tarjeta de cr\u00e9dito.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/stripe-payment.png\" alt=\"Stripe muestra la informaci\u00f3n del producto y las opciones para Google Pay y Pago con enlace\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Opciones de pago del flujo de Stripe.<\/figcaption><\/figure>\n<p>A modo de demostraci\u00f3n, elige Google Pay. Un cuadro de di\u00e1logo te pide que confirmes la compra utilizando Google Pay con una tarjeta de tu lista, como una Mastercard guardada.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/google-pay-details.png\" alt=\"Detalles del pago con Google Pay, incluido un men\u00fa desplegable para elegir la tarjeta, el precio y un bot\u00f3n de pago\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Flujo de Stripe cuando se utiliza Google Pay.<\/figcaption><\/figure>\n<p>Haz clic en <strong>PAGAR<\/strong>. Si tiene \u00e9xito, Stripe presenta al cliente la confirmaci\u00f3n de la compra.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/purchase-confirmation.png\" alt=\"Confirmaci\u00f3n de compra de Stripe. A la izquierda est\u00e1 la informaci\u00f3n del producto. A la derecha est\u00e1 la confirmaci\u00f3n\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">Confirmaci\u00f3n de compra de Stripe.<\/figcaption><\/figure>\n<p>En el Panel de Stripe, abre la pesta\u00f1a <strong>Pagos<\/strong>. Muestra los detalles de la transacci\u00f3n completada, incluyendo el importe, la moneda, la descripci\u00f3n, el cliente y la fecha.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/list-of-payments-via-stripe.png\" alt=\"Lista de pagos a trav\u00e9s de stripe, incluyendo el importe, la moneda, el \u00e9xito, la descripci\u00f3n, el cliente y la fecha\" width=\"960\" height=\"514\"><figcaption class=\"wp-caption-text\">P\u00e1gina de detalles de pago de Stripe.<\/figcaption><\/figure>\n<h3>C\u00f3mo solucionar problemas en el proceso de pago<\/h3>\n<p>A continuaci\u00f3n se indican algunos pasos para diagnosticar y resolver los errores encontrados durante las pruebas de pago:<\/p>\n<ul>\n<li>Corrige la configuraci\u00f3n de la pasarela de pago.<\/li>\n<li>Valida tu <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-certificados-ssl\/\">certificado SSL<\/a>.<\/li>\n<li>Comprueba la compatibilidad del navegador del cliente.<\/li>\n<li>Aplica un tratamiento de errores adecuado.<\/li>\n<li>Prueba el proceso de pago en varios entornos.<\/li>\n<li>Utiliza t\u00e9cnicas de registro y monitorizaci\u00f3n.<\/li>\n<\/ul>\n<h2>Resumen<\/h2>\n<p>Ya has integrado botones de pago para las pasarelas de pago PayPal y Stripe en una florister\u00eda online de ejemplo alojada en Kinsta. Puedes utilizar las mismas t\u00e9cnicas para a\u00f1adir opciones de pago a tus otros sitios web est\u00e1ticos, animando a los clientes a comprar tus productos y aumentando las ventas.<\/p>\n<p>El <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">servicio de alojamiento de sitios est\u00e1ticos<\/a> de Kinsta ofrece un terreno de juego perfecto para los desarrolladores que quieran adentrarse en el din\u00e1mico mundo del comercio electr\u00f3nico y la integraci\u00f3n de pagos. Su s\u00f3lida infraestructura garantiza una carga r\u00e1pida de las p\u00e1ginas, lo que favorece una experiencia de compra online sin problemas.<\/p>\n<p>Junto con el servicio de alojamiento de sitios est\u00e1ticos, Kinsta tambi\u00e9n ofrece un <a href=\"https:\/\/sevalla.com\/application-hosting\/\">servicio de alojamiento de Aplicaciones<\/a> dise\u00f1ado para aplicaciones m\u00e1s din\u00e1micas \u2014 como aplicaciones web que necesitan procesamiento del lado del servidor, interacciones con bases de datos y otras funcionalidades complejas.<\/p>\n<p><em>Transforma tu sitio est\u00e1tico en una experiencia din\u00e1mica con pasarelas de pago como PayPal y Stripe. \u00bfQu\u00e9 otro servicio prefieres o con cu\u00e1l tienes experiencia? Comp\u00e1rtelo en los comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el pasado, los sitios web est\u00e1ticos sol\u00edan incluir im\u00e1genes y descripciones de los productos, incitando a los clientes a hacer pedidos por correo electr\u00f3nico o &#8230;<\/p>\n","protected":false},"author":199,"featured_media":73243,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1337],"class_list":["post-73242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-herramientas-de-desarrollo-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico<\/title>\n<meta name=\"description\" content=\"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico\" \/>\n<meta property=\"og:description\" content=\"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-10T17:34:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-12T07:57:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico\",\"datePublished\":\"2024-02-10T17:34:13+00:00\",\"dateModified\":\"2024-02-12T07:57:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\"},\"wordCount\":2262,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\",\"name\":\"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\",\"datePublished\":\"2024-02-10T17:34:13+00:00\",\"dateModified\":\"2024-02-12T07:57:55+00:00\",\"description\":\"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico","description":"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico","og_description":"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.","og_url":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-02-10T17:34:13+00:00","article_modified_time":"2024-02-12T07:57:55+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico","datePublished":"2024-02-10T17:34:13+00:00","dateModified":"2024-02-12T07:57:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/"},"wordCount":2262,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/","url":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/","name":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","datePublished":"2024-02-10T17:34:13+00:00","dateModified":"2024-02-12T07:57:55+00:00","description":"Aprende a a\u00f1adir las pasarelas de pago de PayPal y Stripe a tu sitio est\u00e1tico para realizar transacciones de comercio electr\u00f3nico sin problemas.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/how-to-integrate-a-payment-gateway-with-your-static-site.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/integracion-de-pasarelas-de-pago\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo integrar una pasarela de pago y el proceso de pago en tu sitio est\u00e1tico"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=73242"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73242\/revisions"}],"predecessor-version":[{"id":73554,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73242\/revisions\/73554"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73242\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/73243"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=73242"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=73242"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=73242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}