feat: link to easy invoice for client id generation, add option for custom client id in checkout #35
Conversation
…tWidget component
WalkthroughRefactors the payment widget: adds an optional payment reference, renames callbacks (onSuccess/onError → onPaymentSuccess/onPaymentError) and adds onComplete, restructures context/provider into separate files, forwards reference through payment execution, replaces receipt PDF generation with html2canvas-pro + jspdf, adds EasyInvoice URL/env and optional custom client ID UI. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant PS as PaymentStep
participant PW as PaymentWidget
participant Ctx as PaymentWidgetContext
participant Hook as usePayment / executePayment
participant API as Request API
U->>PS: Enter amount, optional Client ID, optional reference
PS->>PW: Render with paymentConfig { rnApiClientId, reference } and callbacks { onPaymentSuccess, onPaymentError, onComplete }
PW->>Ctx: Provide context (config, ui, callbacks)
U->>PW: Confirm payment
PW->>Hook: executePayment({ ..., reference })
Hook->>API: create payout/payment request
alt Success
API-->>Hook: requestId, receipts
Hook-->>PW: success payload
PW->>Ctx: invoke onPaymentSuccess(requestId, receipts)
U->>PW: Close success modal
PW->>Ctx: invoke onComplete()
else Error
API-->>Hook: error
Hook-->>PW: error
PW->>Ctx: invoke onPaymentError(error)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🪛 dotenv-linter (3.3.0).env.example[warning] 9-9: [QuoteCharacter] The value has quote characters (', ") (QuoteCharacter) [warning] 9-9: [UnorderedKey] The NEXT_PUBLIC_REQUEST_API_URL key should go before the NEXT_PUBLIC_RN_API_CLIENT_ID key (UnorderedKey) [warning] 10-10: [EndingBlankLine] No blank line at the end of the file (EndingBlankLine) [warning] 10-10: [QuoteCharacter] The value has quote characters (', ") (QuoteCharacter) [warning] 10-10: [UnorderedKey] The NEXT_PUBLIC_EASY_INVOICE_URL key should go before the NEXT_PUBLIC_GTM_ID key (UnorderedKey) ⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/Playground/index.tsx (1)
145-150: Update generated integration code to match new callback names.The generated integration code still uses the old callback names
onSuccessandonError, but the preview widget (lines 196-198) correctly uses the new namesonPaymentSuccessandonPaymentError. This inconsistency will mislead developers copying the integration code.Apply this diff to update the generated code:
- onSuccess={() => { + onPaymentSuccess={(requestId, transactionReceipts) => { console.log('Payment successful'); }} - onError={(error) => { + onPaymentError={(error) => { console.error('Payment failed:', error); }}Consider also adding the new
onCompletecallback to the generated example for completeness:onPaymentError={(error) => { console.error('Payment failed:', error); }} + onComplete={() => { + console.log('Payment process completed'); + }}src/components/payment-widget/README.md (1)
23-25: Update dependency docs to match implementation.The widget now imports
html2canvas-proandjspdf, but the README still tells consumers to installhtml2pdf.js. Please replace the installation instructions and dependency list with the packages actually used byPaymentSuccess, otherwise downstream users will miss required deps.Also applies to: 375-385
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (22)
.env.example(1 hunks)package.json(1 hunks)src/components/PaymentStep.tsx(4 hunks)src/components/Playground/blocks/customize.tsx(3 hunks)src/components/Playground/index.tsx(2 hunks)src/components/payment-widget/README.md(5 hunks)src/components/payment-widget/components/currency-select.tsx(1 hunks)src/components/payment-widget/components/payment-confirmation.tsx(4 hunks)src/components/payment-widget/components/payment-modal.tsx(4 hunks)src/components/payment-widget/components/payment-success.tsx(4 hunks)src/components/payment-widget/components/receipt/styles.css(1 hunks)src/components/payment-widget/constants.ts(1 hunks)src/components/payment-widget/context/payment-widget-context/index.ts(1 hunks)src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx(6 hunks)src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts(1 hunks)src/components/payment-widget/hooks/use-payment.ts(1 hunks)src/components/payment-widget/payment-widget.tsx(3 hunks)src/components/payment-widget/payment-widget.types.ts(2 hunks)src/components/payment-widget/utils/payment.ts(6 hunks)src/components/payment-widget/utils/wagmi.ts(3 hunks)src/lib/constants.ts(1 hunks)src/lib/validation.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-07T02:52:54.845Z
Learnt from: MantisClone
PR: RequestNetwork/rn-checkout#17
File: src/components/ui/tabs.tsx:85-94
Timestamp: 2024-11-07T02:52:54.845Z
Learning: In the playground component (`src/components/ui/tabs.tsx`), ARIA attributes are not necessary; focus on adding them to the payment widget instead.
Applied to files:
src/components/Playground/index.tsx
🧬 Code graph analysis (7)
src/components/payment-widget/utils/payment.ts (1)
src/components/payment-widget/types/index.ts (1)
PaymentError(8-11)
src/components/PaymentStep.tsx (3)
src/store/ticketStore.ts (1)
useTicketStore(26-69)src/lib/constants.ts (1)
EASY_INVOICE_URL(44-44)src/components/payment-widget/payment-widget.tsx (1)
PaymentWidget(87-114)
src/components/payment-widget/payment-widget.types.ts (1)
src/components/payment-widget/types/index.ts (1)
PaymentError(8-11)
src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts (1)
src/components/payment-widget/context/payment-widget-context/index.ts (2)
PaymentWidgetContextValue(5-33)PaymentWidgetContext(35-36)
src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx (1)
src/components/payment-widget/types/index.ts (1)
PaymentError(8-11)
src/components/payment-widget/context/payment-widget-context/index.ts (1)
src/components/payment-widget/types/index.ts (3)
FeeInfo(1-4)ReceiptInfo(67-73)PaymentError(8-11)
src/components/Playground/blocks/customize.tsx (1)
src/lib/constants.ts (1)
EASY_INVOICE_URL(44-44)
🪛 dotenv-linter (3.3.0)
.env.example
[warning] 9-9: [QuoteCharacter] The value has quote characters (', ")
(QuoteCharacter)
[warning] 9-9: [UnorderedKey] The NEXT_PUBLIC_REQUEST_API_URL key should go before the NEXT_PUBLIC_RN_API_CLIENT_ID key
(UnorderedKey)
[warning] 10-10: [EndingBlankLine] No blank line at the end of the file
(EndingBlankLine)
[warning] 10-10: [UnorderedKey] The NEXT_PUBLIC_EASY_INVOICE_URL key should go before the NEXT_PUBLIC_GTM_ID key
(UnorderedKey)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build
🔇 Additional comments (21)
src/components/payment-widget/components/receipt/styles.css (1)
3-3: LGTM!The padding increase improves visual spacing within the receipt container.
src/components/payment-widget/utils/wagmi.ts (3)
1-1: LGTM!Adding the
CreateConnectorFntype import improves type safety.
19-19: LGTM!Typing the connectors array with
CreateConnectorFn[]improves type safety and removes the need for unsafe casts.
41-41: LGTM!Removing the
as anycast is a good type safety improvement enabled by the properly typed connectors array.src/components/payment-widget/context/payment-widget-context/index.ts (2)
5-33: LGTM!The
PaymentWidgetContextValueinterface is well-structured with:
- Clear separation of concerns (wallet, payment config, UI config, receipt info, callbacks)
- Proper optional fields (reference, callbacks, wallet details)
- Support for both sync and async callback patterns
35-36: LGTM!Context initialization with null is appropriate and enforces usage within a provider via the hook validation.
src/components/payment-widget/context/payment-widget-context/use-payment-widget-context.ts (1)
4-14: LGTM!The hook follows the standard React context pattern with proper validation and a clear error message for misuse.
src/components/payment-widget/components/currency-select.tsx (1)
13-13: LGTM!The import path update aligns with the context refactoring to use the centralized module.
src/components/payment-widget/context/payment-widget-context/payment-widget-provider.tsx (2)
21-26: Note the API surface change.The callback props have been renamed:
onSuccess→onPaymentSuccessonError→onPaymentError- Added:
onCompleteThis is a breaking change for existing consumers. Ensure migration guidance is provided in documentation or release notes.
Do you want me to help draft migration guidance or a deprecation notice for the renamed callbacks?
48-87: LGTM!The context value correctly includes:
- The new
referencefield frompaymentConfig- The renamed callbacks (
onPaymentSuccess,onPaymentError,onComplete)- All dependencies properly tracked in the
useMemodeps arraysrc/components/payment-widget/hooks/use-payment.ts (1)
103-103: LGTM!The
referencefield is correctly forwarded toexecutePayment, ensuring the payment request includes the custom reference when provided.src/components/payment-widget/constants.ts (1)
1-3: LGTM! Environment guard improves cross-runtime compatibility.The
typeof process !== "undefined"check protects against reference errors in browser and edge environments whereprocessis not defined, making the widget more robust across different runtime contexts.src/components/Playground/blocks/customize.tsx (2)
14-14: LGTM! EasyInvoice guidance added as per PR objectives.The import and link provide clear guidance on obtaining a Client ID from EasyInvoice, directly addressing the PR objective to help users understand where to get their credentials.
Also applies to: 130-140
151-157: LGTM! Custom payment reference input correctly implemented.The optional input field is properly bound to
paymentConfig.referenceand aligns with the validation schema and type definitions introduced elsewhere in the PR.src/lib/validation.ts (1)
13-13: LGTM! Optional reference field correctly added to validation schema.The field is appropriately marked as optional and typed as a string, consistent with the PaymentConfig type changes and the free-form nature of payment references.
src/lib/constants.ts (1)
43-44: LGTM! EASY_INVOICE_URL constant properly defined.The constant follows the established pattern for environment-based configuration and provides a sensible production fallback URL.
src/components/payment-widget/components/payment-modal.tsx (2)
19-19: LGTM! Context hook import and usage updated correctly.The import path change aligns with the context restructuring, and the destructured callbacks (
onPaymentSuccess,onComplete) match the new API surface.Also applies to: 30-30
66-66: LGTM! Callback invocations are correct.Both callbacks are properly invoked with optional chaining:
onPaymentSuccessreceivesrequestIdandtransactionReceiptsat payment successonCompleteis called when the modal closes from the success step after resetAlso applies to: 83-83
src/components/payment-widget/utils/payment.ts (3)
10-10: LGTM! Optional reference field correctly implemented and propagated.The
referencefield is properly:
- Typed as optional in
PaymentParams- Destructured in
createPayout- Passed to the API request body
This enables custom payment references as per the PR objectives.
Also applies to: 130-130, 148-148
56-63: LGTM! Improved type safety in error guard.Changing the parameter type from
anytounknownand adding a null check improves type safety and prevents potential runtime errors when checking error properties.
180-180: LGTM! Simplified error handling.The anonymous catch clause is cleaner since the error variable was not being used in the catch block.
There was a problem hiding this comment.
Pull Request Review Report
📋 Summary
This PR introduces significant enhancements to the payment widget including improved PDF receipt generation, API interface improvements, and new configuration options. The changes maintain backward compatibility while adding valuable new features.
✅ What's Good
🔧 Dependency Updates
- Updated core dependencies to latest stable versions:
@tanstack/react-query:^5.90.2(improved query management)react-hook-form:^7.63.0(latest form handling)viem:^2.37.11&wagmi:^2.17.5(latest Web3 tooling)
📄 Enhanced PDF Generation
- Replaced html2pdf.js with html2canvas-pro + jsPDF - Better performance and reliability
- Improved PDF styling with proper dimensions and margins
- Better error handling for PDF generation failures
- Optimized rendering with proper scaling and background settings
🔌 API Improvements
- Clearer prop naming:
onSuccess→onPaymentSuccess,onError→onPaymentError - New
onCompletecallback for post-payment cleanup/navigation - Added
referencefield toPaymentConfigfor tracking purposes - Improved error handling with null checks in
isPaymentError
🎨 Enhanced Configuration
- Custom Client ID input with helpful link to EasyInvoice
- Environment variable support for Easy Invoice URL
- Better form validation with optional reference field
- Improved context management with cleaner separation of concerns
⚠️ Areas for Attention
🔄 Breaking Changes (Well Handled)
- Prop renames are breaking changes but well documented in README
- Migration path is clear - simple rename operations
- Backward compatibility maintained through optional fields
🛡️ Security & Robustness
- Environment variable fallback properly implemented in constants.ts
- Process undefined check added for better SSR compatibility
- Error boundaries maintained throughout payment flow
📚 Documentation
- README thoroughly updated with new prop names and examples
- Type definitions properly updated to match implementation
- Clear migration examples provided for breaking changes
🎯 Technical Quality
✅ Code Quality
- Consistent error handling patterns maintained
- Proper TypeScript usage with updated interfaces
- Clean separation of concerns in context management
- Good use of React patterns (hooks, context, refs)
✅ Performance
- Lazy loading of PDF generation libraries
- Optimized canvas rendering settings
- Proper memory management in PDF generation
✅ Testing Considerations
- Error handling paths are well covered
- Fallback values properly implemented
- Type safety maintained throughout
🚀 Recommendations
✅ Ready to Merge
This PR is well-structured and ready for production:
- Breaking changes are minimal and well-documented
- New features add significant value (better PDF generation, tracking)
- Code quality is high with proper error handling
- Documentation is comprehensive and up-to-date
📋 Post-Merge Actions
- Update integration guides to reflect new prop names
- Consider deprecation warnings for old prop names in future versions
- Monitor PDF generation performance in production
- Validate Easy Invoice integration works as expected
🏆 Overall Assessment
APPROVED ✅
This is a high-quality PR that significantly improves the payment widget while maintaining excellent backward compatibility practices. The enhanced PDF generation, clearer API design, and improved configuration options make this a valuable addition to the codebase.
Key Strengths:
- Thoughtful API design improvements
- Robust error handling
- Comprehensive documentation updates
- Clean implementation of new features
- Proper handling of breaking changes
Impact: Medium-High (New features + API improvements)
Risk: Low (Well-tested, good fallbacks, clear migration path)
📝 Detailed Change Analysis
Dependencies Added/Updated
{
"@tanstack/react-query": "^5.90.2",
"html2canvas-pro": "^1.5.11",
"jspdf": "^3.0.3",
"react-hook-form": "^7.63.0",
"viem": "^2.37.11",
"wagmi": "^2.17.5"
}API Changes
// Before
interface PaymentWidgetProps {
onSuccess?: (requestId: string, receipts: TransactionReceipt[]) => void;
onError?: (error: PaymentError) => void;
}
// After
interface PaymentWidgetProps {
onPaymentSuccess?: (requestId: string, receipts: TransactionReceipt[]) => void;
onPaymentError?: (error: PaymentError) => void;
onComplete?: () => void; // NEW
}
interface PaymentConfig {
reference?: string; // NEW
// ... existing fields
}New Features
- Enhanced PDF Generation: Replaced html2pdf.js with html2canvas-pro + jsPDF
- Payment Reference Tracking: Added optional reference field for internal tracking
- Custom Client ID Configuration: UI for configuring EasyInvoice client ID
- Improved Error Handling: Better null checks and error boundaries
- Environment Configuration: Support for EASY_INVOICE_URL environment variable
Migration Guide
// Update your PaymentWidget usage:
<PaymentWidget
// Rename these props:
onPaymentSuccess={handleSuccess} // was: onSuccess
onPaymentError={handleError} // was: onError
// Optional new props:
onComplete={handleComplete} // NEW: called when widget closes from success
paymentConfig={{
// ... existing config
reference: "invoice-123" // NEW: optional tracking reference
}}
/>
Problem
There was no way for users to test our checkout without implementing the widget themselves
Solution
Add an option to input a custom client id before the checkout happens.
Changes
Resolves #33
Summary by CodeRabbit