Create Invoice Form

A form for creating invoices in Request Network

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

FeatureStatus

ERC20 Request

Configure Logo and Colors

Minimal Chains and Currencies

Chains and Currencies

ChainCurrencies

Ethereum

USDC, USDT, DAI

Polygon

USDC, USDT, DAI, USDCe

Sepolia

USDC, FAU

Installation

To install the component, use npm:

npm install @requestnetwork/create-invoice-form

Usage

Usage in React and Next.js

Disable swcMinify in next.config.mjs

To use the Create Invoice Form in NextJS 14.x, you must set swcMinify: false in your next.config.mjs file. Without it, the Create Invoice Form won't render.

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.

To use the Create Invoice Form in a React or Next.js application, you must dynamically import @requestnetwork/create-invoice-form and use the component in your JSX file.

import("@requestnetwork/create-invoice-form");

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

Supporting files

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

  • 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.

  • 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.

Props

PropTypeDescription

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

The RequestNetwork instance

signer

string

The address that signs to create the invoices

Last updated