seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

Add Mollie payment integration: Implement lazy loading for PaymentSuccess page, update CartTab and OrderProcessingService to handle Mollie payment intents, and enhance ProfilePage to manage payment completion for both Stripe and Mollie. Update base URL for development environment.

Browse Source
This commit is contained in:
sebseb7
2025-07-15 12:13:57 +02:00
parent 9072a3c977
commit 5157b7d781
6 changed files with 325 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/ProfilePage.js
View File

@@ -28,9 +28,11 @@ const ProfilePage = (props) => {
const [orderIdFromHash, setOrderIdFromHash] = useState(null);
const [paymentCompletion, setPaymentCompletion] = useState(null);
// @note Check for payment completion parameters from Stripe redirect
// @note Check for payment completion parameters from Stripe and Mollie redirects
useEffect(() => {
const urlParams = new URLSearchParams(location.search);
// Check for Stripe payment completion
const isComplete = urlParams.has('complete');
const paymentIntent = urlParams.get('payment_intent');
const paymentIntentClientSecret = urlParams.get('payment_intent_client_secret');
@@ -38,6 +40,7 @@ const ProfilePage = (props) => {
if (isComplete && paymentIntent && redirectStatus) {
setPaymentCompletion({
paymentType: 'stripe',
paymentIntent,
paymentIntentClientSecret,
redirectStatus,
@@ -52,6 +55,39 @@ const ProfilePage = (props) => {
newUrl.searchParams.delete('redirect_status');
window.history.replaceState({}, '', newUrl.toString());
}
// Check for Mollie payment completion
const isMollieComplete = urlParams.has('mollieComplete');
const molliePaymentId = urlParams.get('mollie_payment_id');
const mollieStatus = urlParams.get('mollie_status');
const mollieAmount = urlParams.get('mollie_amount');
const mollieTimestamp = urlParams.get('mollie_timestamp');
const mollieIsPaid = urlParams.get('mollie_is_paid');
const mollieOrderId = urlParams.get('mollie_order_id');
if (isMollieComplete && molliePaymentId && mollieStatus) {
setPaymentCompletion({
paymentType: 'mollie',
molliePaymentId,
mollieStatus,
mollieAmount: mollieAmount ? parseFloat(mollieAmount) : null,
mollieTimestamp: mollieTimestamp ? parseInt(mollieTimestamp) : null,
mollieIsPaid: mollieIsPaid === 'true',
mollieOrderId: mollieOrderId ? parseInt(mollieOrderId) : null,
isSuccessful: mollieIsPaid === 'true'
});
// Clean up the URL by removing the Mollie payment parameters
const newUrl = new URL(window.location);
newUrl.searchParams.delete('mollieComplete');
newUrl.searchParams.delete('mollie_payment_id');
newUrl.searchParams.delete('mollie_status');
newUrl.searchParams.delete('mollie_amount');
newUrl.searchParams.delete('mollie_timestamp');
newUrl.searchParams.delete('mollie_is_paid');
newUrl.searchParams.delete('mollie_order_id');
window.history.replaceState({}, '', newUrl.toString());
}
}, [location.search]);
useEffect(() => {