feat(react): implement Buy Now and Cart payment modes

[Don-Vicks]

Overview

This PR adds Buy Now and Cart payment modes to the Commerce SDK, enabling single-product and multi-product checkout flows.

What I Worked On

Payment Modes

• Implemented Buy Now mode for single-product checkout flows
• Implemented Cart mode for multi-product checkout with itemized totals
• Both modes support modal-based payment with QR code and wallet options

Testing

All contribution requirements met:

• Build passes
• Lint passes
• Manual verification across all modes

---

Important

Add 'Buy Now' and 'Cart' payment modes to Commerce SDK with updated components, tests, and configurations.

• Payment Modes:
  • Implemented 'Buy Now' for single-product checkout and 'Cart' for multi-product checkout in payment-modal-content.tsx.
  • Both modes support QR code and wallet payment options.
• Components:
  • Updated SecureIframeShell and PaymentModalContent to handle new payment modes.
  • Added Product and PaymentConfig interfaces in secure-iframe-shell.tsx.
• Testing:
  • Added integration tests for payment flows in complete-payment-flow.test.tsx.
  • Updated use-transfer-sol.test.tsx and use-transfer-token.test.tsx for new functionalities.
• Configuration:
  • Added PaymentConfig for price and decimal overrides in secure-iframe-shell.tsx.
  • Updated index.tsx to export new types and functions.

^{This description was created by for 6c63e83. You can customize this summary. It will automatically update as commits are pushed.}

[vercel]

@Don-Vicks is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 6c63e83 in 1 minute and 36 seconds. Click for details.

• Reviewed 2983 lines of code in 31 files
• Skipped 2 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. packages/sdk/src/core/error-handler.ts:372

• Draft comment:
  The initial switch block in calculateDelay is redundant—it computes linear and exponential delays but doesn’t store or return them. Remove that block and rely solely on the subsequent switch for clarity.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. apps/docs/app/(home)/components/interactive-demo.tsx:36

• Draft comment:
  When converting the product price from a string (customizations.productPrice) to a number, consider using parseFloat rather than Number. This can help avoid unintended falsy results (e.g. '0' might fall back to 0.1).
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. packages/sdk/src/hooks/use-transfer-token.ts:384

• Draft comment:
  Ensure the retry delay calculation properly incorporates the 'backoffMultiplier' from the retry config. In the current implementation after a blockhash error, the delay is computed as baseDelay * backoffMultiplier ** attempt. Verify that this behavior meets your desired exponential backoff policy.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 50% <= threshold 50% The comment is asking the PR author to verify the behavior of the retry delay calculation, which is against the rules. However, it also provides a specific suggestion about how the calculation is currently implemented, which could be useful for the author to consider. The comment could be rephrased to focus on the suggestion rather than asking for verification.

4. packages/react/src/components/ui/payment-modal-content.tsx:59

• Draft comment:
  Consider using a dedicated currency formatting utility (or Intl.NumberFormat) for displaying totals instead of manually concatenating the '$' symbol. This will improve localization and consistency in future iterations.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

5. apps/docs/app/(home)/components/demo-preview.tsx:95

• Draft comment:
  There appears to be an accidental double space between border-gray-200 and rounded-lg in the className. Consider using a single space to ensure consistency.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_hx1Yyie9UlEQvbO6

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
commerce-sdk-docs	Error		Dec 27, 2025 9:49pm

[Don-Vicks]

gm gm Guys,
I saw the Vercel checks were failing and majority of the error was due to an outdated lock file, I have updated it, hopefully it works now.