Payment Widget

A widget that allows builders to accept crypto payments.

Screenshot of @requestnetwork/[email protected]

🕹️ Try it out

▶️ Demo Video

🏗️ Integration Video

📦 View on NPM

ℹ️ View Source

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

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.