+ Buyer Information +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {errors.receiptInfo?.buyerInfo?.email?.message && (
+ {errors.receiptInfo.buyerInfo.email.message}
+ )}
+
+
+
+
+
+
+
+ + Buyer Address +
+ +
+
+
+ {errors.receiptInfo?.buyerInfo?.address?.street?.message && (
+
+ {errors.receiptInfo.buyerInfo.address.street.message}
+
+ )}
+
+
+
+
+
+
+
+
+ {errors.receiptInfo?.buyerInfo?.address?.city?.message && (
+
+ {errors.receiptInfo.buyerInfo.address.city.message}
+
+ )}
+
+
+
+
+ {errors.receiptInfo?.buyerInfo?.address?.state?.message && (
+
+ {errors.receiptInfo.buyerInfo.address.state.message}
+
+ )}
+
+
+
+
+
+
+ {errors.receiptInfo?.buyerInfo?.address?.postalCode?.message && (
+
+ {errors.receiptInfo.buyerInfo.address.postalCode.message}
+
+ )}
+
+
+
+
+ {errors.receiptInfo?.buyerInfo?.address?.country?.message && (
+
+ {errors.receiptInfo.buyerInfo.address.country.message}
+
+ )}
+
+ Payment Configuration
+ +
+
+
+ {errors.recipientWallet?.message && (
+ {errors.recipientWallet.message}
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Invoice Items +
+ + {formValues.receiptInfo.items.map((item, index) => ( +
+
+ ))}
+
+
+
+
+
+
+ Item {index + 1}
+ {formValues.receiptInfo.items.length > 1 && ( + + )} +
+
+
+
+
+
+
+
+ updateItemTotal(index),
+ })}
+ />
+
+
+
+ updateItemTotal(index),
+ })}
+ />
+
+
+
+
+
+ + UI Configuration +
+ + {/* UI Config */} +
+
+
+ setValue("uiConfig.showRequestScanUrl", checked)
+ }
+ />
+
+
+
+
+
+ setValue("uiConfig.showReceiptDownload", checked)
+ }
+ />
+
+
+
+
+
+
+
+ {/* Totals Display */}
+
+
+
+
+
+ Subtotal:
+
+ $
+ {(
+ Number.parseFloat(formValues.receiptInfo.totals.total) || 0
+ ).toFixed(2)}
+
+
+
+ Discount:
+
+ -$
+ {(
+ Number.parseFloat(
+ formValues.receiptInfo.totals.totalDiscount,
+ ) || 0
+ ).toFixed(2)}
+
+
+
+ Tax:
+
+ $
+ {(
+ Number.parseFloat(formValues.receiptInfo.totals.totalTax) || 0
+ ).toFixed(2)}
+
+
+
+ Total:
+
+ $
+ {(
+ Number.parseFloat(formValues.receiptInfo.totals.totalUSD) || 0
+ ).toFixed(2)}
+
+
+
+ Pay with crypto
+
+
+
+
+
+
+
+
+ Customize Widget
+ Company Info
+ Buyer Info
+
+
+
+
+
+
+
+
+
+
+
+ console.log("Payment successful:", requestId)
+ }
+ onPaymentError={(error) =>
+ console.error("Payment failed:", error)
+ }
+ onComplete={() => console.log("Payment process completed")}
+ >
+
+
+
+ Preview
+
+ Pay with crypto
+
+
+
+ Integration Code
+ + {/* Install Command */} +
+
+
+
+ {/* Integration Code */}
+
+
+ {installCommand}
+
+
+
+
+
+
+
+ {integrationCode}
+
+
+ + Company Information +
+ +
+
+
+ {errors.receiptInfo?.companyInfo?.name?.message && (
+ {errors.receiptInfo.companyInfo.name.message}
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Company Address +
+ +
+
+
+ {errors.receiptInfo?.companyInfo?.address?.street?.message && (
+
+ {errors.receiptInfo.companyInfo.address.street.message}
+
+ )}
+
+
+
+
+
+
+
+
+ {errors.receiptInfo?.companyInfo?.address?.city?.message && (
+
+ {errors.receiptInfo.companyInfo.address.city.message}
+
+ )}
+
+
+
+
+ {errors.receiptInfo?.companyInfo?.address?.state?.message && (
+
+ {errors.receiptInfo.companyInfo.address.state.message}
+
+ )}
+
+
+
+
+
+
+ {errors.receiptInfo?.companyInfo?.address?.postalCode?.message && (
+
+ {errors.receiptInfo.companyInfo.address.postalCode.message}
+
+ )}
+
+
+
+
+ {errors.receiptInfo?.companyInfo?.address?.country?.message && (
+
+ {errors.receiptInfo.companyInfo.address.country.message}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/payment-widget/components/connection-handler.tsx b/src/components/payment-widget/components/connection-handler.tsx
new file mode 100644
index 00000000..6e461f53
--- /dev/null
+++ b/src/components/payment-widget/components/connection-handler.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useAccount } from "wagmi";
+import { WalletConnectModal } from "./wallet-connect-modal";
+import type { ReactNode } from "react";
+
+interface ConnectionHandlerProps {
+ isOpen: boolean;
+ handleModalOpenChange: (open: boolean) => void;
+ paymentModal: ReactNode;
+}
+
+export function ConnectionHandler({
+ isOpen,
+ handleModalOpenChange,
+ paymentModal,
+}: ConnectionHandlerProps) {
+ const { isConnected, isConnecting } = useAccount();
+
+ if (!isConnected) {
+ return (
+ Buyer Information
+ +Loading currencies...
;
+ }
+
+ if (isError) {
+ return (
+
+
+ );
+ }
+
+ if (!conversionCurrencies || conversionCurrencies.length === 0) {
+ return + Error loading currencies. Please try again later. +
+ +No conversion currencies available.
;
+ }
+
+ const lowerCaseSupportedCurrencies = supportedCurrencies.map((currency) =>
+ currency.toLowerCase(),
+ );
+
+ const eligibleCurrencies =
+ lowerCaseSupportedCurrencies.length > 0
+ ? conversionCurrencies.filter((currency) =>
+ lowerCaseSupportedCurrencies.includes(currency.id.toLowerCase()),
+ )
+ : conversionCurrencies;
+
+ if (eligibleCurrencies.length === 0) {
+ console.warn(
+ "Your supportedCurrencies do not match available currencies.",
+ { supportedCurrencies, conversionCurrencies },
+ );
+ return No supported currencies available.
;
+ }
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/payment-widget/components/disconnect-wallet.tsx b/src/components/payment-widget/components/disconnect-wallet.tsx
new file mode 100644
index 00000000..db5111df
--- /dev/null
+++ b/src/components/payment-widget/components/disconnect-wallet.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@/components/ui/button";
+import { Wallet } from "lucide-react";
+import { useAccount, useDisconnect } from "wagmi";
+
+export function DisconnectWallet() {
+ const { address } = useAccount();
+ const { disconnect } = useDisconnect();
+
+ const handleDisconnect = () => {
+ disconnect();
+ };
+
+ return (
+ Select a currency
+
+ {eligibleCurrencies.map((currency) => {
+ const isSelected = selectedCurrency === currency.id;
+ return (
+
+
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/components/payment-widget/components/payment-confirmation.tsx b/src/components/payment-widget/components/payment-confirmation.tsx
new file mode 100644
index 00000000..2361cfee
--- /dev/null
+++ b/src/components/payment-widget/components/payment-confirmation.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowRight, AlertCircle } from "lucide-react";
+import { usePayment } from "../hooks/use-payment";
+import {
+ getSymbolOverride,
+ type ConversionCurrency,
+} from "../utils/currencies";
+import type { BuyerInfo, PaymentError } from "../types/index";
+import { useState } from "react";
+import type { TransactionReceipt } from "viem";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
+
+interface PaymentConfirmationProps {
+ selectedCurrency: ConversionCurrency;
+ buyerInfo: BuyerInfo;
+ onBack: () => void;
+ handlePaymentSuccess: (
+ requestId: string,
+ transactionReceipts: TransactionReceipt[],
+ ) => void;
+}
+
+export function PaymentConfirmation({
+ buyerInfo,
+ selectedCurrency,
+ onBack,
+ handlePaymentSuccess,
+}: PaymentConfirmationProps) {
+ const {
+ amountInUsd,
+ recipientWallet,
+ connectedWalletAddress,
+ paymentConfig: { rnApiClientId, feeInfo, reference },
+ receiptInfo: { companyInfo: { name: companyName } = {} },
+ onPaymentError,
+ walletAccount,
+ } = usePaymentWidgetContext();
+ const { isExecuting, executePayment } = usePayment(
+ selectedCurrency.network,
+ walletAccount,
+ );
+ const [localError, setLocalError] = useState
+
+ );
+}
diff --git a/src/components/payment-widget/components/payment-modal.tsx b/src/components/payment-widget/components/payment-modal.tsx
new file mode 100644
index 00000000..0763b755
--- /dev/null
+++ b/src/components/payment-widget/components/payment-modal.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+import { CurrencySelect } from "./currency-select";
+import { BuyerInfoForm } from "./buyer-info-form";
+import { PaymentConfirmation } from "./payment-confirmation";
+import { PaymentSuccess } from "./payment-success";
+import { DisconnectWallet } from "./disconnect-wallet";
+import type { BuyerInfo } from "../types/index";
+import type { ConversionCurrency } from "../utils/currencies";
+import type { TransactionReceipt } from "viem";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
+
+interface PaymentModalProps {
+ isOpen: boolean;
+ handleModalOpenChange: (open: boolean) => void;
+}
+
+export function PaymentModal({
+ isOpen,
+ handleModalOpenChange,
+}: PaymentModalProps) {
+ const { isWalletOverride, receiptInfo, onPaymentSuccess, onComplete } =
+ usePaymentWidgetContext();
+
+ const [activeStep, setActiveStep] = useState<
+ | "currency-select"
+ | "buyer-info"
+ | "payment-confirmation"
+ | "payment-success"
+ >("currency-select");
+ const [selectedCurrency, setSelectedCurrency] =
+ useStatePayment Confirmation
+ +
+ {/* Payment Currency (From) */}
+
+
+
+
+
+
+ {getSymbolOverride(selectedCurrency.symbol)}
+
+
+
+ From
+
+ {selectedCurrency.name}
+
+
+
+
+ USD
+
+
+
+ To
+
+ ${amountInUsd}
+
+
+
+
+ {localError && (
+ Payment To
+
+
+
+ {companyName}
+
+
+
+
+ Wallet Address
+
+
+ {recipientWallet}
+
+
+
+ )}
+
+
+
+
+
+ + Payment Error +
+{localError}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/payment-widget/components/receipt/receipt-template.tsx b/src/components/payment-widget/components/receipt/receipt-template.tsx
new file mode 100644
index 00000000..2141a6b9
--- /dev/null
+++ b/src/components/payment-widget/components/receipt/receipt-template.tsx
@@ -0,0 +1,196 @@
+import type { FC } from "react";
+import {
+ formatCryptoAmount,
+ formatUSDAmount,
+ formatReceiptDate,
+ type ReceiptData,
+} from "../../utils/receipt";
+// a module.css file doesn't work with html2pdf.js
+import "./styles.css";
+
+export const ReceiptPDFTemplate: FC<{ receipt: ReceiptData }> = ({
+ receipt,
+}) => {
+ return (
+
+
+
+
+
+ + Payment Completed! +
++ Your payment has been processed successfully. +
+
+ {uiConfig.showReceiptDownload && (
+ <>
+
+
+
+ )}
+ {uiConfig.showRequestScanUrl && (
+
+ )}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/payment-widget/components/receipt/styles.css b/src/components/payment-widget/components/receipt/styles.css
new file mode 100644
index 00000000..494bb366
--- /dev/null
+++ b/src/components/payment-widget/components/receipt/styles.css
@@ -0,0 +1,243 @@
+.receipt-container {
+ background-color: #ffffff;
+ padding: 32px;
+ max-width: 800px;
+ margin: 0 auto;
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ font-size: 12px;
+ line-height: 1.4;
+ color: #2d3748;
+
+ .receipt-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ padding-bottom: 15px;
+ border-bottom: 2px solid #e2e8f0;
+ }
+
+ .company-info {
+ flex: 1;
+ }
+
+ .company-name {
+ font-size: 24px;
+ font-weight: 700;
+ color: #1a202c;
+ margin: 0 0 8px 0;
+ }
+
+ .company-details {
+ font-size: 11px;
+ color: #4a5568;
+ line-height: 1.3;
+ }
+
+ .company-details > div {
+ margin-bottom: 2px;
+ }
+
+ .receipt-title-section {
+ text-align: right;
+ }
+
+ .receipt-title {
+ font-size: 28px;
+ font-weight: 700;
+ color: #2d3748;
+ margin: 0 0 4px 0;
+ }
+
+ .receipt-number {
+ font-size: 16px;
+ font-weight: 600;
+ color: #4a5568;
+ margin-bottom: 4px;
+ }
+
+ .receipt-date {
+ font-size: 11px;
+ color: #718096;
+ }
+
+ .party-info-section {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 16px;
+ }
+
+ .info-box {
+ flex: 1;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ padding: 12px;
+ background-color: #f7fafc;
+ }
+
+ .info-header {
+ font-size: 11px;
+ font-weight: 700;
+ color: #2d3748;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin: 0 0 8px 0;
+ }
+
+ .party-name {
+ font-weight: 600;
+ font-size: 14px;
+ color: #1a202c;
+ margin-bottom: 4px;
+ }
+
+ .wallet-address {
+ font-size: 10px;
+ color: #718096;
+ font-family: "Monaco", "Courier New", monospace;
+ margin-bottom: 6px;
+ word-break: break-all;
+ }
+
+ .email {
+ font-size: 11px;
+ color: #4a5568;
+ margin-bottom: 4px;
+ }
+
+ .address-info {
+ font-size: 11px;
+ color: #4a5568;
+ line-height: 1.3;
+ }
+
+ .address-info > div {
+ margin-bottom: 2px;
+ }
+
+ .payment-info {
+ background-color: #edf2f7;
+ padding: 8px 12px;
+ border-radius: 4px;
+ margin-bottom: 16px;
+ font-size: 11px;
+ color: #2d3748;
+ }
+
+ .payment-info > div {
+ margin-bottom: 2px;
+ }
+
+ .payment-info > div:last-child {
+ margin-bottom: 0;
+ }
+
+ .transaction-hash {
+ font-family: "Monaco", "Courier New", monospace;
+ word-break: break-all;
+ }
+
+ .items-table {
+ width: 100%;
+ border-collapse: collapse;
+ border: 1px solid #e2e8f0;
+ margin-bottom: 16px;
+ font-size: 11px;
+ }
+
+ .items-table th {
+ background-color: #edf2f7;
+ border: 1px solid #e2e8f0;
+ padding: 8px 6px;
+ font-weight: 600;
+ text-align: left;
+ color: #2d3748;
+ }
+
+ .items-table th.center {
+ text-align: center;
+ width: 40px;
+ }
+
+ .items-table th.right {
+ text-align: right;
+ width: 80px;
+ }
+
+ .items-table td {
+ border: 1px solid #e2e8f0;
+ padding: 6px;
+ vertical-align: top;
+ }
+
+ .items-table td.center {
+ text-align: center;
+ }
+
+ .items-table td.right {
+ text-align: right;
+ font-family: "Monaco", "Courier New", monospace;
+ }
+
+ .items-table .row-even {
+ background-color: #ffffff;
+ }
+
+ .items-table .row-odd {
+ background-color: #f7fafc;
+ }
+
+ .items-table .amount {
+ font-weight: 600;
+ }
+
+ .totals-section {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 16px;
+ }
+
+ .totals-box {
+ background-color: #f7fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ padding: 12px;
+ min-width: 240px;
+ }
+
+ .total-line {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 4px;
+ font-size: 11px;
+ }
+
+ .total-line.subtotal {
+ padding-top: 6px;
+ border-top: 1px solid #e2e8f0;
+ font-weight: 600;
+ }
+
+ .total-line.final {
+ font-size: 14px;
+ font-weight: 700;
+ color: #1a202c;
+ padding-top: 6px;
+ border-top: 2px solid #2d3748;
+ }
+
+ .total-amount {
+ font-family: "Monaco", "Courier New", monospace;
+ font-size: inherit;
+ }
+
+ .notes-section {
+ border-top: 1px solid #e2e8f0;
+ font-size: 11px;
+ color: #4a5568;
+ background-color: #f7fafc;
+ padding: 8px 12px;
+ border-radius: 4px;
+ }
+}
diff --git a/src/components/payment-widget/components/wallet-connect-modal.tsx b/src/components/payment-widget/components/wallet-connect-modal.tsx
new file mode 100644
index 00000000..f0a56940
--- /dev/null
+++ b/src/components/payment-widget/components/wallet-connect-modal.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { type Connector, useConnect } from "wagmi";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
+import { ICONS } from "../constants";
+
+interface WalletConnectModalProps {
+ isOpen: boolean;
+ isLoading: boolean;
+ handleModalOpenChange: (open: boolean) => void;
+}
+
+export function WalletConnectModal({
+ isOpen,
+ isLoading,
+ handleModalOpenChange,
+}: WalletConnectModalProps) {
+ const { connectors, connect, isPending } = useConnect();
+
+ const handleConnect = (connector: Connector) => {
+ connect({ connector });
+ };
+
+ const getWalletIcon = (connectorName: string) => {
+ const name = connectorName.toLowerCase();
+
+ switch (true) {
+ case name.includes("metamask"):
+ return ICONS.metamask;
+ case name.includes("walletconnect"):
+ return ICONS.walletConnect;
+ case name.includes("coinbase"):
+ return ICONS.coinbase;
+ case name.includes("safe"):
+ return ICONS.safe;
+ default:
+ return ICONS.defaultWallet;
+ }
+ };
+
+ // Filter out the generic injected connector, which needs to be in wagmi config otherwise types start breaking
+ const displayConnectors = connectors.filter(
+ (connector) => !connector.name.toLowerCase().includes("injected"),
+ );
+
+ return (
+
+ );
+}
diff --git a/src/components/payment-widget/constants.ts b/src/components/payment-widget/constants.ts
new file mode 100644
index 00000000..84b920d4
--- /dev/null
+++ b/src/components/payment-widget/constants.ts
@@ -0,0 +1,16 @@
+export const RN_API_URL =
+ (typeof process !== "undefined" && process.env.NEXT_PUBLIC_REQUEST_API_URL) ||
+ "https://api.request.network";
+export const ICONS = {
+ metamask:
+ "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNSAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMyLjcwNzcgMzIuNzUyMkwyNS4xNjg4IDMwLjUxNzRMMTkuNDgzMyAzMy45MDA4TDE1LjUxNjcgMzMuODk5MUw5LjgyNzkzIDMwLjUxNzRMMi4yOTIyNSAzMi43NTIyTDAgMjUuMDQ4OUwyLjI5MjI1IDE2LjQ5OTNMMCA5LjI3MDk0TDIuMjkyMjUgMC4zMTIyNTZMMTQuMDY3NCA3LjMxNTU0SDIwLjkzMjZMMzIuNzA3NyAwLjMxMjI1NkwzNSA5LjI3MDk0TDMyLjcwNzcgMTYuNDk5M0wzNSAyNS4wNDg5TDMyLjcwNzcgMzIuNzUyMloiIGZpbGw9IiNGRjVDMTYiLz4KPHBhdGggZD0iTTIuMjkzOTUgMC4zMTIyNTZMMTQuMDY5MSA3LjMyMDQ3TDEzLjYwMDggMTIuMTMwMUwyLjI5Mzk1IDAuMzEyMjU2WiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNOS44Mjk1OSAyNS4wNTIyTDE1LjAxMDYgMjguOTgxMUw5LjgyOTU5IDMwLjUxNzVWMjUuMDUyMloiIGZpbGw9IiNGRjVDMTYiLz4KPHBhdGggZD0iTTE0LjU5NjYgMTguNTU2NUwxMy42MDA5IDEyLjEzMzNMNy4yMjY5MiAxNi41MDA5TDcuMjIzNjMgMTYuNDk5M1YxNi41MDI1TDcuMjQzMzUgMjAuOTk4M0w5LjgyODA5IDE4LjU1NjVIOS44Mjk3NEgxNC41OTY2WiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNMzIuNzA3NyAwLjMxMjI1NkwyMC45MzI2IDcuMzIwNDdMMjEuMzk5MyAxMi4xMzAxTDMyLjcwNzcgMC4zMTIyNTZaIiBmaWxsPSIjRkY1QzE2Ii8+CjxwYXRoIGQ9Ik0yNS4xNzIyIDI1LjA1MjJMMTkuOTkxMiAyOC45ODExTDI1LjE3MjIgMzAuNTE3NVYyNS4wNTIyWiIgZmlsbD0iI0ZGNUMxNiIvPgo8cGF0aCBkPSJNMjcuNzc2NiAxNi41MDI1SDI3Ljc3ODNIMjcuNzc2NlYxNi40OTkzTDI3Ljc3NSAxNi41MDA5TDIxLjQwMSAxMi4xMzMzTDIwLjQwNTMgMTguNTU2NUgyNS4xNzIyTDI3Ljc1ODYgMjAuOTk4M0wyNy43NzY2IDE2LjUwMjVaIiBmaWxsPSIjRkY1QzE2Ii8+CjxwYXRoIGQ9Ik05LjgyNzkzIDMwLjUxNzVMMi4yOTIyNSAzMi43NTIyTDAgMjUuMDUyMkg5LjgyNzkzVjMwLjUxNzVaIiBmaWxsPSIjRTM0ODA3Ii8+CjxwYXRoIGQ9Ik0xNC41OTQ3IDE4LjU1NDlMMTYuMDM0MSAyNy44NDA2TDE0LjAzOTMgMjIuNjc3N0w3LjIzOTc1IDIwLjk5ODRMOS44MjYxMyAxOC41NTQ5SDE0LjU5M0gxNC41OTQ3WiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMjUuMTcyMSAzMC41MTc1TDMyLjcwNzggMzIuNzUyMkwzNS4wMDAxIDI1LjA1MjJIMjUuMTcyMVYzMC41MTc1WiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMjAuNDA1MyAxOC41NTQ5TDE4Ljk2NTggMjcuODQwNkwyMC45NjA3IDIyLjY3NzdMMjcuNzYwMiAyMC45OTg0TDI1LjE3MjIgMTguNTU0OUgyMC40MDUzWiIgZmlsbD0iI0UzNDgwNyIvPgo8cGF0aCBkPSJNMCAyNS4wNDg4TDIuMjkyMjUgMTYuNDk5M0g3LjIyMTgzTDcuMjM5OTEgMjAuOTk2N0wxNC4wMzk0IDIyLjY3NkwxNi4wMzQzIDI3LjgzODlMMTUuMDA4OSAyOC45NzZMOS44Mjc5MyAyNS4wNDcySDBWMjUuMDQ4OFoiIGZpbGw9IiNGRjhENUQiLz4KPHBhdGggZD0iTTM1LjAwMDEgMjUuMDQ4OEwzMi43MDc4IDE2LjQ5OTNIMjcuNzc4M0wyNy43NjAyIDIwLjk5NjdMMjAuOTYwNyAyMi42NzZMMTguOTY1OCAyNy44Mzg5TDE5Ljk5MTIgMjguOTc2TDI1LjE3MjIgMjUuMDQ3MkgzNS4wMDAxVjI1LjA0ODhaIiBmaWxsPSIjRkY4RDVEIi8+CjxwYXRoIGQ9Ik0yMC45MzI1IDcuMzE1NDNIMTcuNDk5OUgxNC4wNjczTDEzLjYwMDYgMTIuMTI1MUwxNi4wMzQyIDI3LjgzNEgxOC45NjU2TDIxLjQwMDggMTIuMTI1MUwyMC45MzI1IDcuMzE1NDNaIiBmaWxsPSIjRkY4RDVEIi8+CjxwYXRoIGQ9Ik0yLjI5MjI1IDAuMzEyMjU2TDAgOS4yNzA5NEwyLjI5MjI1IDE2LjQ5OTNINy4yMjE4M0wxMy41OTkxIDEyLjEzMDFMMi4yOTIyNSAwLjMxMjI1NloiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTEzLjE3IDIwLjQxOTlIMTAuOTM2OUw5LjcyMDk1IDIxLjYwNjJMMTQuMDQwOSAyMi42NzI3TDEzLjE3IDIwLjQxODJWMjAuNDE5OVoiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTMyLjcwNzcgMC4zMTIyNTZMMzQuOTk5OSA5LjI3MDk0TDMyLjcwNzcgMTYuNDk5M0gyNy43NzgxTDIxLjQwMDkgMTIuMTMwMUwzMi43MDc3IDAuMzEyMjU2WiIgZmlsbD0iIzY2MTgwMCIvPgo8cGF0aCBkPSJNMjEuODMzIDIwLjQxOTlIMjQuMDY5NEwyNS4yODUzIDIxLjYwNzlMMjAuOTYwNCAyMi42NzZMMjEuODMzIDIwLjQxODJWMjAuNDE5OVoiIGZpbGw9IiM2NjE4MDAiLz4KPHBhdGggZD0iTTE5LjQ4MTcgMzAuODM2MkwxOS45OTExIDI4Ljk3OTRMMTguOTY1OCAyNy44NDIzSDE2LjAzMjdMMTUuMDA3MyAyOC45Nzk0TDE1LjUxNjcgMzAuODM2MiIgZmlsbD0iIzY2MTgwMCIvPgo8cGF0aCBkPSJNMTkuNDgxNiAzMC44MzU5VjMzLjkwMjFIMTUuNTE2NlYzMC44MzU5SDE5LjQ4MTZaIiBmaWxsPSIjQzBDNENEIi8+CjxwYXRoIGQ9Ik05LjgyOTU5IDMwLjUxNDJMMTUuNTIgMzMuOTAwOFYzMC44MzQ2TDE1LjAxMDYgMjguOTc3OEw5LjgyOTU5IDMwLjUxNDJaIiBmaWxsPSIjRTdFQkY2Ii8+CjxwYXRoIGQ9Ik0yNS4xNzIxIDMwLjUxNDJMMTkuNDgxNyAzMy45MDA4VjMwLjgzNDZMMTkuOTkxMSAyOC45Nzc4TDI1LjE3MjEgMzAuNTE0MloiIGZpbGw9IiNFN0VCRjYiLz4KPC9zdmc+",
+ walletConnect:
+ "data:image/webp;base64,UklGRoQFAABXRUJQVlA4IHgFAAAQHwCdASp4AHgAPkkkjUSioiEVDGQYKASEsQBrTdi9V/GD8mflPpT9Q+7PEdo66nv5H8k/qfWK8wD+Afwn/AfxP+d9gDzAfar7wHoY/4vqAf6DqAOfE9iL+2/679o/Zd9QD//+oB//5lWRX6GuwHaY3eTHXFDyf94MY8zXvW3sC+Ux7Ff3I9lUnxBszMzMi+F8vttSqgutQquCB9o/6xQmMK42Q/WbdImEUpOqAd6u9h29GS1GgtbyEG2sDVzO4ZMHRCs1Z+SDbXLhIp6P3MCv8qbQY5kqbkHw1whDyDmZDXnO2N0BG0kh4OJlQEVeNeizP7fD34527u7u7u7u7u7sAAD+6Isf/94lW/WpT/f/+3OgFGaTgAAGDhlRYjGqZQcAAT9yh1vvJ8zrnfD5w65SpgvO8JdZndGf06eAg4abEWdwfNrhPidbW62baoeoW6QKe6Po6a3SfDgUxTkBiyfa6aQUtIUGi1uBLXPRARZxxk1RzVeP7tX4YVlU46ZT4F21rfa+L9KZhfgsVYoGdfucm3vMShtAjG1KrxQXIerWSCwntsXHunyedtYaZoKtyPde5PXpW7xpVP32KCdQU5pFOncjUdeC5f0rzo6/PnTKPTrdy16JvvX7zEKrr+WqEZb5hXukMwo6N8Ih6/Emwxd8FgnLe8b5Bnn7k/uM+szg3FzzTeXQeufvevm98uB2YZN/M5Yjadke6+6hxX9Yg6K84Ph+iAklF9vUUs3R38v6EYfsZZ6EyjnjxA+y+Bgr94Mgjuv9vmgfQkpNGC9xgu3TSWRVS0wC37go5DrovSTTs3E8ZiKPerDFKcBNvadynIfa6hFM3wvSQ0SodZsHlh7j6vPa+mtK2EuUN+I0VTKuwuGpPTIo/jrtfdXtSHgjEfm94ypk3Wor04YhlhPB766ggMJBtI4m9/Y6zTBgcG7c28W7SB5v8Vub8I3wuLcqJLP3kAaoVHwAoydvZojNzfsmP6MwbhR1Lr5tsZVH31IUEbg76DrQ+i2ZOTl9qCKDwiQhV5k35/DZGlQDNQg5gXrPDhFUBpIBmyhJize4Z13x54n2sf/RDdrj/51FBrl0d8sNmUeP7FeNGkz5/T7W0NEWBZwxHn2MhV02YkbceGkR583AW98Gvxj5OMHAgfNi39ttJOupfJ7/NOz8W/Z0k5d/sxuyfqQhs7yPDgqxdIWvW0493pAePUIxY0eW2x7bZxfF6l2CSpAuTZQ4/7F7nU0Jc5q2qruF453uW5aGcDv7hb73x1LFBj/w6PxrMjACi/3FWRhZACmvX8Ec5wdWI0K3QsCTSmc7bpk0f17rrgqv/U0iLrqrUuLOc9InkhsxB/5jVsTG37gbkbFFqZSyXBksIuJ0aKHo4MFkTr8N9Tg7d3RRRDNQHtpm+4eG9hpNK+fkJEoQ6Ne3VYoe8sg114BI9eVPqXK3xestyFZNeS16I2gewgFTLNcar8155bz4WSLgTGccxGOSbNv0d1zuTd5o8wdP7oEb4tnT+KMdnjrgVHcvhhUnHFeaFJLXUYdUKzgN37EDPajnygrfldc0NOoNj5Bamnxlq9EEDwGeLI5wJbXCYjOU4Dz5pbDtJsM2MgPQEUfMwRvocWG+DdXe6ETfjIX0H6zr0n3fasZGGmMqFCNZcVMctEx5+mqAG+JnWvd54aoOizkzCMhmYb14IcfiocgQ3KsD3gIC4rQV9E2XaUImdbfMpGF61/wqGvda6aRDxtHd1ncqrv43wQX3Fx21uN1knQwmrwi62tw4Wowsd5IbrPWsl1jMbRdwDkvscxEqzllnBxtHcAVIz5yzQ3NTCMmOkWVm77vmiJmqtx2MBoXs3Y6uVDgNkhNfu7Mvc3jMAAAAAAAAAA==",
+ coinbase:
+ "data:image/webp;base64,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",
+ safe: "data:image/webp;base64,UklGRmwEAABXRUJQVlA4IGAEAAAQHQCdASp4AHgAPkkijUQioqEXTPQAKASEoA1XnRfpv4k+DZc/rX4v/lH00e+XfT9pfcBlxn2j8o/7d86f4B/gP41+gHyA8wD9AP7R9oHCA/YD/Jf4D3dP8B/gP8B2AH6ucAB+uXpT/7T3V/2p/0H9m9krNM/7B1cq5zK976PADTDTNfHc+PLcMbk9SFTCv8ZK3c2kA4wxWaJEMekH7chiyjmezfBnGX7l6ZLEA/jDMtgB36h24aGBseH81LSvxBz2xwNujw/xoPLk6GGfe7gLfF2YZ3Zkq3NMEt21YwfxpCxuKElykJJrRDqMJGuBLfCAAP7wYCBRUOxLnuefomvomJgo+dAB3q+0mhgl9zX5m2b0zxrt/3BrCkvWTPpubP4mKKCrfGVI184WtIxifdw//FbCgy0ECDSgBGTtg6PQ1me430CfaGQwNqFjiuMWV381BhXRq7hzE2rtUWjMvT7W3oWJUfPOnY1KIThNxn2cBTQ5owd5fdSenGZckR6V43Ipk9FB7X6MGSRUo3wpoq5VUm+JQsgi/VkAAD3vyuWknHeTw/rP0cKYmZHkuVoA9E0xdcWDQdZO0Qt1wrosPu5BSsFF5osjLFb/v+n5jVASMrMZz/tW35s3GmY9cALgOWXNzgkWXb30BEciwVYgxAvPmnHrQRPGHXt8GBYM7Gi2dXm3RGyHtWpHgSO3jPN0CyGqrECxvuYOkX/hVNBo1KPWsQvgdEKbmw2x50cEOuJqy0E+VKMAfoYM7SeflkVUSiMpNdcA9zEeidL4Sc42m2blDop7c61kxw4ynW6aIgMdAzW/zWiDtILZSgyKk/Ee/ksyY6hmsFrTkxyBLG4KQgrlFXZR/3YLaC3FfH0pL5yUlo/FdRG4lxBm8pHASmePW/oASzAMaHfI8xBv04BjOavXJCxxlQ5/j7F6ShqFhTo+0u5HrJII7Ab25IiXUTSo5MvT42erBSNNo+gV9vqv0kNieeGlqh++PmE2ONC8Ozay7U/NCCTjVgQEMCJ1zEDdc6qkAT9yBTFGShGh/8LUqqhem5Ln2ZT1+SX79SkUP+xubo3cJsCVNxtQtZ6oG1xOCZaNiOdAdx0hcWKmGPTRfJpR+7DqQ9vpc6Sx4G4NCsyB9VpvLoiwZwKw4Aq8AcLwJ4h8geguxsBGaT0BJKGTpOb/JFaHLfDPiCVIrgezK7WFRxtSKKWun4bVDF5YUupz620xC6639ore7sZXvYN7ZneX2vMmR1a+Usq9Z5gfqVNvXOHD3a96PqvHj47SeZ9bQFy1n570OcCrj8fkfNT6jLcdF1iTbK7i9/Yw+5oTz7M4Koda9E8jKW4obgrb2EwkgMYIm0D+/6+O8s+jRgHhxLW/mDExy8avr0XAUtZjnBiWM/nEc5zMBckPwsSsg9tm8RqxV4bV3U6kNDC9FvAjFjDv9BdpHGCJiGaj9vFM7x7poRHF9vAqKGkuIkSTP/tx+Wj/80cBl4DUhdykoAAAAAAA",
+ requestNetwork:
+ "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0MiA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzFfMjQ2MSkiPgo8cGF0aCBkPSJNMjguMjIzMyAyNC43NjIxTDM5LjU2NTMgMTMuOTMxM0M0MC40MTc1IDEzLjEyNDMgNDAuODk1MiAxMi4wMTI2IDQwLjg5NTIgMTAuODY0OUw0MC45MTM5IDIuMTE0MjNDNDAuOTEzOSAxLjY2NTkzIDQwLjczNiAxLjIzNTU3IDQwLjQwODIgMC45MTI3OTZMMTguNjUxNiAyMS43MDQ3QzE2Ljg4MTQgMjMuMzgxMyAxNi44NzIxIDI2LjExNTkgMTguNjIzNSAyNy44MDE1TDE4LjY1MTYgMjcuODI4NEwzMy45OTI2IDQyLjQ2OTdDMzUuNzYyOCA0NC4xNTUzIDM4LjYyODcgNDQuMTQ2MyA0MC4zODAxIDQyLjQ1MThDNDIuMTQwOCA0MC43NTcyIDQyLjEzMTUgMzguMDEzNiA0MC4zNjEzIDM2LjMzN0wyOC4yMjMzIDI0Ljc2MjFaIiBmaWxsPSIjMzI4OTY1Ii8+CjxwYXRoIGQ9Ik00MC42ODA4IC0yLjQ0MzEySDUuMDEzNUMyLjEzMDggLTIuNDQzMTIgMC4wMDA1MzY2OTQgLTAuMjk3MTE3IDAuMDAwNTM2Njk0IDIuNjI4MzhWMzkuMjc0MUMtMC4wMzg1NTA4IDQxLjg0MzUgMi4wNjI0IDQzLjk2MDcgNC42NzE0OSA0My45OTkySDQuNzg4NzVDNy4zODgwNiA0NC4wNDczIDkuNTM3ODcgNDEuOTk3NSA5LjU4NjczIDM5LjQzNzdWNi41OTMySDMzLjMxMjhMNDIgLTEuOTIzNDZDNDEuNjQ4MiAtMi4yNjk5IDQxLjE3OTIgLTIuNDYyMzcgNDAuNjgwOCAtMi40NDMxMloiIGZpbGw9IiM1OEUxQTUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xXzI0NjEiPgo8cmVjdCB3aWR0aD0iNDIiIGhlaWdodD0iNDQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==",
+ defaultWallet:
+ "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIyLjg4IDEwMS4zMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIyLjg4IDEwMS4zMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05MC42MiwzMy4zMmgxOC40di0yLjc5Yy0yLjg4LTEwLjczLTEwLjItMTAuNjYtMTkuMjUtMTAuNTdjLTEuNDksMC4wMi0yLjg0LDAuMDMtMi45MiwwLjAzSDE4LjA3IGMtMS41OCwwLTIuODYtMS4yOC0yLjg2LTIuODZjMC0xLjU4LDEuMjgtMi44NiwyLjg2LTIuODZoNjguNzhjMi4wMywwLDIuNDYsMCwyLjg3LTAuMDFjNy43NC0wLjA4LDE0LjUtMC4xNSwxOS4zLDQuMzh2LTEuMzEgYzAtMy4yLTEuMzEtNi4xLTMuNDItOC4yMWMtMi4xMS0yLjExLTUuMDItMy40Mi04LjIxLTMuNDJIMTcuMzRjLTMuMiwwLTYuMSwxLjMxLTguMjEsMy40MmMtMi4xMSwyLjExLTMuNDIsNS4wMi0zLjQyLDguMjF2NjYuNjQgYzAsMy4yLDEuMzEsNi4xLDMuNDIsOC4yMWMyLjExLDIuMTEsNS4wMiwzLjQyLDguMjEsMy40Mmg4MC4wNGMzLjIsMCw2LjEtMS4zMSw4LjIxLTMuNDJjMi4xMS0yLjExLDMuNDItNS4wMiwzLjQyLTguMjF2LTkuNDYgaC0xOC40Yy01LjU1LDAtMTAuNi0yLjI3LTE0LjI1LTUuOTJjLTMuNjUtMy42NS01LjkyLTguNy01LjkyLTE0LjI1di0wLjg3YzAtNS41NSwyLjI3LTEwLjYsNS45Mi0xNC4yNSBDODAuMDIsMzUuNTksODUuMDYsMzMuMzIsOTAuNjIsMzMuMzJMOTAuNjIsMzMuMzJ6IE0xMTQuNzMsMzMuNDNjMi4wNywwLjMxLDMuOTIsMS4yOSw1LjMzLDIuNzFjMS43NCwxLjc0LDIuODEsNC4xNCwyLjgxLDYuNzggdjIxLjZjMCwyLjc2LTEuMTIsNS4yNi0yLjkzLDcuMDdjLTEuMzksMS4zOS0zLjIsMi4zOC01LjIxLDIuNzZ2OS42M2MwLDQuNzctMS45NSw5LjExLTUuMDksMTIuMjUgYy0zLjE0LDMuMTQtNy40OCw1LjA5LTEyLjI1LDUuMDlIMTcuMzRjLTQuNzcsMC05LjExLTEuOTUtMTIuMjUtNS4wOUMxLjk1LDkzLjEsMCw4OC43NiwwLDgzLjk5VjE3LjM0IGMwLTQuNzcsMS45NS05LjExLDUuMDktMTIuMjVDOC4yMywxLjk1LDEyLjU3LDAsMTcuMzQsMGg4MC4wNGM0Ljc3LDAsOS4xMSwxLjk1LDEyLjI1LDUuMDljMy4xNCwzLjE0LDUuMDksNy40OCw1LjA5LDEyLjI1VjMzLjQzIEwxMTQuNzMsMzMuNDN6IE04OC4xNCw0Ni4xMWM0LjA1LDAsNy4zMywzLjI4LDcuMzMsNy4zM2MwLDQuMDUtMy4yOCw3LjMzLTcuMzMsNy4zM2MtNC4wNSwwLTcuMzMtMy4yOC03LjMzLTcuMzMgQzgwLjgxLDQ5LjM5LDg0LjA5LDQ2LjExLDg4LjE0LDQ2LjExTDg4LjE0LDQ2LjExeiIvPjwvZz48L3N2Zz4=",
+};
diff --git a/src/components/payment-widget/context/payment-widget-context/index.ts b/src/components/payment-widget/context/payment-widget-context/index.ts
new file mode 100644
index 00000000..e382aea2
--- /dev/null
+++ b/src/components/payment-widget/context/payment-widget-context/index.ts
@@ -0,0 +1,36 @@
+import { createContext } from "react";
+import type { ReceiptInfo, FeeInfo, PaymentError } from "../../types/index";
+import type { TransactionReceipt, WalletClient } from "viem";
+
+export interface PaymentWidgetContextValue {
+ amountInUsd: string;
+ recipientWallet: string;
+
+ walletAccount?: WalletClient;
+ connectedWalletAddress?: string;
+ isWalletOverride: boolean;
+
+ paymentConfig: {
+ reference?: string;
+ rnApiClientId: string;
+ feeInfo?: FeeInfo;
+ supportedCurrencies: string[];
+ };
+
+ uiConfig: {
+ showRequestScanUrl: boolean;
+ showReceiptDownload: boolean;
+ };
+
+ receiptInfo: ReceiptInfo;
+
+ onPaymentSuccess?: (
+ requestId: string,
+ transactionReceipts: TransactionReceipt[],
+ ) => void | Promise
+
+
+
+
+
+ {receipt.company.name}
+
+ {receipt.company.address && (
+ <>
+
+ {receipt.company.address.street}
+
+ {receipt.company.address.city},{" "}
+ {receipt.company.address.state}{" "}
+ {receipt.company.address.postalCode}{" "}
+ {receipt.company.address.country}
+
+
+ )}
+ {receipt.company.email && {receipt.company.email}
}
+ {receipt.company.taxId && (
+ Tax ID: {receipt.company.taxId}
+ )}
+
+
+ REC
+
+ #{receipt.metadata.receiptNumber}
+
+
+ {formatReceiptDate(receipt.metadata.issueDate)}
+
+
+
+
+
+
+
+ FROM
+{receipt.company.name}
+ {receipt.company.walletAddress}
+
+ {receipt.company.address && (
+ <>
+
+ {receipt.company.address.street}
+
+ {receipt.company.address.city},{" "}
+ {receipt.company.address.state}{" "}
+ {receipt.company.address.postalCode}{" "}
+ {receipt.company.address.country}
+
+
+ )}
+
+
+ TO
+
+ {[receipt.buyer.firstName, receipt.buyer.lastName]
+ .filter(Boolean)
+ .join(" ") || "Customer"}
+
+ {receipt.buyer.walletAddress}
+ {receipt.buyer.email && (
+ {receipt.buyer.email}
+ )}
+ {receipt.buyer.address && (
+
+
+ )}
+ {receipt.buyer.address.street}
+
+ {receipt.buyer.address.city}, {receipt.buyer.address.state}{" "}
+ {receipt.buyer.address.postalCode}{" "}
+ {receipt.buyer.address.country}
+
+
+
+
+
+ Payment Method:{" "}
+ {`${receipt.payment.currency} on ${receipt.payment.chain}`}
+
+ {receipt.payment.transactionHash && (
+
+ Transaction: {receipt.payment.transactionHash}
+
+ )}
+ | Description | +Qty | +Unit Price | +Disc% | +Tax% | +Total | +
|---|---|---|---|---|---|
| {item.description} | +{item.quantity} | ++ {formatCryptoAmount( + item.unitPrice.toString(), + item.currency || receipt.payment.currency, + )} + | +{item.discount || 0}% | +{item.tax || 0}% | ++ {formatCryptoAmount( + item.total.toString(), + item.currency || receipt.payment.currency, + )} + | +
+
+
+ {receipt.metadata.notes && (
+
+ {receipt.totals.totalDiscount.length > 0 && (
+
+
+ Discount:
+
+ -
+ {formatCryptoAmount(
+ receipt.totals.totalDiscount.toString(),
+ receipt.payment.currency,
+ )}
+
+
+ )}
+
+ {receipt.totals.totalTax.length > 0 && (
+
+ Tax:
+
+ {formatCryptoAmount(
+ receipt.totals.totalTax.toString(),
+ receipt.payment.currency,
+ )}
+
+
+ )}
+
+
+ Subtotal:
+
+ {formatCryptoAmount(
+ receipt.payment.amount,
+ receipt.payment.currency,
+ )}
+
+
+
+
+ TOTAL (USD):
+
+ {formatUSDAmount(receipt.totals.totalUSD)}
+
+
+
+ Notes: {receipt.metadata.notes}
+
+ )}
+
+
+
+
+ );
+}
+
+export function PaymentWidget({
+ amountInUsd,
+ recipientWallet,
+ paymentConfig,
+ receiptInfo,
+ onPaymentSuccess,
+ onPaymentError,
+ uiConfig,
+ walletAccount,
+ children,
+}: PaymentWidgetProps) {
+ return (
+
+ 
+ Powered by Request Network
+
+
+ {walletAccount !== undefined ? (
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef{children}
+); + export { useFormField, Form, @@ -180,4 +184,5 @@ export { FormDescription, FormMessage, FormField, + FormError, }; diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx new file mode 100644 index 00000000..483dc695 --- /dev/null +++ b/src/components/ui/popover.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import { cn } from "@/lib/utils" + +const Popover = PopoverPrimitive.Root + +const PopoverTrigger = PopoverPrimitive.Trigger + +const PopoverContent = React.forwardRef< + React.ElementRef