Project

General

Profile

Edit Copy Actions

Feature #10296

open

Checkout Stability & Stripe Payment Cancellation Flow Enhancements

Added by Ajit A about 1 month ago. Updated about 1 month ago.

Status:
Resolved
Priority:
Normal
Assignee:
Target version:
-
Start date:
08/10/2026
Due date:
08/10/2026 (39 days late)
% Done:

100%

Estimated time:
4:00 h

Add

Subtasks


Add

Related issues

Updated by Ajit A about 1 month ago

  • Status changed from New to In Progress
  • % Done changed from 0 to 60

Task/Bug Summary: Checkout Stability & Stripe Payment Cancellation Flow Enhancements
1. Preserved Cart State on Stripe Redirect (Frontend)

Issue: The cart was being aggressively deleted from local state and the database immediately when the user clicked "Pay", prior to Stripe processing the payment. If the payment failed or was cancelled, the cart was unrecoverable resulting in a $0.00 total.
Fix: Removed the premature clearAllCartStateAfterOrder(dispatch) call for card payments in Checkout.tsx. The cart is now safely preserved on redirect and is exclusively cleared by webhooks/success pages upon actual payment completion.
2. Seamless Stripe Cancellation Routing (Backend)

Issue: Users cancelling a Stripe payment were redirected to a dead-end /Unsuccess payment-failed page.
Fix: Modified stripe.checkout.sessions.create in payment.service.js to dynamically route the cancel_url back to the exact checkout page (/checkout-payment or /checkout-payment-preorder).
3. Preserved Coupons and Reward Points on Cancellation (Full-Stack)

Issue: Returning from a cancelled Stripe payment resulted in lost coupon discounts and reward point redemptions.
Fix:
Backend: Appended the customer's active couponCode and pointsToRedeem to the Stripe cancel_url as query parameters.
Frontend: Updated the initialization useEffect in Checkout.tsx to automatically parse URL parameters on mount (window.location.search) and immediately re-apply the exact coupon and reward points to the restored cart.
4. Fixed Currency Display / Disabled Adaptive Pricing (Backend)

Issue: Stripe was displaying both USD and INR or auto-converting currencies based on customer location rather than honoring the specific currency selected on the website.
Fix: Added adaptive_pricing: { enabled: false } to the Stripe session configuration to enforce a strict, single-currency display matching the customer's choice.
5. Backend Stability & Crash Fixes

Issue: Server crashed during Stripe session creation with ReferenceError: couponCode is not defined.
Fix: Corrected local variable scope handling in payment.service.js, ensuring appliedCouponCode and orderData.pointsToRedeem were safely passed during session URL construction.
Issue: /calculate-points API was being spammed repeatedly on initial checkout mount.
Fix: Refactored React useEffect dependencies in the frontend loyalty components to prevent infinite API re-triggering.
6. Checkout UI/UX Enhancements (Frontend)

Fix: Cleaned up the layout and visual consistency of the "Order Summary" card. Maintained the application's green theme and aligned the applied coupon, reward points, and shipping UI elements for a polished look.

Updated by Ajit A about 1 month ago

  • Estimated time set to 4:00 h

Task/Bug Summary: Checkout Stability & Stripe Payment Cancellation Flow Enhancements
1. Preserved Cart State on Stripe Redirect (Frontend)

Issue: The cart was being aggressively deleted from local state and the database immediately when the user clicked "Pay", prior to Stripe processing the payment. If the payment failed or was cancelled, the cart was unrecoverable resulting in a $0.00 total.
Fix: Removed the premature clearAllCartStateAfterOrder(dispatch) call for card payments in Checkout.tsx. The cart is now safely preserved on redirect and is exclusively cleared by webhooks/success pages upon actual payment completion.
2. Seamless Stripe Cancellation Routing (Backend)

Issue: Users cancelling a Stripe payment were redirected to a dead-end /Unsuccess payment-failed page.
Fix: Modified stripe.checkout.sessions.create in payment.service.js to dynamically route the cancel_url back to the exact checkout page (/checkout-payment or /checkout-payment-preorder).
3. Preserved Coupons and Reward Points on Cancellation (Full-Stack)

Issue: Returning from a cancelled Stripe payment resulted in lost coupon discounts and reward point redemptions.
Fix:
Backend: Appended the customer's active couponCode and pointsToRedeem to the Stripe cancel_url as query parameters.
Frontend: Updated the initialization useEffect in Checkout.tsx to automatically parse URL parameters on mount (window.location.search) and immediately re-apply the exact coupon and reward points to the restored cart.
4. Fixed Currency Display / Disabled Adaptive Pricing (Backend)

Issue: Stripe was displaying both USD and INR or auto-converting currencies based on customer location rather than honoring the specific currency selected on the website.
Fix: Added adaptive_pricing: { enabled: false } to the Stripe session configuration to enforce a strict, single-currency display matching the customer's choice.
5. Backend Stability & Crash Fixes

Issue: Server crashed during Stripe session creation with ReferenceError: couponCode is not defined.
Fix: Corrected local variable scope handling in payment.service.js, ensuring appliedCouponCode and orderData.pointsToRedeem were safely passed during session URL construction.
Issue: /calculate-points API was being spammed repeatedly on initial checkout mount.
Fix: Refactored React useEffect dependencies in the frontend loyalty components to prevent infinite API re-triggering.
6. Checkout UI/UX Enhancements (Frontend)

Fix: Cleaned up the layout and visual consistency of the "Order Summary" card. Maintained the application's green theme and aligned the applied coupon, reward points, and shipping UI elements for a polished look.

Frontend (evergreenpos_E-commerce_new)
1. Data Persistence on Cancelled Stripe Payments (Checkout.tsx & CheckoutPreorder.tsx)

Fixed an issue where the checkout cart session (including applied coupons and loyalty reward points) was cleared when a user clicked the "back" button from the Stripe Checkout page.
Added URL parameter parsing (couponCode, pointsToRedeem, orderId) on component mount to automatically re-hydrate the checkout state and restore applied discounts.
Added a "Payment Cancelled" popup notification that informs the user their cart has been restored upon returning from Stripe.
2. UI Theme & Alignment Fixes (CheckoutPreorder.tsx & LoyaltyCheckoutPanel.tsx)

Theme Consistency: Updated the Loyalty Checkout Panel to use the custom application green theme (#259800) for points earned, redeem values, and sign-in prompts, replacing the uneven default Tailwind emerald colors.
Form Validation UI: Fixed and aligned the red/green error border states for the email and phone number input fields during checkout.
Summary Section: Adjusted the styling and spacing of the applied coupon and redeem sections below the total value section to make them evenly aligned.
Backend (evergreen_pos_be)
1. Dynamic Currency for Stripe Checkout (payment.service.js)

Preorder Flow Fix: Fixed a bug where the Preorder Stripe Checkout session was hardcoded to base USD. It now correctly extracts the user's selected currencyCode and exchangeRate from the frontend headers/body.
Price Conversions: Dynamically applies the exchange rate to stripe.prices.create (for products, shipping, and tax) and stripe.coupons.create (for discounts), ensuring the Stripe portal shows only the exact currency selected by the user.
2. Stripe Redirect URLs (payment.service.js)

Updated the cancel_url construction for both regular and preorder flows to append the current couponCode and pointsToRedeem query parameters, ensuring the frontend has the necessary data to persist the state.

Actions #3

Updated by Ajit A about 1 month ago

  • % Done changed from 60 to 100
Actions #4

Updated by Ajit A about 1 month ago

  • Status changed from In Progress to Resolved
Edit Copy Actions

Also available in: Atom PDF