feat: add custom reference to checkout and update code for the PaymentWidget component

Author: bassgeta

package-lock.json

@@ -21,26 +21,28 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tanstack/react-query": "^5.89.0",
+    "@tanstack/react-query": "^5.90.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^4.1.0",
     "embla-carousel-autoplay": "^8.3.1",
     "embla-carousel-react": "^8.3.1",
     "framer-motion": "^11.3.28",
+    "html2canvas-pro": "^1.5.11",
     "html2pdf.js": "^0.12.1",
+    "jspdf": "^3.0.3",
     "lucide-react": "^0.542.0",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.62.0",
+    "react-hook-form": "^7.63.0",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "validator": "^13.12.0",
-    "viem": "^2.37.6",
-    "wagmi": "^2.16.9",
+    "viem": "^2.37.11",
+    "wagmi": "^2.17.5",
     "zod": "^3.23.8",
     "zustand": "^5.0.1"
   },

package.json

@@ -6,11 +6,13 @@ import { PaymentWidget } from "./payment-widget/payment-widget";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { EASY_INVOICE_URL } from "@/lib/constants";
+import { useRouter } from "next/navigation";
 
 export function PaymentStep() {
   const { tickets, clearTickets } = useTicketStore();
   const [total, setTotal] = useState(0);
   const [customClientId, setCustomClientId] = useState("");
+  const router = useRouter()
 
   useEffect(() => {
     const newTotal = Object.values(tickets).reduce(
@@ -104,6 +106,7 @@ export function PaymentStep() {
             amountInUsd={total.toString()}
             recipientWallet="0xb07D2398d2004378cad234DA0EF14f1c94A530e4"
             paymentConfig={{
+              reference: `ORDER-${Date.now()}`,
               rnApiClientId: clientId,
               supportedCurrencies: [
                 "ETH-sepolia-sepolia",
@@ -148,10 +151,11 @@ export function PaymentStep() {
               totals: invoiceTotals,
               receiptNumber: `REC-${Date.now()}`,
             }}
-            onSuccess={() => {
+            onComplete={() => {
               clearTickets();
+              router.push('/');
             }}
-            onError={(error) => {
+            onPaymentError={(error) => {
               console.error("Payment failed:", error);
             }}
           >

src/components/PaymentStep.tsx

@@ -148,6 +148,14 @@ export const CustomizeForm = () => {
         />
       </div>
 
+      <div className="flex flex-col gap-2">
+        <Label>Custom payment reference (Optional)</Label>
+        <Input
+          placeholder="your-custom-payment-reference"
+          {...register("paymentConfig.reference")}
+        />
+      </div>
+
       <div className="flex flex-col gap-2">
         <Label className="flex items-center">
           Supported Currencies

src/components/Playground/blocks/customize.tsx

@@ -27,6 +27,7 @@ export const Playground = () => {
       amountInUsd: "0",
       recipientWallet: "",
       paymentConfig: {
+        reference: undefined,
         walletConnectProjectId: undefined,
         rnApiClientId: "YOUR_CLIENT_ID_HERE",
         supportedCurrencies: [],
@@ -192,8 +193,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')}
             >
               <div className="px-8 py-2 bg-[#099C77] text-white rounded-lg hover:bg-[#087f63] transition-colors text-center">Pay with crypto</div>
             </PaymentWidget>

src/components/Playground/index.tsx

@@ -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<void>`
 - **Description**: Callback function called when payment is successfully completed. Receives the Request Network request ID.
 
-#### `onError` (optional)
+#### `onPaymentError` (optional)
 - **Type**: `(error: PaymentError) => void | Promise<void>`
 - **Description**: Callback function called when payment fails. Receives detailed error information.
 
@@ -234,6 +234,35 @@ function App() {
 </PaymentWidget>
 ```
 
+## 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
+<PaymentWidget
+  // ... other props
+  onComplete={() => {
+    // 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
+<PaymentWidget
+  paymentConfig={{
+    rnApiClientId: "your-client-id",
+    reference: "invoice-12345", // Your internal reference
+    supportedCurrencies: ["ETH-sepolia-sepolia"]
+  }}
+  // ... other props
+/>
+```
+
 ## 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
     </PaymentWidget>
@@ -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
 

src/components/payment-widget/README.md

@@ -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;

src/components/payment-widget/components/currency-select.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);
     }
   };
 

src/components/payment-widget/components/payment-confirmation.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);
       }}

src/components/payment-widget/components/payment-modal.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",
               }}
             >
               <div ref={receiptRef}>