diff --git a/src/pages/store-page/ui/cart/index.tsx b/src/pages/store-page/ui/cart/index.tsx
index 5bca10e..c315328 100755
--- a/src/pages/store-page/ui/cart/index.tsx
+++ b/src/pages/store-page/ui/cart/index.tsx
@@ -4,16 +4,18 @@ import { StyledCartContainer } from './styled/cart.styled.ts';
import { FinanceDetails } from './ui/FinanceDetails.tsx';
import { useAppSelector } from '../../../../redux/hooks.ts';
import { selectSdkInitStatus } from '../../../../redux/paystation-sdk-initialization';
+import { selectTokenIsSet } from '../../../../redux/paystation-sdk-set-token';
export function Cart() {
const sdkIsInit = useAppSelector(selectSdkInitStatus);
+ const tokenIsSet = useAppSelector(selectTokenIsSet);
return (
- {sdkIsInit && }
+ {sdkIsInit && tokenIsSet && }
);
}
diff --git a/src/pages/store-page/ui/payment-methods/index.tsx b/src/pages/store-page/ui/payment-methods/index.tsx
index fd1a2de..7031249 100755
--- a/src/pages/store-page/ui/payment-methods/index.tsx
+++ b/src/pages/store-page/ui/payment-methods/index.tsx
@@ -2,7 +2,11 @@ import { PaymentMethodsSkeleton } from './payment-method-skeleton';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks.ts';
import { selectTokenIsSet } from '../../../../redux/paystation-sdk-set-token';
-import { getPaymentMethods, selectPaymentMethods } from '../../../../redux/payment-methods';
+import {
+ getPaymentMethods,
+ selectPaymentMethods,
+ setPaymentMethods,
+} from '../../../../redux/payment-methods';
import { PaymentMethod } from './payment-method';
import { PaymentMethod as PaymentMethodInterface } from '@xsolla/pay-station-sdk/dist/core/payment-method.interface';
import { MoreMethodsButton } from '../buttons/more-methods';
@@ -12,6 +16,7 @@ import {
setPid,
} from '../../../../redux/payment-form';
import { StyledPaymentMethodsContainer } from '../../styled/payment-methods.styles.ts';
+import { selectToken } from '../../../../redux/sdk-configuration';
export const PaymentMethods = () => {
const defaultMethodsCount = 4;
@@ -19,6 +24,7 @@ export const PaymentMethods = () => {
const dispatch = useAppDispatch();
const tokenIsSetInSdk = useAppSelector(selectTokenIsSet);
+ const token = useAppSelector(selectToken);
const paymentMethods = useAppSelector(selectPaymentMethods);
const { isSecondStep } = useAppSelector(selectPaymentFormSettings);
@@ -45,10 +51,16 @@ export const PaymentMethods = () => {
const needShowMoreButton = displayCount === defaultMethodsCount && !isSecondStep;
useEffect(() => {
+ dispatch(setPaymentMethods({ paymentMethods: [] }));
+
if (tokenIsSetInSdk) {
dispatch(getPaymentMethods());
}
- }, [tokenIsSetInSdk]);
+
+ if (idExpandedMethod) {
+ dispatch(setPid({ pid: idExpandedMethod }));
+ }
+ }, [tokenIsSetInSdk, token]);
const showMoreMethodsHandler = useCallback(() => {
if (paymentMethods) {
diff --git a/src/redux/cart/update-cart.middleware.ts b/src/redux/cart/update-cart.middleware.ts
index bf207c8..effdca1 100755
--- a/src/redux/cart/update-cart.middleware.ts
+++ b/src/redux/cart/update-cart.middleware.ts
@@ -1,12 +1,14 @@
import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
import { addItem, removeItem } from './index';
import { createToken } from '../sdk-configuration';
+import { setSdkTokenIsSet } from '../paystation-sdk-set-token';
const updateCartMiddleware = createListenerMiddleware();
updateCartMiddleware.startListening({
matcher: isAnyOf(addItem, removeItem),
effect: async (_, listenerApi) => {
+ listenerApi.dispatch(setSdkTokenIsSet(false));
await listenerApi.dispatch(createToken());
},
});
diff --git a/src/redux/paystation-sdk-set-token/index.ts b/src/redux/paystation-sdk-set-token/index.ts
index bc72c98..3316521 100755
--- a/src/redux/paystation-sdk-set-token/index.ts
+++ b/src/redux/paystation-sdk-set-token/index.ts
@@ -1,4 +1,4 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '../store.ts';
import { setTokenHeadlessCheckoutLib } from '../../sdk/initialization';
import { getErrorMessage } from '../../shared/get-error-message.function.ts';
@@ -9,7 +9,7 @@ export const setTokenPayStationSdk = createAsyncThunk(
async (parameters: { token: string }, thunkAPI) => {
try {
await setTokenHeadlessCheckoutLib(parameters.token);
- thunkAPI.dispatch(sdkSetToken());
+ thunkAPI.dispatch(setSdkTokenIsSet(true));
} catch (error: unknown) {
const message = getErrorMessage(error);
@@ -26,8 +26,8 @@ const sdkSetTokenSlice = createSlice({
name: 'sdk-set-token',
initialState,
reducers: {
- sdkSetToken: (state) => {
- state.tokenIsSet = true;
+ setSdkTokenIsSet: (state, action: PayloadAction) => {
+ state.tokenIsSet = action.payload;
},
},
extraReducers: (builder) => {
@@ -44,7 +44,7 @@ const sdkSetTokenSlice = createSlice({
},
});
-export const { sdkSetToken } = sdkSetTokenSlice.actions;
+export const { setSdkTokenIsSet } = sdkSetTokenSlice.actions;
export const selectTokenIsSet = (state: RootState) => state.sdkSetTokenSlice.tokenIsSet;
diff --git a/src/redux/sdk-configuration/set-token.middleware.ts b/src/redux/sdk-configuration/set-token.middleware.ts
index f3ba75f..dd126cc 100755
--- a/src/redux/sdk-configuration/set-token.middleware.ts
+++ b/src/redux/sdk-configuration/set-token.middleware.ts
@@ -3,6 +3,7 @@ import { selectCurrentLanguage, selectToken, setToken } from './index.ts';
import { RootState } from '../store.ts';
import { initPayStationSdk, selectSdkInitStatus } from '../paystation-sdk-initialization';
import { setTokenPayStationSdk } from '../paystation-sdk-set-token';
+import { resetPaymentForm } from '../payment-form';
const setTokenMiddleware = createListenerMiddleware();
@@ -14,6 +15,8 @@ setTokenMiddleware.startListening({
const language = selectCurrentLanguage(state);
const sdkIsInitialized = selectSdkInitStatus(state);
+ listenerApi.dispatch(resetPaymentForm());
+
if (!sdkIsInitialized) {
await listenerApi.dispatch(
initPayStationSdk({