Skip to content

payment-widget.md

Latest commit

 

History

History
71 lines (59 loc) · 5.35 KB

payment-widget.md

File metadata and controls

71 lines (59 loc) · 5.35 KB
description A widget that allows builders to accept crypto payments.

Payment Widget

Screenshot of @requestnetwork/payment-widget@0.1.0

🕹️ Try it outhttps://checkout.request.network
▶️ Demo Video#payment-widget-demo-video
🏗️ Integration Video#payment-widget-integration-video
📦 View on NPMhttps://www.npmjs.com/package/@requestnetwork/payment-widget
ℹ️ View Sourcehttps://github.com/RequestNetwork/web-components/tree/main/packages/payment-widget

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.