Niubizform NPM

Payment popup

Allows to show a modal with the payment gateway

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Payment popup

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install niubiz-payment-form

Or if you prefer using Yarn:

$ yarn add niubiz-payment-form

Usage

Serving the app

$ npm start

API

niubiz-payment-form

Options

CAMPO	TIPO	LONGITUD	OBLIGATORIO	DESCRIPCION	EJEMPLO
src	string	Max 500	SI	Script js para mostrar el modal de la pasarela	https://static-content-qas.vnforapps.com/vTokenSandbox/js/checkout.js
action	string	Max 500	SI	Indica el URL al que debe hacer post el formulario. Ejemplo: https://www.dominio.com/paginaRespuesta	https://www.dominio.com/paginaRespuesta
sessiontoken	string	64	SI	Identificador único por transacción generado por el sistema (atributo “sessionKey” en respuesta de API del paso 2	bb32b3b3781b49b2fa1f1c963d5e61b486f51467e52e38313efb0d0cefeb723a
channel	string	Max 45	SI	Canal de registro. Valor por defecto: “paycard”	paycard
merchantid	string	9	SI	Código de comercio creado al momento de la afiliación	456879856
purchasenumber	string	Max 12	SI	Número de Pedido, este valor debe ser creado por el comercio y es único por intento de autorización	123456789
amount	string	8	SI	Importe referencial al pago de la transacción. Este importe es finalmente usado en el proceso de autorización de la transacción. Formato ####.## (Dos decimales separados por punto) Ejemplo: 1000.00	500.0
cardholdername	string	Max 25	SI	Nombres del titular de la tarjeta. No se permite caracteres especiales	Jhon
cardholderlastname	string	Max 25	SI	Apellidos del titular de la tarjeta. No se permite caracteres especiales	Doe
cardholderemail	string	Max 25	SI	Correo electrónico del titular de la tarjeta. No se permite caracteres especiales	jhon@doe.com
expirationminutes	string	–	SI	Tiempo de duración de la sesión de tokenización expresado en minutos	5
timeouturl	string	Max 500	SI	Dirección URL de la aplicación del comercio para redirección en caso de que exista un timeout durante el pago	https://www.dominio.com/timeout
merchantlogo	string	Max 500	Condicional	URL del logo del comercio. Altamente recomendable incluir un logo, caso contrario se mostrará el nombre del comercio. El tamaño sugerido es 187x40px. Nota: Si no inserta este valor, por no contar con una imagen como logo, es obligatorio colocar un texto en el campo “merchantname”	https://www.dominio.com/logo.png
merchantname	string	Max 25	Condicional	Nombre del comercio (se mostrará en caso se omita el logo en el campo “merchantlogo”). Nota: Si no inserta este valor es obligatorio colocar la dirección URL de una imagen en el campo: “merchantlogo”	ACME
formbuttoncolor	string	7	NO	Define el color del botón en el formulario, por default es el color “rojo”	#9c27b0
formbuttontext	string	7	NO	Define el texto que se mostrará en el botón del formulario, por default es el texto “pagar”	Register
formbackgroundcolor	string	7	NO	Define el color de fondo en el formulario, por default es el color “gris”	#ddd
formbuttontextcolor	string	7	NO	Define el color del texto del botón, por default es el color “blanco”	#fff
showamount	string	Max 5	NO	Indica si se muestra en el botón del formulario algún importe referencial al pago de la transacción en caso se ejecute la autorización en ese momento. Valor por defecto: TRUE. Otros valores:TRUE,FALSE	FALSE

Example

import { FC } from "react";
import { NiubizPopupForm } from 'niubiz-payment-form';

const MyComponent: FC = () => (
    <div>
      <NiubizPopupForm
        action="https://test.free.beeceptor.com/my/api/path"
        amount="500"
        cardholderemail="jhon@doe.com"
        cardholderlastname="Doe"
        cardholdername="Jhon"
        channel="paycard"
        expirationminutes="20"
        formbackgroundcolor="#e0e0e0"
        formbuttoncolor="#E3350D"
        formbuttontext="Register"
        formbuttontextcolor="#FFF"
        hidexbutton="FALSE"
        merchantid="456879856"
        merchantlogo="https://cdn.worldvectorlogo.com/logos/pokemon-5.svg"
        merchantname="ACME"
        purchasenumber="2020103907"
        sessiontoken="e548d4aa9782c13bc04ab77ece24f1d0f466890d1717772a2803c69f928f5617"
        showamount="FALSE"
        src="https://static-content-qas.vnforapps.com/vTokenSandbox/js/checkout.js"
        timeouturl="about:blank"
        usertoken="3e44576b-1ea3-4ecc-95b4-6e672c5920fe"
      />
    </div>
  );

export default MyComponent;

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

JohnDoe - Initial work - JohnDoe

See also the list of contributors who participated in this project.

License

MIT License

@infinitebrahmanuniverse/nolb-niu @everything-registry/sub-chunk-2293 @zalastax/nolb-niu

0.0.0

2 years ago

niubizform v0.0.0