Configura Stripe en 7 pasos (o menos) y deja tranquilo a tu informático

pasarelas de pago, configura stripe

En un post anterior mi compañera Diana nos hablo de las  alternativas de pasarelas de pago existentes para nuestra eCommerce donde vimos las principales diferencias existentes para las mismas. Si eres dueño de una tienda online seguramente te sonarán sus beneficios, sacrificios y los problemas de activarlas en nuestra propia tienda online.

En este post vamos a explicar como puedes configurar Stripe en 7 pasos o menos sin necesidad alguna de conocimientos de programación. Esto es bastante útil cuando tenemos externalizado el servicio de asistencia informática para nuestra tienda online y nos facturan por horas o cada vez que les pedimos un servicio nuevo. La configuración que vamos a realizar es básica, por lo que para necesidades más complejas siempre recomendamos acudir estos profesionales.

Este tutorial está orientado a las tiendas online que usan WordPress y el Plugin Woocommerce, teniéndolo activado y configurado. Así mismo damos por sentado que ya dispones de tu cuenta de Stripe configurada pero no sabes como implementarlo en tu tienda online.

Deberes previos.

Para poder procesar pagos con Stripe debemos cumplir dos requisitos:

  1. Nuestro sitio web debe de tener activado el certificado de seguridad SSL. Para esto algunos alojamientos ofrecen soporte, ayudándote a instalarlos o haciéndolos ellos mismos directamente. También los hay gratuitos y de pago. ¿Cuál elegir? Siempre, siempre, siempre, el mejor que te puedas permitir. Son más una inversión de futuro que un coste a corto plazo. Por ejemplo, sin el SSL activado no podrás hacer campañas de Google Shooping en el futuro.
  2. Debemos de forzar a WordPress a que así sea. Para ello, debes ir, una vez activado a nivel de servidor el SSL a: 1. Ajustes; 2. Generales; 3. Dirección de WordPress (URL); 4. Dirección del sitio (URL). En la siguiente imagen vemos paso a paso el camino que debemos de recorrer y añadir la “s” en la zona donde se indica. Por motivos de confidencialidad el resto de datos no lo podemos mostrar, pero en ese campo es donde encuentras la url de tu página web.
Forzar SSL en WordPress
Imagen 1. Forzar SSL en WordPress

Después de este ajuste rápido seguimos los pasos que nos indique WordPress para terminar la configuración de SSL y nos metemos de lleno con Stripe.

Configura Stripe en 7 pasos (o menos)

Paso 1. Ir a la zona de la API de Stripe.

Quizá la primera vez que accedas a tu panel de control de Stripe estés un poco desorientado. En esta ocasión iremos directamente a la zona de la API de Stripe.

api stripe modo test danijurado.com

El punto 1 es lo que nos indica que estamos en un entorno de pruebas. La zona donde está el punto 2 se encuentra el interruptor para iniciar el modo live-test. De momento nos encontramos en la parte test. En el punto 3 nos encontramos los códigos que nos tendremos que llevar a WooCommerce para activar el uso de Stripe en nuestra web.

A continuación, al cambiarlo a modo “Live” observamos que el aviso de “test data” desaparece. Eso es porque ya estamos utilizando Stripe a pleno funcionamiento. Sólo queda algunas zonas de configuración.

api stripe modo live danijurado.com

Una vez que activamos la configuración “Live” debemos prestar atención a los token relacionados con la Publishable key y con la Secret Key. Estos tokens son los que tenemos que llevarnos directamente a Stripe dentro de WooCommerce.

Paso 2. Activa Stripe en WooCommerce.

Este paso es relativamente sencillo. Tenemos que ir a la zona de instalación de nuevos plugins y buscar el plugin: WooCommerce Stripe Gateway

Si usas el enlace anterior te descargarás el plugin y luego lo tendrás que subir a WordPress. Es sencillo pero nosotros, para este caso te explicaremos un método aún más fácil.

