# request-fiat-to-erc20-payment

> A handler to pay your Request network invoices in cryptos. Only works in this way: FIAT ➡️ ERC20 (for now 😉).

Latest version **0.0.12** (published 2022-02-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install request-fiat-to-erc20-payment
pnpm add request-fiat-to-erc20-payment
yarn add request-fiat-to-erc20-payment
bun add request-fiat-to-erc20-payment
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2022-02-18 |
| First published | 2021-12-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 3 |
| Unpacked size | 38.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Matthias Wanner |
| Maintainers | matthias_wanner |
| Keywords | payment, crypto, request, invoices, blockchain, e-commerce |

## Links

- npm: https://www.npmjs.com/package/request-fiat-to-erc20-payment
- Repository: https://github.com/MatthiasWanner/request-fiat-to-erc20
- Issues: https://github.com/MatthiasWanner/request-fiat-to-erc20/issues
- npm.io page: https://npm.io/package/request-fiat-to-erc20-payment

## Dependencies (3)

- [axios](https://npm.io/package/axios.md) ^0.24.0
- [ethers](https://npm.io/package/ethers.md) ^5.5.2
- [@requestnetwork/payment-processor](https://npm.io/package/@requestnetwork/payment-processor.md) ^0.37.1-next.1587

## Alternatives

- [@gemini-wallet/core](https://npm.io/package/@gemini-wallet/core.md) — 515.6K weekly downloads
- [utility](https://npm.io/package/utility.md) — 416.6K weekly downloads
- [@primno/dpapi](https://npm.io/package/@primno/dpapi.md) — 7.2K weekly downloads
- [pi-readseek](https://npm.io/package/pi-readseek.md) — 3.7K weekly downloads
- [@emilia-protocol/verify](https://npm.io/package/@emilia-protocol/verify.md) — 1.1K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2022-02-18
- 0.0.11 — 2022-02-18
- 0.0.10 — 2022-02-17
- 0.0.9 — 2022-02-17
- 0.0.8 — 2022-02-14
- 0.0.7 — 2022-02-14
- 0.0.6 — 2022-02-14
- 0.0.5 — 2022-02-14
- 0.0.4 — 2022-01-12
- 0.0.3 — 2022-01-03
- 0.0.2 — 2021-12-22

## README

# request-fiat-to-erc20-payment

A handler to pay your Request network invoices in cryptos. Only works in this way: FIAT ➡️ ERC20 (for now 😉).

## Installation

Install request-fiat-to-erc20-payment with npm into your project folder

```bash
  npm i request-fiat-to-erc20-payment
```

## Demo

<div style="text-align:center;">

![Usage demo](https://i.imgur.com/jME5F3s.gif)

</div>

## Documentation

You can use it in your front app simply implementing button with requestPayment() onClick.  
Here is an example of use in a React component (+ Tailwind CSS)

```js
import { requestPayment, hasAllowance, approveERC20Transactions } from 'request-fiat-to-erc20-payment';
import { useMetaMask } from 'metamask-react';

import { IRequestData } from '@requestnetwork/types/dist/client-types';

 /*
 ⚠️ The request object as IRequestData type come from https://api.request.network/invoices/{requestId}?withRequest=true

 Retrieve the response.request.request key
 */

interface IProps {
    request: IRequestData;
}

export default function Payment({ request }: IProps) {
    const [isLoading, setIsLoading] = useState(false);
    const [isContractApproved, setIsContractApproved] = useState(false);
    const [message, setMessage] = useState("");

    /*
    ⚠️ethereum variable represent window.ethereum when the metamask browser extension is installed
    See cool metamask-react library @ https://www.npmjs.com/package/metamask-react
    */
    const { ethereum } = useMetaMask();

    const checkIfContractIsApproved = async () => {
        try {
            setIsLoading(true);
            setIsContractApproved(await hasAllowance(request, ethereum));
            setMessage('Success checking allowance');
        } catch (error) {
            setMessage((error as Error).message);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        checkIfContractIsApproved();
    }, [])

    if (isLoading) return <p>...Is Loading</p>

    if (!isContractApproved) return (
        <Button
            className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-sapphire hover:bg-indigo-dye focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-900"
            handleClick={async () => {
            try {
                setIsLoading(true);
                await approveERC20Transactions(
                request,
                ethereum
                );
                setMessage('Contract approved!');
            } catch (e) {
                setMessage((e as Error).message);
            } finally {
                setIsLoading(false);
                checkIfContractIsApproved();
            }
            }}
        >
            {"Approve contract"}
        </Button>
    );

    return (
        <Button
            className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-sapphire hover:bg-indigo-dye focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-900"
            handleClick={async () => {
            try {
                setIsLoading(true);
                await requestPayment(
                request,
                ethereum
                );
                setMessage('Payment done!');
            } catch (e) {
                setMessage((e as Error).message);
            } finally {
                setIsLoading(false);
            }
            }}
        >
            {"Pay with Metamask"}
        </Button>
    );
}

```

---
_Source: https://npm.io/package/request-fiat-to-erc20-payment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._