Create Invoice Form

A form for creating invoices in Request Network

Screenshot of @requestnetwork/create-invoice-form 0.2.0

🕹️ Try it out

📦 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	✅

Chains and Currencies

Chain	Currencies
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

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.

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

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

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

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.

Passing the props directly without creating a reference to the web component should be enabled in a future release. For more details, see web-components Issue #34.

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

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