En la barra lateral de nuestra zona de administración de WordPress seleccionas Plugins (1) y en el submenú seleccionas Añadir nuevo (2). En el punto tres, tenemos una barra de búsqueda, aquí es donde deberás poner el nombre del complemento en cuestión. En este caso: WooCommerce Stripe Gateway. Sólo con copiar y pegar te debe aparecer en el primer resultado del que queremos (4). Hacemos clic en instalar ahora y en unos segundos sólo nos quedará activarlo para empezar a configurarlos.

activar stripe en woocommerce danijurado.com

Paso 3: Configura Stripe para WooCommerce.

Si es tu primera vez con WooCommerce y Stripe quizá te pierdas un poco para encontrar la configuración. No te preocupes, es tan sencillo como seguir los puntos 1, 2, 3 y 4. De esa forma primera entras en la zona de WooCommerce, a continuación seleccionas la parte de ajustes, vas a seleccionar “Finalizar Compras” y finalmente encuentras activada la sección de Stripe si has instalado y activado el plugin respectivo.

Stripe y WooCommerce

Los puntos 5, 6 y 7 son realmente sencillos de entender su funcionamiento. En el 5 activas/desactivas el funcionamiento de Stripe. El 6 es para asignarle un título a esa forma de cobro, por ejemplo, puedes editarlo para poner “paga fácilmente con tu tarjeta de crédito”. El 7 es para darle una descripción al título.

Paso 4. Configurar el cobro a través de Stripe.

Siguiendo la imagen anterior desde el punto 8 al 16 son los apartados a configurar para terminar de activar el cobro a través de Stripe.

Punto 8: Modo de pruebas. Activa el modo de prueba. Es decir el modo test. Aquí es donde ponemos en funcionamiento lo que señalabamos en el punto 1, “Test Data”, por parte de Stripe. Es perfecto para un entorno de prueba y si estás comenzando a utilizar Stripe por primera vez ya que, así, no te cobrará comisiones por las ventas de prueba que realices.

Punto 9: Claves de producción publicable y secreta. En estos campos es donde debemos copiar y pegar la Publishable Key y la Secret Key que nos facilita Stripe e indicamos en el punto 1.

¿Cómo diferenciar si la clave que tenemos desde Stripe está en modo Test o en Producción? Si la clave que tenemos disponible está en modo test deberá tener una estructura similar a la siguiente:

Modo test:

pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx

sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx

Modo producción:

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxx

sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxx

Por lo que la gran diferencia la tendremos en la indicación de test y live. Donde las “x” significan un código alfanumérico. pk y sk significan publishable key y secret key.

Punto 10: Descripción del estado. Sirve para establecer el asunto del cobro en la cuenta bancaria de tu cliente.

Punto 11: Captura. Literalmente, es para realizar el cobro inmediatamente. Salvo casos especiales, mejor cobrar lo más pronto posible, ¿no?

Punto 12: Ventana de Pago de Stripe. Puedes activar una ventana emergente para realizar el cobro de la venta, o que se embeba en el check out como aparecen en las imágenes a continuación.

Así es como queda sino activas la Ventana de pago de Stripe. La zona con el rectángulo rojo nos muestra la información que pide al usuario. Tan sencillo como número de la tarjeta, caducidad y CVC. Stripe y el check out

En si queréis activar la ventana de pago de Stripe os aparece la siguiente ventana pidiendo la misma información para el pago al usuario. Personalmente, nos gusta que esté dentro de la propia columna del checkout como en el caso anterior, ya que, de esta forma sale como pop-up.

Ventana de pago Stripe danijurado.com

Y los siguientes puntos, 13, 14, 15 y 16. Los dejaríamos, en esta ocasión, tal y como vienen por defecto. Si en el futuro quisiéramos implementar el servicio de Apple Pay, guardar tarjetas de crédito o activar los mensajes de depuración entraríamos a editar estos apartados.

Por supuesto, si tenéis algún tipo de duda comentadla en los comentarios y os responderemos en cuanto la leamos.