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

Table of contents

• Payment popup
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Serving the app
  • API
    • niubiz-payment-form
      • Options
      • Example
  • Versioning
  • Authors
  • License

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 | [email protected] | | 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="[email protected]"
        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