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
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 |
Installation
To install the component, use npm:
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.
Supporting files
initializeRN.ts - Initialize the
RequestNetwork
object using an EthersSigner
or ViemWalletClient
.
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.
currencies.ts - A list of custom currencies to extend the default currency list.
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 | The RequestNetwork instance | |
signer | string | The address that signs to create the invoices |
currencies | Currency[] | A list of custom currencies |
Last updated