First Tech - Click to pay web SDK

The First Tech web experience in a SDK.

Installation

Use the package manager NPM to install the First-Tech Click to pay web SDK.

npm install ft-click-to-pay-web-sdk

Usage

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

<ClickToPaySDK />;

Configuration

merchant(*Required)

The merchant is required to setup the Click to pay configuration. All fields are required

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

const merchant = {
  srcDpaId: 'b756a2b0-ef62-4c62-a6de-f72e75ce5f17',
  dpaLocale: 'pt_BR',
  dpaName: 'TestMerchant',
  cardBrands: ['MASTERCARD', 'VISA'],
  transactionValue: '1500.50',
  checkoutExperience: 'CLICK_TO_PAY',
}

<ClickToPaySDK merchant={merchant} />;

customer(Optional)

The customer is optional to setup the Click to pay configuration. All fields are user data related.

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

const customer = {
  name: 'Nome',
  address: {
    street: 'Rua',
    number: '01',
    complement: 'Complemento',
    city: 'Cidade',
    state: 'SP',
    zipCode: '0000000',
    countryCode: 'BR',
  },
  phoneNumber: {
    number: '11999999999',
    countryCode: '+55',
  },
}

<ClickToPaySDK customer={customer} />;

onRememberMe(Optional)

onRememberMe is a callback function that allows to inform to the Click to pay's system the user agrees to save his data.

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

<ClickToPaySDK onRememberMe={(value: boolean) => handleRememberMe(value)} />;

onError(Optional)

onError is a callback function that allows to customize how to handle any error that may occurs.

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

<ClickToPaySDK onError={(value: string) => handleError(value)} />;

setCards(Optional)

setCards is a callback function that allows the e-commerce to save the user cards.

import ClickToPaySDK from "ft-click-to-pay-web-sdk";

<ClickToPaySDK setCards={() => handleSaveUserCards()} />;