Create Invoice Form

A form for creating invoices in Request Network

🕹️ Try it out

▶️ Demo Video

🏗️ Integration Video

📦 View on NPM

ℹ️ View Source

The Create Invoice Form allows end-users to create an invoice using the Request Network. It is built using Svelte but compiled to a Web Component, making it usable in any web environment, regardless of the framework.

Features

Feature	Status
ERC20 Request	✅
rnf_invoice format 0.3.0	✅
Configure Logo and Colors	✅
Minimal Chains and Currencies	✅
Custom currency list	✅

Feature

Status

ERC20 Request

✅

rnf_invoice format 0.3.0

✅

Configure Logo and Colors

✅

Minimal Chains and Currencies

✅

Custom currency list

✅

Chains and Currencies

Chain	Currencies
Ethereum	USDC, USDT, DAI, AXS, AUDIO, RAI, SYLO, LDO, UST, MNT, MIR, INJ, OCEAN, ANKR, RLY, REQ, ETH
Polygon	USDC, USDT, DAI, MATIC
Sepolia	FAU, ETH, USDT, USDC
BNB Smart Chain	DAI, BUSD
Gnosis	USDC
Avalanche	USDC, USDT, AVAX
Optimism	USDC, USDT, DAI, ETH
Moonbeam	USDC (multichain), USDC (wormhole)
Fantom	FTM
Mantle	MNT
zkSync Era	ETH
Base	ETH

Chain

Currencies

Ethereum

USDC, USDT, DAI, AXS, AUDIO, RAI, SYLO, LDO, UST, MNT, MIR, INJ, OCEAN, ANKR, RLY, REQ, ETH

Polygon

USDC, USDT, DAI, MATIC

Sepolia

FAU, ETH, USDT, USDC

BNB Smart Chain

DAI, BUSD

Gnosis

USDC

Avalanche

USDC, USDT, AVAX

Optimism

USDC, USDT, DAI, ETH

Moonbeam

USDC (multichain), USDC (wormhole)

Fantom

FTM

Mantle

MNT

zkSync Era

ETH

Base

ETH

Installation

To install the component, use npm:

npm install @requestnetwork/create-invoice-form

Usage

Usage in React and Next.js

Follow the instructions below to add the Create Invoice Form to a React or Next.js app. For a video explaining how to integrate, see the Request Invoicing Integration Video

create-invoice.tsx

Configure the Create Invoice Form web component by creating a reference to it, setting its properties, and passing the reference as a prop.

This example uses Web3 Onboard to connect a wallet but you can use any wallet connection method you prefer.

https://github.com/RequestNetwork/invoicing-template/blob/main/pages/create-invoice.tsx

import CreateInvoiceForm from "@requestnetwork/create-invoice-form/react";
import Head from "next/head";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { currencies } from "@/utils/currencies";

export default function CreateInvoice() {
  const { wallet, requestNetwork } = useAppContext();

  return (
    <>
      <Head>
        <title>Request Invoicing - Create an Invoice</title>
      </Head>
      <div className="container m-auto  w-[100%]">
        <CreateInvoiceForm
          config={config}
          signer={wallet?.accounts[0]?.address || ""}
          requestNetwork={requestNetwork}
          currencies={currencies}
        />
      </div>
    </>
  );
}

Supporting files

initializeRN.ts - Initialize the RequestNetwork object using an Ethers Signer or Viem WalletClient.

https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts

import { RequestNetwork } from "@requestnetwork/request-client.js";
import { Web3SignatureProvider } from "@requestnetwork/web3-signature";
import { getTheGraphClient } from "@requestnetwork/payment-detection";

