Credit Card Gazin Payment

Made with create-react-library

Requisitos

• Node14.16.1 (Windows)

Instalação (desenvolvimento)

• Clone este repositório

$ git clone https://gitlab.gazin.com.br/labs/gazin-payment-component.git

• Acesse a pasta do projeto

$ cd gazin-payment-component

• Antes de rodar o projeto, verificar se a versão do node é a versão 16

$ node -v

• Se a versão do node for diferente de 16, rode o comando abaixo. Caso já esteja na versão 16, prosseguir para o próximo passo

$ nvm use 16

• Instalar dependências

$ yarn

• Gerar componente para teste

$ yarn start

• Iniciar o exemplo

• Instalar depêndencias da pasta example

$ cd example && yarn

• OBS: Criar o arquivo .env com as configurações necessárias

• Rodar exemplo

yarn start

Publicar alterações (Gerar release)

Com as alteraçoes já na master gerar a tag conforme o nivel (patch | minor | major)

$ npm version patch

example 0.0.1

ou

$ npm version minor

example 0.1.1

ou

$ npm version major

example 1.1.1

Após a tag ser gerada, executar o seguinte comando para subir a tag e gerar a nova release

$ git push origin master --follow-tag

Uso em projetos

Instalação

• with npm

$ echo @labs:registry=https://gitlab.gazin.com.br/api/v4/packages/npm/ >> .npmrc

$ npm i @labs/gazin-payment-component

• with yarn

$ echo \"@labs:registry\" \"https://gitlab.gazin.com.br/api/v4/packages/npm/\" >> .yarnrc

$ yarn add @labs/gazin-payment-component

Dados gerados pelo componente

export declare type IInsertionTypeCardNumber = 'Colado' | 'Digitado';

export declare type IBrowser = {
    cookiesaccepted: boolean;
    hostname: string;
    ipaddress: string;
    type: string;
    useragent: string;
    screenheight: number;
    screenwidth: number;
    colordepth: number;
    javaenabled: boolean;
    timezoneoffset: number;
    language: string;
};

export declare type ICreditCardData = {
    cardNumber: string;
    holder: string;
    expirationdate: string;
    securitycode: string;
    brand: string;
    insertiontypecardnumber: IInsertionTypeCardNumber;
    savecard: null;
    encryptedcardnumber: string;
    encryptedexpirymonth: string;
    encryptedexpiryyear: string;
    encryptedsecuritycode: string;
};

export declare type IPayment = {
    installments: string;
};

export declare type IFingerPrint = {
    fingerprintid: number;
    devicefingerprint: string;
    uuid: string;
};

export declare type IPaymentData = {
    creditcard: ICreditCardData;
    payment: IPayment;
    fingerPrint: IFingerPrint;
    browserData: IBrowser;
};

Exemplo

• React

import React from 'react';

import { Payment, PaymentError } from '@labs/gazin-payment-component';
import { IPaymentData } from '@labs/gazin-payment-component/dist/types';
import '@labs/gazin-payment-component/dist/index.css';

declare type Installment = {
    value: number;
    number: number;
    hasInterest: boolean;
};

declare type IAmount = {
    value: number;
    installments: Installment[];
};

const amount: IAmount = {
    value: 120,
    installments: [
        {
            value: 120,
            number: 1,
            hasInterest: false
        },
        {
            value: 24,
            number: 5,
            hasInterest: true
        }
    ]
};

const Example = () => {
    const onSubmit = (data: IPaymentData) => {
        console.log('App data', data);
    };
    const onError = (error: PaymentError) => {
        const { internalMessage, message, code } = error;
        console.log('internalMessage', internalMessage);
        console.log('message', message);
        console.log('code', code);
    };

    return (
        <Payment
            environment='homolog'
            encryptKey={REACT_APP_PAGADOR_PUBLIC_KEY}
            onSubmit={onSubmit}
            onError={onError}
            merchantaccount={}//informar o merchantaccount => Type number
            split={}//informa se é split ou não => Type boolean
            config={{
                paymentTypeTitle: 'Cartão de crédito',
                checkoutButtonTitle: 'PAGAR COM CARTÃO DE CRÉDITO',
                checkoutButtonVisible: false
            }}
        />
    );
};

• NEXT

// card-payment.tsx
import React from 'react';
import { Payment } from '@labs/gazin-payment-component';

export default function ComponenteCartao(props) {
    return <Payment {...props} />;
}

// payment.tsx
import dynamic from 'next/dynamic';

const CardPayment = dynamic(() => import('./cartao'), { ssr: false });

import { PaymentError } from '@labs/gazin-payment-component';
import { IPaymentData } from '@labs/gazin-payment-component/dist/types';
import '@labs/gazin-payment-component/dist/index.css';

declare type Installment = {
    value: number;
    number: number;
    hasInterest: boolean;
};

declare type IAmount = {
    value: number;
    installments: Installment[];
};

const amount: IAmount = {
    value: 120,
    installments: [
        {
            value: 120,
            number: 1,
            hasInterest: false
        },
        {
            value: 24,
            number: 5,
            hasInterest: true
        }
    ]
};

const Example = () => {
    const onSubmit = (data: IPaymentData) => {
        console.log('App data', data);
    };
    const onError = (error: PaymentError) => {
        const { internalMessage, message, code } = error;
        console.log('internalMessage', internalMessage);
        console.log('message', message);
        console.log('code', code);
    };

    return (
        <CardPayment
            environment='homolog'
            encryptKey={REACT_APP_PAGADOR_PUBLIC_KEY}
            onSubmit={onSubmit}
            onError={onError}
            merchantaccount={}//informar o merchantaccount => Type number
            split={}//informa se é split ou não => Type boolean
            config={{
                paymentTypeTitle: 'Cartão de crédito',
                checkoutButtonTitle: 'PAGAR COM CARTÃO DE CRÉDITO',
                checkoutButtonVisible: false
            }}
        />
    );
};