@@ -192,8 +196,9 @@ export const Playground = () => {
paymentConfig={formValues.paymentConfig}
uiConfig={formValues.uiConfig}
receiptInfo={formValues.receiptInfo}
- onSuccess={(requestId) => console.log('Payment successful:', requestId)}
- onError={(error) => console.error('Payment failed:', error)}
+ onPaymentSuccess={(requestId) => console.log('Payment successful:', requestId)}
+ onPaymentError={(error) => console.error('Payment failed:', error)}
+ onComplete={() => console.log('Payment process completed')}
>
Pay with crypto
diff --git a/src/components/payment-widget/README.md b/src/components/payment-widget/README.md
index 9f4f329..8529043 100644
--- a/src/components/payment-widget/README.md
+++ b/src/components/payment-widget/README.md
@@ -74,8 +74,8 @@ function App() {
totalTax: 0.00,
},
}}
- onSuccess={(requestId, transactionReceipts) => console.log("Payment successful:", requestId, transactionReceipts)}
- onError={(error) => console.error("Payment failed:", error)}
+ onPaymentSuccess={(requestId, transactionReceipts) => console.log("Payment successful:", requestId, transactionReceipts)}
+ onPaymentError={(error) => console.error("Payment failed:", error)}
/>
);
}
@@ -212,11 +212,11 @@ function App() {
### Event Handlers
-#### `onSuccess` (optional)
+#### `onPaymentSuccess` (optional)
- **Type**: `(requestId: string) => void | Promise
`
- **Description**: Callback function called when payment is successfully completed. Receives the Request Network request ID.
-#### `onError` (optional)
+#### `onPaymentError` (optional)
- **Type**: `(error: PaymentError) => void | Promise`
- **Description**: Callback function called when payment fails. Receives detailed error information.
@@ -234,6 +234,35 @@ function App() {
```
+## PaymentWidget Props
+
+### onComplete
+Optional callback that fires when the user closes the payment widget from the success screen. Use this to handle post-payment cleanup or navigation.
+
+```tsx
+ {
+ // Close modal, redirect user, etc.
+ console.log("Payment flow completed");
+ }}
+/>
+```
+
+### PaymentConfig.reference
+Optional string to associate with the payment request for your own tracking purposes. This reference will be stored with the Request Network payment data.
+
+```tsx
+
+```
+
## Styling and Theming
The Payment Widget uses Tailwind CSS and respects your application's design system through CSS custom properties. The following variables can be customized:
@@ -280,8 +309,8 @@ function PaymentWithExistingWallet() {
receiptInfo={{
// ... your receipt info
}}
- onSuccess={(requestId) => console.log("Payment successful:", requestId)}
- onError={(error) => console.error("Payment failed:", error)}
+ onPaymentSuccess={(requestId) => console.log("Payment successful:", requestId)}
+ onPaymentError={(error) => console.error("Payment failed:", error)}
>
Pay with My Connected Wallet
@@ -333,7 +362,7 @@ The widget includes comprehensive error handling for common scenarios:
- **Invalid wallet addresses**
- **API rate limiting**
-All errors are passed to the `onError` callback with detailed error information for debugging and user feedback.
+All errors are passed to the `onPaymentError` callback with detailed error information for debugging and user feedback.
## Browser Support
diff --git a/src/components/payment-widget/components/currency-select.tsx b/src/components/payment-widget/components/currency-select.tsx
index 790c3a7..5b82d95 100644
--- a/src/components/payment-widget/components/currency-select.tsx
+++ b/src/components/payment-widget/components/currency-select.tsx
@@ -10,7 +10,7 @@ import {
type ConversionCurrency,
} from "../utils/currencies";
import { Check } from "lucide-react";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
interface CurrencySelectProps {
onSubmit: (currency: ConversionCurrency) => void;
diff --git a/src/components/payment-widget/components/payment-confirmation.tsx b/src/components/payment-widget/components/payment-confirmation.tsx
index db59bd0..0a7b93a 100644
--- a/src/components/payment-widget/components/payment-confirmation.tsx
+++ b/src/components/payment-widget/components/payment-confirmation.tsx
@@ -7,10 +7,10 @@ import {
getSymbolOverride,
type ConversionCurrency,
} from "../utils/currencies";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
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;
@@ -32,9 +32,9 @@ export function PaymentConfirmation({
amountInUsd,
recipientWallet,
connectedWalletAddress,
- paymentConfig: { rnApiClientId, feeInfo },
+ paymentConfig: { rnApiClientId, feeInfo, reference },
receiptInfo: { companyInfo: { name: companyName } = {} },
- onError,
+ onPaymentError,
walletAccount,
} = usePaymentWidgetContext();
const { isExecuting, executePayment } = usePayment(
@@ -58,6 +58,7 @@ export function PaymentConfirmation({
amountInUsd,
recipientWallet,
paymentCurrency: selectedCurrency.id,
+ reference,
feeInfo,
customerInfo: {
email: buyerInfo.email,
@@ -97,7 +98,7 @@ export function PaymentConfirmation({
}
setLocalError(errorMessage);
- onError?.(paymentError);
+ onPaymentError?.(paymentError);
}
};
diff --git a/src/components/payment-widget/components/payment-modal.tsx b/src/components/payment-widget/components/payment-modal.tsx
index 5907a1d..0763b75 100644
--- a/src/components/payment-widget/components/payment-modal.tsx
+++ b/src/components/payment-widget/components/payment-modal.tsx
@@ -13,10 +13,10 @@ import { BuyerInfoForm } from "./buyer-info-form";
import { PaymentConfirmation } from "./payment-confirmation";
import { PaymentSuccess } from "./payment-success";
import { DisconnectWallet } from "./disconnect-wallet";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
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;
@@ -27,7 +27,7 @@ export function PaymentModal({
isOpen,
handleModalOpenChange,
}: PaymentModalProps) {
- const { isWalletOverride, receiptInfo, onSuccess } =
+ const { isWalletOverride, receiptInfo, onPaymentSuccess, onComplete } =
usePaymentWidgetContext();
const [activeStep, setActiveStep] = useState<
@@ -63,7 +63,7 @@ export function PaymentModal({
transactionReceipts[transactionReceipts.length - 1].transactionHash,
);
setActiveStep("payment-success");
- await onSuccess?.(requestId, transactionReceipts);
+ await onPaymentSuccess?.(requestId, transactionReceipts);
};
const reset = () => {
@@ -80,6 +80,7 @@ export function PaymentModal({
// reset modal state when closing from success step
if (!isOpen && activeStep === "payment-success") {
reset();
+ onComplete?.();
}
handleModalOpenChange(isOpen);
}}
diff --git a/src/components/payment-widget/components/payment-success.tsx b/src/components/payment-widget/components/payment-success.tsx
index aaa95e0..1e6fe76 100644
--- a/src/components/payment-widget/components/payment-success.tsx
+++ b/src/components/payment-widget/components/payment-success.tsx
@@ -9,9 +9,9 @@ import {
} from "../utils/receipt";
import { useRef } from "react";
import { ReceiptPDFTemplate } from "../components/receipt/receipt-template";
-import { usePaymentWidgetContext } from "../context/payment-widget-context";
import type { BuyerInfo } from "../types/index";
import type { ConversionCurrency } from "../utils/currencies";
+import { usePaymentWidgetContext } from "../context/payment-widget-context/use-payment-widget-context";
interface PaymentSuccessProps {
requestId: string;
@@ -45,7 +45,7 @@ export function PaymentSuccess({
walletAddress: connectedWalletAddress || "",
},
payment: {
- amount: amountInUsd, // TODO connect to actual payout and exchange rate
+ amount: amountInUsd,
chain: selectedCurrency.network,
currency: selectedCurrency.symbol,
exchangeRate: "1",
@@ -69,18 +69,37 @@ export function PaymentSuccess({
return;
}
- const html2pdf = (await import("html2pdf.js")).default;
+ const html2canvas = (await import("html2canvas-pro")).default;
+ const jsPDF = (await import("jspdf")).default;
- html2pdf()
- .set({
- margin: 1,
- filename: `receipt-${receiptParams.metadata?.receiptNumber || "payment"}.pdf`,
- image: { type: "jpeg", quality: 0.98 },
- html2canvas: { scale: 2 },
- jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
- })
- .from(element)
- .save();
+ const canvas = await html2canvas(element, {
+ scale: 2,
+ useCORS: true,
+ backgroundColor: "#ffffff",
+ width: element.scrollWidth,
+ height: element.scrollHeight,
+ windowWidth: element.scrollWidth,
+ windowHeight: element.scrollHeight,
+ });
+
+ const pdf = new jsPDF("p", "mm", "a4");
+ const imgData = canvas.toDataURL("image/png");
+
+ const pageWidth = 210;
+ const pageHeight = 297;
+ const margin = 10;
+ let imgWidth = pageWidth - margin * 2;
+ let imgHeight = (canvas.height * imgWidth) / canvas.width;
+ const maxHeight = pageHeight - margin * 2;
+ if (imgHeight > maxHeight) {
+ const ratio = maxHeight / imgHeight;
+ imgWidth = imgWidth * ratio;
+ imgHeight = imgHeight * ratio;
+ }
+ pdf.addImage(imgData, "PNG", margin, margin, imgWidth, imgHeight);
+ pdf.save(
+ `receipt-${receiptParams.metadata?.receiptNumber || "payment"}.pdf`,
+ );
} catch (error) {
console.error("Failed to download receipt:", error);
alert("Failed to download receipt. Please try again.");
@@ -118,6 +137,8 @@ export function PaymentSuccess({
top: 0,
opacity: 0,
pointerEvents: "none",
+ width: "800px",
+ backgroundColor: "white",
}}
>
diff --git a/src/components/payment-widget/components/receipt/styles.css b/src/components/payment-widget/components/receipt/styles.css
index ea2faf0..494bb36 100644
--- a/src/components/payment-widget/components/receipt/styles.css
+++ b/src/components/payment-widget/components/receipt/styles.css
@@ -1,6 +1,6 @@
.receipt-container {
background-color: #ffffff;
- padding: 20px;
+ padding: 32px;
max-width: 800px;
margin: 0 auto;
font-family:
diff --git a/src/components/payment-widget/constants.ts b/src/components/payment-widget/constants.ts
index 20e2ef1..84b920d 100644
--- a/src/components/payment-widget/constants.ts
+++ b/src/components/payment-widget/constants.ts
@@ -1,5 +1,6 @@
export const RN_API_URL =
- process.env.NEXT_PUBLIC_REQUEST_API_URL || "https://api.request.network";
+ (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+",
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 0000000..e382aea
--- /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
;
+ onPaymentError?: (error: PaymentError) => void | Promise;
+ onComplete?: () => void | Promise;
+}
+
+export const PaymentWidgetContext =
+ createContext(null);
diff --git a/src/components/payment-widget/context/payment-widget-context.tsx b/src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx
similarity index 59%
rename from src/components/payment-widget/context/payment-widget-context.tsx
rename to src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx
index f33b79a..acbe282 100644
--- a/src/components/payment-widget/context/payment-widget-context.tsx
+++ b/src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx
@@ -1,42 +1,11 @@
"use client";
-import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
import { useAccount } from "wagmi";
-import type { ReceiptInfo, FeeInfo, PaymentError } from "../types/index";
+import type { ReceiptInfo, PaymentError } from "../../types/index";
import type { TransactionReceipt, WalletClient } from "viem";
-import type { PaymentWidgetProps } from "../payment-widget.types";
-
-export interface PaymentWidgetContextValue {
- amountInUsd: string;
- recipientWallet: string;
-
- walletAccount?: WalletClient;
- connectedWalletAddress?: string;
- isWalletOverride: boolean;
-
- paymentConfig: {
- rnApiClientId: string;
- feeInfo?: FeeInfo;
- supportedCurrencies: string[];
- };
-
- uiConfig: {
- showRequestScanUrl: boolean;
- showReceiptDownload: boolean;
- };
-
- receiptInfo: ReceiptInfo;
-
- onSuccess?: (
- requestId: string,
- transactionReceipts: TransactionReceipt[],
- ) => void | Promise;
- onError?: (error: PaymentError) => void | Promise;
-}
-
-const PaymentWidgetContext = createContext(
- null,
-);
+import type { PaymentWidgetProps } from "../../payment-widget.types";
+import { PaymentWidgetContext, type PaymentWidgetContextValue } from "./index";
interface PaymentWidgetProviderProps {
children: ReactNode;
@@ -49,11 +18,12 @@ interface PaymentWidgetProviderProps {
>;
uiConfig?: PaymentWidgetProps["uiConfig"];
receiptInfo: ReceiptInfo;
- onSuccess?: (
+ onPaymentSuccess?: (
requestId: string,
transactionReceipts: TransactionReceipt[],
) => void | Promise;
- onError?: (error: PaymentError) => void | Promise;
+ onPaymentError?: (error: PaymentError) => void | Promise;
+ onComplete?: () => void | Promise;
}
export function PaymentWidgetProvider({
@@ -64,8 +34,9 @@ export function PaymentWidgetProvider({
paymentConfig,
uiConfig,
receiptInfo,
- onSuccess,
- onError,
+ onPaymentSuccess,
+ onPaymentError,
+ onComplete,
}: PaymentWidgetProviderProps) {
const { address } = useAccount();
@@ -82,6 +53,7 @@ export function PaymentWidgetProvider({
connectedWalletAddress,
isWalletOverride,
paymentConfig: {
+ reference: paymentConfig.reference,
rnApiClientId: paymentConfig.rnApiClientId,
feeInfo: paymentConfig.feeInfo,
supportedCurrencies: paymentConfig.supportedCurrencies,
@@ -91,8 +63,9 @@ export function PaymentWidgetProvider({
showRequestScanUrl: uiConfig?.showRequestScanUrl ?? true,
},
receiptInfo,
- onSuccess,
- onError,
+ onPaymentSuccess,
+ onPaymentError,
+ onComplete,
}),
[
amountInUsd,
@@ -103,11 +76,13 @@ export function PaymentWidgetProvider({
paymentConfig.rnApiClientId,
paymentConfig.feeInfo,
paymentConfig.supportedCurrencies,
+ paymentConfig.reference,
uiConfig?.showReceiptDownload,
uiConfig?.showRequestScanUrl,
receiptInfo,
- onSuccess,
- onError,
+ onPaymentSuccess,
+ onPaymentError,
+ onComplete,
],
);
@@ -117,15 +92,3 @@ export function PaymentWidgetProvider({
);
}
-
-export function usePaymentWidgetContext(): PaymentWidgetContextValue {
- const context = useContext(PaymentWidgetContext);
-
- if (!context) {
- throw new Error(
- "usePaymentWidgetContext must be used within a PaymentWidgetProvider",
- );
- }
-
- return context;
-}
diff --git a/src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts b/src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts
new file mode 100644
index 0000000..632e89a
--- /dev/null
+++ b/src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { type PaymentWidgetContextValue, PaymentWidgetContext } from "./index";
+
+export function usePaymentWidgetContext(): PaymentWidgetContextValue {
+ const context = useContext(PaymentWidgetContext);
+
+ if (!context) {
+ throw new Error(
+ "usePaymentWidgetContext must be used within a PaymentWidgetProvider",
+ );
+ }
+
+ return context;
+}
diff --git a/src/components/payment-widget/hooks/use-payment.ts b/src/components/payment-widget/hooks/use-payment.ts
index dc6d3e0..f8c6839 100644
--- a/src/components/payment-widget/hooks/use-payment.ts
+++ b/src/components/payment-widget/hooks/use-payment.ts
@@ -100,6 +100,7 @@ export const usePayment = (network: string, walletAccount?: WalletClient) => {
paymentCurrency: params.paymentCurrency,
feeInfo: params.feeInfo,
customerInfo: params.customerInfo,
+ reference: params.reference,
},
sendTransaction: wrappedSendTransaction,
waitForTransaction: wrappedWaitForTransaction,
diff --git a/src/components/payment-widget/payment-widget.tsx b/src/components/payment-widget/payment-widget.tsx
index 7e95ef2..e0eb7cb 100644
--- a/src/components/payment-widget/payment-widget.tsx
+++ b/src/components/payment-widget/payment-widget.tsx
@@ -5,12 +5,10 @@ import { Button } from "@/components/ui/button";
import { ConnectionHandler } from "./components/connection-handler";
import { Web3Provider } from "./context/web3-context";
import { PaymentModal } from "./components/payment-modal";
-import {
- PaymentWidgetProvider,
- usePaymentWidgetContext,
-} from "./context/payment-widget-context";
+import { PaymentWidgetProvider } from "./context/payment-widget-context/payment-widget-provider";
import type { PaymentWidgetProps } from "./payment-widget.types";
import { ICONS } from "./constants";
+import { usePaymentWidgetContext } from "./context/payment-widget-context/use-payment-widget-context";
function PaymentWidgetInner({ children }: PropsWithChildren) {
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -91,8 +89,8 @@ export function PaymentWidget({
recipientWallet,
paymentConfig,
receiptInfo,
- onSuccess,
- onError,
+ onPaymentSuccess,
+ onPaymentError,
uiConfig,
walletAccount,
children,
@@ -106,8 +104,8 @@ export function PaymentWidget({
paymentConfig={paymentConfig}
uiConfig={uiConfig}
receiptInfo={receiptInfo}
- onSuccess={onSuccess}
- onError={onError}
+ onPaymentSuccess={onPaymentSuccess}
+ onPaymentError={onPaymentError}
>
{children}
diff --git a/src/components/payment-widget/payment-widget.types.ts b/src/components/payment-widget/payment-widget.types.ts
index 0ae5eff..10bd714 100644
--- a/src/components/payment-widget/payment-widget.types.ts
+++ b/src/components/payment-widget/payment-widget.types.ts
@@ -5,6 +5,7 @@ import type { FeeInfo, ReceiptInfo, PaymentError } from "./types";
export interface PaymentConfig {
walletConnectProjectId?: string;
rnApiClientId: string;
+ reference?: string;
feeInfo?: FeeInfo;
supportedCurrencies: string[]; // an array of currency ids
}
@@ -59,10 +60,12 @@ export interface PaymentWidgetProps extends PropsWithChildren {
// Receipt information
receiptInfo: ReceiptInfo;
// On success callback when the payment is completed
- onSuccess?: (
+ onPaymentSuccess?: (
requestId: string,
receipts: TransactionReceipt[],
) => void | Promise;
// On error callback when the payment fails
- onError?: (error: PaymentError) => void | Promise;
+ onPaymentError?: (error: PaymentError) => void | Promise;
+ // Callback when the widget is closed from the success step
+ onComplete?: () => void | Promise;
}
diff --git a/src/components/payment-widget/utils/payment.ts b/src/components/payment-widget/utils/payment.ts
index c769c86..c673127 100644
--- a/src/components/payment-widget/utils/payment.ts
+++ b/src/components/payment-widget/utils/payment.ts
@@ -1,4 +1,4 @@
-import { TransactionReceipt } from "viem";
+import type { TransactionReceipt } from "viem";
import { RN_API_URL } from "../constants";
import type { FeeInfo, PaymentError } from "../types";
@@ -7,6 +7,7 @@ export interface PaymentParams {
payerWallet: string;
recipientWallet: string;
paymentCurrency: string;
+ reference?: string;
feeInfo?: FeeInfo;
customerInfo: {
// This matches the API spec
@@ -52,9 +53,12 @@ export type WaitForTransactionFunction = (
hash: `0x${string}`,
) => Promise;
-export const isPaymentError = (error: any): error is PaymentError => {
+export const isPaymentError = (error: unknown): error is PaymentError => {
return (
- error && typeof error === "object" && "type" in error && "error" in error
+ error !== null &&
+ typeof error === "object" &&
+ "type" in error &&
+ "error" in error
);
};
@@ -123,6 +127,7 @@ export const createPayout = async (
recipientWallet,
paymentCurrency,
feeInfo,
+ reference,
} = params;
const response = await fetch(`${RN_API_URL}/v2/payouts`, {
@@ -140,6 +145,7 @@ export const createPayout = async (
feePercentage: feeInfo?.feePercentage || undefined,
feeAddress: feeInfo?.feeAddress || undefined,
customerInfo: params.customerInfo,
+ reference,
}),
});
@@ -171,7 +177,7 @@ export const executePayment = async ({
try {
const errorData = await response.json();
errorMessage = errorData.error || errorData.message || errorMessage;
- } catch (_parsingError) {
+ } catch {
// If we can't parse the error response, just use status text
errorMessage = `HTTP ${response.status}: ${response.statusText}`;
}
diff --git a/src/components/payment-widget/utils/wagmi.ts b/src/components/payment-widget/utils/wagmi.ts
index 2ce3897..489ffb6 100644
--- a/src/components/payment-widget/utils/wagmi.ts
+++ b/src/components/payment-widget/utils/wagmi.ts
@@ -1,4 +1,4 @@
-import { createConfig, http } from "wagmi";
+import { createConfig, http, type CreateConnectorFn } from "wagmi";
import {
arbitrum,
base,
@@ -16,7 +16,7 @@ import {
} from "wagmi/connectors";
export const getWagmiConfig = (walletConnectProjectId?: string) => {
- const connectors = [
+ const connectors: CreateConnectorFn[] = [
injected(),
coinbaseWallet({
appName: "Request Network Payment",
@@ -38,7 +38,7 @@ export const getWagmiConfig = (walletConnectProjectId?: string) => {
showQrModal: true,
});
- connectors.push(connector as any);
+ connectors.push(connector);
} catch (error) {
console.error("WalletConnect creation failed:", error);
}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 4066961..cd241f8 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -40,4 +40,5 @@ export const CURRENCY_ID = {
FAU_SEPOLIA: "FAU-sepolia",
"ETH-ZKSYNC_ZKSYNCERA": "ETH-zksync-zksyncera",
"ETH-BASE_BASE": "ETH-base-base",
-} as const;
\ No newline at end of file
+} as const;
+export const EASY_INVOICE_URL = process.env.NEXT_PUBLIC_EASY_INVOICE_URL || "https://easyinvoice.request.network";
\ No newline at end of file
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index 2e20934..6cf8961 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -10,6 +10,7 @@ export const PlaygroundValidation = z.object({
// Payment config
paymentConfig: z.object({
walletConnectProjectId: z.string().optional(),
+ reference: z.string().optional(),
rnApiClientId: z.string().min(1, "API Client ID is required"),
feeInfo: z.object({
feePercentage: z.string(),