export const initializeRequestNetwork = (setter: any, walletClient: any) => {
  try {
    const web3SignatureProvider = new Web3SignatureProvider(walletClient);

    const requestNetwork = new RequestNetwork({
      nodeConnectionConfig: {
        baseURL: "https://gnosis.gateway.request.network/",
      },
      signatureProvider: web3SignatureProvider,
      httpConfig: {
        getConfirmationMaxRetry: 120,
      },
      paymentOptions: {
        getSubgraphClient: (chain: string) => {
          // Ternary because cannot dynamically access environment variables in the browser
          const paymentsSubgraphUrl =
            chain === "arbitrum-one"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_ARBITRUM_ONE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-arbitrum-one/api"
              : chain === "avalanche"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_AVALANCHE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-avalanche/api"
              : chain === "base"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BASE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-base/api"
              : chain === "bsc"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BSC || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-bsc/api"
              : chain === "celo"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CELO || "https://api.studio.thegraph.com/query/67444/request-payments-celo/version/latest"
              : chain === "core"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CORE || "https://thegraph.coredao.org/subgraphs/name/requestnetwork/request-payments-core"
              : chain === "fantom"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FANTOM || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-fantom/api"
              : chain === "fuse"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FUSE || "https://api.studio.thegraph.com/query/67444/request-payments-fuse/version/latest"
              : chain === "mainnet"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MAINNET || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-mainnet/api"
              : chain === "matic"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MATIC || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-matic/api"
              : chain === "moonbeam"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MOONBEAM || "https://api.studio.thegraph.com/query/67444/request-payments-moonbeam/version/latest"
              : chain === "optimism"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_OPTIMISM || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-optimism/api"
              : chain === "sepolia"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_SEPOLIA || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-sepolia/api"
              : chain === "xdai"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_XDAI || "https://api.studio.thegraph.com/query/67444/request-payments-xdai/version/latest"
              : chain === "zksyncera"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_ZKSYNCERA || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-zksyncera/api"
              : undefined;
          if (!paymentsSubgraphUrl) {
            throw new Error(`Cannot get subgraph client for unknown chain: ${chain}`);
          }
          return getTheGraphClient(chain, paymentsSubgraphUrl);
        },
      },
    });

    setter(requestNetwork);
  } catch (error) {
    console.error("Failed to initialize the Request Network:", error);
    setter(null);
  }
};

config.ts - Use the config object to pass additional configuration options to the create invoice form component. Please replace the builderId with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.

https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts

import { IConfig } from "./types";

export const config: IConfig = {
  builderId: "request-network", // Replace with your builder ID, arbitrarily chosen, used to identify your app
  dashboardLink: "/",
  logo: "/assets/logo-sm.svg",
  colors: {
    main: "#0BB489",
    secondary: "#58E1A5",
  },
};

context.tsx - Use a context provider to reinitialize the Request Network instance when the wallet changes.
types.d.ts - Specify types to avoid TypeScript errors.
currencies.ts - A list of custom currencies to extend the default currency list.

https://github.com/RequestNetwork/invoicing-template/blob/68677d8823c29c1d00eb93f5285e9aa90540023a/utils/currencies.ts

import { Types } from "@requestnetwork/request-client.js";

export const currencies = [
  {
    symbol: "FAU",
    address: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C",
    network: "sepolia",
    decimals: 18,
    type: Types.RequestLogic.CURRENCY.ERC20,
  },
  {
    symbol: "ETH",
    address: "eth",
    network: "sepolia",
    decimals: 18,
    type: Types.RequestLogic.CURRENCY.ETH,
  },
];

Props

Prop	Type	Description
config	IConfig	Additional configuration parameters
config.builderId	string	Unique builder ID, arbitrarily chosen, used for metrics
config.dashboardLink	string	Path to dashboard page
config.logo	string	Path to logo file
config.colors.main	string	Hex color code for primary buttons and labels
config.colors.secondary	string	Hex color code for for borders and accents
requestNetwork	RequestNetwork	The RequestNetwork instance
signer	string	The address that signs to create the invoices
currencies	Currency[]	A list of custom currencies

Prop

Type

Description

config

IConfig

Additional configuration parameters

config.builderId

string

Unique builder ID, arbitrarily chosen, used for metrics

config.dashboardLink

string

Path to dashboard page

config.logo

string

Path to logo file

config.colors.main

string

Hex color code for primary buttons and labels

config.colors.secondary

string

Hex color code for for borders and accents

requestNetwork

RequestNetwork

The RequestNetwork instance

signer

string

The address that signs to create the invoices

currencies

Currency[]

A list of custom currencies

PreviousComponents NextInvoice Dashboard

Last updated 8 days ago