Demo ReactJS - Cargo único

Nuestra Demo es una guia para una rápida integración con Culqi.

Nuestro Demo ReactJS, es compatible con la V2.0 del Culqi API, con el cual tendrás la posibilidad de integrarte con el API de tokens, cargos, clientes, tarjetas, y órdenes

Integra Custom Checkout y Culqi 3DS; con el cual tienes la posiblidad de probar el proceso de órdenes de pago, cargos únicos y creación de cards.

Requisitos

  • Nuestra Demo es compatible con React 17.0+.
  • Debes tener tus llaves de producción o integración.
  • Si aun no te afilias a Culqi, lo puedes hacer desde aquí.
  • Para encriptar el payload debes generar un id y llave RSA ingresando a tu CulqiPanel > Desarrollo > RSA Keys.

Repositorio

Puedes descargar el código fuente de la Demo desde:

Nombre Repositorio
Demo ReactJS https://github.com/culqi/culqi-demos/tree/Reactjs-checkout-charge

Instalación

Ejecuta composer install en una terminal en la raiz del proyecto

BASH
npm install

Configuración

Primero se tiene que modificar los valores del archivo .env que se encuentra en la raíz del proyecto. Puedes activar o desactivar la encriptación.

.ENV
VITE_APP_CULQI_PUBLICKEY=<<LLAVE PUBLICA>>
VITE_APP_CULQI_SECRETKEY=<<LLAVE PRIVADA>>
VITE_APP_CULQI_RSA_ID=<<LLAVE PÚBLICA RSA ID>>
VITE_APP_CULQI_RSA_PUBLICKEY=<<LLAVE PÚBLICA RSA>>
VITE_APP_CULQI_ACTIVE_ENCRYPT=false

Inicialización de la demo

Ejecuta el siguiente comando:

BASH
npm run dev

Pruebas

Antes de activar tu tienda en producción, te recomendamos realizar pruebas de integración. Así garantizarás un correcto despliegue.

Para visualizar el frontend de la demo, ingresa a la siguiente URL:

  • Para probar la demo escribe la ruta: http://localhost/5173

Con la demo puedes realizar pruebas de:

  • Creación y confirmación de órdenes de pago.
  • Cargos únicos con 3DS.
  • Creación de cards.
AnteriorKotlin
SiguienteAngular