我如何为stripe checkout支付开发这个action creator ?

Question

我正尝试按照本文档将分条支付集成到react-redux项目中:

https://stripe.com/docs/payments/accept-a-payment?integration=checkout

文档示例假设React没有Redux。因此，我尝试为这部分开发一个操作创建器:

https://stripe.com/docs/payments/accept-a-payment add-an-event-handler-to-the-checkout-button

我已经说到这里了:

export const handleClick = () => async (dispatch) => {
const res = await axios.post("/api/create-checkout-session");
};

但是，在从服务器返回的响应中，我要调度什么类型的操作?假设后端服务器发送回带有更新付款的current_user模型是否安全?

如果是，我可以使用完全相同的FETCH_USER类型，我之前在这里创建:

export const fetchUser = () => async (dispatch) => {
const res = await axios.get("/api/current_user");
dispatch({ type: FETCH_USER, payload: res.data });
};

另外，我是否将第二个动作创建者(handleClick创建者)传递给session.id?

同样，在我的减速机上保存session.id只会给我带来讨厌的错误。

import { FETCH_USER } from "../actions/types";
import { CHECKOUT_SESSION_CREATED } from "../actions/types";
const initialState = {
sessionId: null,
};
export default function (state = initialState, action) {
switch (action.type) {
case FETCH_USER:
return action.payload || false;
case CHECKOUT_SESSION_CREATED:
state = {
...state,
sessionId: action.payload,
};
return state;
default:
return state;
}
}

Answer 1

但是，在从服务器返回的响应中，我将分发什么类型的操作?

您将调度一个将返回的会话ID添加到您的Redux状态的操作。您还没有共享/api/create-checkout-session端点的代码，但是假设您遵循文档，响应应该包含一个形式为{ id: 'cs_xyz' }的对象，其中cs_xyz是Checkout会话ID。

那么，你的动作创建器应该是这样的:

export const handleClick = () => async (dispatch) => {
const res = await axios.post("/api/create-checkout-session");
dispatch({ type: 'CHECKOUT_SESSION_CREATED', payload: res.data });
};

作为对该操作的响应，您的reducer将保存会话ID到您的状态。然后，连接的签出组件将检查是否定义了会话ID;如果是这样，您将重定向到结帐。例如,

stripe.redirectToCheckout({ sessionId: 'cs_xyz' }); // where `cs_xyz` is the ID you added to your store.