Request Network Docs
WebsiteGithubStatusDiscord
  • Request Network Docs
  • Request Network API
    • Create and Pay Requests
    • Crosschain Payments
    • EasyInvoice: API Demo App
    • API Portal: Manage API Keys and Webhooks
      • Manage API Keys and Webhooks programmatically
    • Full API Reference
  • General
    • Lifecycle of a Request
    • Request Scan
    • Supported Chains
      • Smart Contract Addresses
    • Request Network Token List
  • Advanced
    • Request Network SDK
      • Get Started
        • Quickstart - Browser
        • Quickstart - Node.js
        • Installation
        • SDK Injector
        • Request Node Gateways
      • SDK Demo Apps
        • Request Invoicing
          • Pay from Safe Multisig
        • Request Checkout
        • Components
          • Create Invoice Form
          • Invoice Dashboard
          • Payment Widget
          • Add Stakeholder
      • SDK Guides
        • Request Client
          • Configure the Request Client
          • Updating a Request
          • Payment Reference
          • Compute a Request ID without creating the request
          • Use your own signature mechanism
          • Support a new currency
          • In-Memory Requests
        • Encryption and Decryption
          • Encrypt with a wallet signature using Lit Protocol
          • Encrypt with an Ethereum private key
          • Share an encrypted request
        • Payment
          • Detect a payment
          • Native Payment
          • Conversion Payment
          • Declarative Payment
          • Configuring Payment Fees
          • Single Request Forwarder
          • Batch Payment
          • Swap-to-Pay Payment
          • Swap-to-Conversion Payment
          • Transferable Receivable Payment
          • Meta Payments
          • Escrow Payment
          • Streaming Payment
          • Pay through a proxy-contract with a multisig
          • Hinkal Private Payments
        • Mobile using Expo
      • SDK Reference
        • request-client.js
          • RequestNetwork
            • createRequest()
            • computeRequestId()
            • fromRequestId()
            • fromIdentity()
            • fromTopic()
          • Request
            • waitForConfirmation()
            • getData()
            • refresh()
            • cancel()
            • accept()
            • increaseExpectedAmountRequest()
            • reduceExpectedAmountRequest()
          • IIdentity
          • IRequestDataWithEvents
          • PaymentReferenceCalculator
        • payment-processor
          • payRequest()
        • web3-signature
          • Web3SignatureProvider
        • epk-signature
          • EthereumPrivateKeySignatureProvider
        • epk-decryption
          • EthereumPrivateKeyDecryptionProvider
    • Protocol Overview
      • SDK and Request Node Overview
      • Payment Networks
      • Private Requests using Encryption
      • Smart Contracts Overview
    • Internal SDK Architecture
      • Request Logic
      • Advanced Logic
      • Transaction
      • Data-access
      • Storage
      • Data flow
      • Request IPFS network
  • FAQ
  • Glossary
  • Contributing
Powered by GitBook
On this page
  • Installation
  • Usage
  • Usage in React and Next.js
  • Props

Was this helpful?

Edit on GitHub
Export as PDF
  1. Advanced
  2. Request Network SDK
  3. SDK Demo Apps
  4. Components

Payment Widget

A widget that allows builders to accept crypto payments.

PreviousInvoice DashboardNextAdd Stakeholder

Last updated 5 months ago

Was this helpful?

Installation

npm install @requestnetwork/payment-widget

Usage

Usage in React and Next.js

import PaymentWidget from "@requestnetwork/payment-widget/react";

export default function PaymentPage() {
  return (
    <PaymentWidget
      sellerInfo={{
        logo: "https://example.com/logo.png",
        name: "Example Store",
      }}
      productInfo={{
        name: "Digital Art Collection",
        description: "A curated collection of digital artworks.",
        image: "https://example.com/product-image.jpg",
      }}
      amountInUSD={1.5}
      sellerAddress="0x1234567890123456789012345678901234567890"
      supportedCurrencies={["REQ-mainnet","ETH-sepolia-sepolia","USDC-mainnet"]}
      persistRequest={true}
      onPaymentSuccess={(request) => {
        console.log(request);
      }}
      onError={(error) => {
        console.error(error);
      }}
    />
  );
}

Props

Prop
Type
Description

amountInUSD

number

The total of the purchase in US Dollars

sellerAddress

string

Address that would accept the payments

supportedCurrencies

string[]

An array of currency IDS that are supported by the seller

sellerInfo.logo

string

(Optional) Seller logo

sellerInfo

SellerInfo

(Optional) Information about the seller

sellerInfo.name

string

(Optional) Seller name

productInfo

ProductInfo

(Optional) Information about the product

productInfo.name

string

(Optional) Name of the product

productInfo.description

string

(Optional) Description of the product

productInfo.image

string

(Optional) Product image

persistRequest

boolean

(Optional) Defaults to true, when set to false the request data is not persisted to the blockchain

showRNBranding

boolean

(Optional) Defaults to true, when set to false the "Powered by Request Network" banner is hidden

builderId

string

(Optional) An ID added to request to identify request created by builder

onPaymentSuccess

(request) => void

(Optional) Event that returns the Request data once the payment is successful.

onError

(error) => void

(Optional) Event that returns the error when something goes wrong.

The Payment Widget allows builders to accept crypto payments on their websites with minimal integration. It is built using but complied into a , making it usable in any web environment, regardless of the framework.

Svelte
Web Component

Try it out

Demo Video

Integration Video

View on NPM

View Source

🕹️
▶️
🏗️
📦
ℹ️
Screenshot of @requestnetwork/payment-widget@0.1.0