create-invoice-form.md

description	A form for creating invoices in Request Network

Create Invoice Form

Screenshot of @requestnetwork/create-invoice-form 0.2.0

	🕹️ Try it out		https://invoicing.request.network/create-invoice	https://invoicing.request.network/
	▶️ Demo Video		https://www.youtube.com/watch?v=FC6oJR5aKOQ	#request-invoicing-demo-video
	🏗️ Integration Video		https://www.youtube.com/watch?v=CV4uiKM7r7s	#request-invoicing-integration-video
	📦 View on NPM		https://www.npmjs.com/package/@requestnetwork/create-invoice-form	https://www.npmjs.com/package/@requestnetwork/create-invoice-form
	ℹ️ View Source		https://github.com/RequestNetwork/web-components/tree/main/packages/create-invoice-form	https://github.com/RequestNetwork/web-components/tree/main/packages/create-invoice-form

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.

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.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/pages/create-invoice.tsx" %}

wagmiConfig.ts

The web component supports any wallet connector module built on top of wagmi. This provides the flexibility to use any wagmi-compatible wallet connector, such as RainbowKit.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/wagmiConfig.ts" %}

initializeRN.ts

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

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/initializeRN.ts" %}

config.ts

Use the config object to pass additional configuration options. Please replace the builderId with your own, arbitrarily chosen ID. This is used to track how many invoices your application creates.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/config.ts" %}

context.tsx

Use a context provider to reinitialize the Request Network instance when the wallet changes.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/context.tsx" %}

currencies.ts

A list of custom currencies to extend the default currency list.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/currencies.ts" %}

types.d.ts

Specify types to avoid TypeScript errors.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/types.d.ts" %}

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
wagmiConfig	WagmiConfig	Wallet connector config
currencies	Currency[]	A list of custom currencies

Next Steps

{% content-ref url="../../get-started/quickstart-browser.md" %} quickstart-browser.md {% endcontent-ref %}