INTEGRACIONES

React

React

React

Integra nuestro botón de pago con distintas soluciones creadas para tu comercio.

DESCRIPCIÓN

La integración de React con la plataforma de pagos de SlightPay te permitirá ofrecer una alternativa de pago para tus clientes. Con ella podrás ofrecer 4 cuotas de pago y así aumentar tus carritos de compra.


Te invitamos a seguir esta guía paso a paso para integrar tu sitio web con SlightPay.

ÍNDICE

  • Requisitos mínimos

  • Integración

requisitos mínimos

Para que realices los pasos de integración necesitas asegurarte de tener los siguientes requisitos:


  • Tener un sitio web desarrollado con React

  • Registar tu comercio en SlightPay

  • Mandar documentación especificada en el panel al terminar el registro

  • Tu comercio deberá estar aprobado en SlightPay

  • Tener un certificado SSL

INTEGRACIÓN

Paso 1: Incluir el script dentro de la carpeta public en el archivo index.html


Este script debe ir dentro de la etiqueta body como muestra las siguientes imágenes

Esta URL tiene un ID_COMMERCE y un KEY_COMMERCE, que deben ser sustituidas por el ID del comercio y su llave de producción encontrado en su panel de Administración de SlightPay en: https://comercios.SlightPay.com , el ID_COMMERCE se encuentra al hacer click en mi cuenta como muestra la siguiente imagen

Paso 2: Una vez seleccionado te aparecerá la siguiente pantalla en la cual deberás presionar Checkout

Paso 2: Una vez seleccionado te aparecerá la siguiente pantalla en la cual deberás presionar Checkout

Despliega el siguiente menu, donde se marca donde aparece ID_COMMERCE

Paso 3: Ingresa al Panel de comercios, en la sección lateral izquierda presiónanos en integración y posteriormente Api Keys, dentro de esta pantalla presionamos en Generar código para Shopify

Paso 3: Ingresa al Panel de comercios, en la sección lateral izquierda presiónanos en integración y posteriormente Api Keys, dentro de esta pantalla presionamos en Generar código para Shopify

En el menú lateral en la sección de integración, sub menú Api Keys. Y dar click en el texto "Ver llave de producción"

Paso 2: Definir los 5 estados como lo muestra la siguiente imagen:

  • 1. Subtotal – Se iniciará el estado en 0.

  • 2. Impuestos (tax) - Se recomienda iniciar el estado en 0 y después actualizarlo conforme a las reglas de negocio

  • 3. Costo de envio (shipping) - Se recomienda iniciar el estado en 0 y después actualizarlo conforme a su modelo de negocio

  • 4. Descuento (discuount) - Se recomienda iniciar el estado en 0 y después actualizarlo conforme a su modelo de negocio

  • 5. Productos (products) – En este ejemplo se muestran hardcodeados los productos finales que el usuario va comprar. Y el cual debe de conservar la estructura de objeto, el cual tiene como keys:

    • name: de tipo String.

    • amount: de tipo Number.

    • quantity: de tipo Number.

Paso 5: Una vez que hayas entrado te desplazas hacia abajo y verás un apartado donde se puede ingresar métodos manuales (Manual payment methods), das click en su combo box y después en Create custom payment method y rellenas el formulario.

Paso 5: Una vez que hayas entrado te desplazas hacia abajo y verás un apartado donde se puede ingresar métodos manuales (Manual payment methods), das click en su combo box y después en Create custom payment method y rellenas el formulario.

Los estados tienen una iniciación por default que estos puedes ser actualizados conforme a las reglas de negocio que se manejen. En este caso los estados de tax, shipping y discount tiene un valor para simular una compra.


*El único que se debe de conservar inicializado en 0 es el estado de subtotal ya que este será calculado por el botón de SlightPay.


Paso 3: Instancia del Boton

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

La instancia del botón maneja dos callback: onSucces y onError.

  • onSucces: función que se ejecuta cuando todo sale correcto al momento de la compra, para el desarrollador debe saber que acción ejecutar, ya sea alerta de que la compra se realizó con éxito, pasar a otra pantalla, mandar a llamar a un servicio, o alguna otra acción que continúe con el flujo de su comercio.

  • onError: Ahí deberán colocar ya sea una alerta donde expresen cual fue el error, recuerden que si el error tiene que ver con algo de SlightPay por favor comuníquese con soporte@SlightPay.com

  • products: Es el vacío de los productos aplicando códigos de descuento

  • tax: Aplica el cargo de los impuestos

  • shippingFee: Aplica el cargo del envío de el o los productos.

  • idDiscountCode: Viene de los códigos de promoción que maneja SlightPay.

  • orderId: La orden de compra que se va a manejar.

  • urlPurchase: SlightPay lo usa para visualizar que el botón se haya mostrado correctamente el cual puede ir como string ‘https://www.mycomercio.com’ o con window.location.href

  • type: Define el tema del botón, actualmente SlightPay maneja 2 temas, blue y default, el cual uno seria azul y el otro blanco.


Paso 4: Cargar la función de loadButtton(), esta función se encarga de vincular los códigos de descuento cada que nuestro componente se Renderice, como muestra la siguiente imagen.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Como se muestra en la imagen de arriba tenemos 2 funciones una llamada calcTotalAmount() y applyDiscount().


  • calcTotalAmount(): Da como referencia el total de la compra ya que SlightPay permite realizar compras de un monto no mayor a $6000 MX.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

applyDiscount(): función que permite aplicar descuentos por parte de su e-commerce y este toma como referencia el estado de discount.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 5: Renderizar el componente del botón, el cual tiene estilos definidos para su correcta visualización. El cual se encuenta en el enlace del codigo fuente de gitHub y tiene la siguiente estructura.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

Paso 6: Aparecerá un formulario el cual deberás rellenar.

fin del proceso

Visualizar que el componente se haya cargado de manera correcta en la pagina que esta conectada con los métodos de pago. Y se muestra de la siguiente manera.

¿Tienes alguna duda?

¿Tienes alguna duda?

¿Tienes alguna duda?

Lorem ipsum dolor sit amet consectetur. Consectetur ut laoreet nibh lectus scelerisque mauris. Enim vulputate amet in fames netus porta.

PlenoPay

Seamless Payment S.A. de C.V

Av. Gomez Morin 404, Villas de Aragon, 66273 San Pedro Garza García, N.L

PlenoPay® Todos los derechos reservados

Atención a clientes:
Atención por Whatsapp 24 horas los 7 días de la semana. 


Atención a comercios:
Atención a comercios por soporte@plenopay.com de 8 a.m. a 9:30 p.m. de lunes a domingo.

PlenoPay

Seamless Payment S.A. de C.V

Av. Gomez Morin 404, Villas de Aragon, 66273 San Pedro Garza García, N.L

PlenoPay® Todos los derechos reservados

Atención a clientes:
Atención por Whatsapp 24 horas los 7 días de la semana. 


Atención a comercios:
Atención a comercios por soporte@plenopay.com de 8 a.m. a 9:30 p.m. de lunes a domingo.

PlenoPay

Seamless Payment S.A. de C.V

Av. Gomez Morin 404, Villas de Aragon, 66273 San Pedro Garza García, N.L

PlenoPay® Todos los derechos reservados

Atención a clientes:
Atención por Whatsapp 24 horas los 7 días de la semana. 


Atención a comercios:
Atención a comercios por soporte@plenopay.com de 8 a.m. a 9:30 p.m. de lunes a domingo.

PlenoPay

Seamless Payment S.A. de C.V

Av. Gomez Morin 404, Villas de Aragon, 66273 San Pedro Garza García, N.L

PlenoPay® Todos los derechos reservados

Atención a clientes:
Atención por Whatsapp 24 horas los 7 días de la semana. 


Atención a comercios:
Atención a comercios por soporte@plenopay.com de 8 a.m. a 9:30 p.m. de lunes a domingo.