我如何为条纹结账支付开发这个动作创建者？

Question

我正在尝试按照此文档将条带支付集成到 react-redux 项目中：

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

文档示例假定没有 Redux 的 React。因此，我正在尝试为这部分开发一个动作创建器：

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

However, in the response back from the server, what type of action am I going to dispatch?

您将分派一个操作，将返回的会话 ID 添加到您的 Redux 状态。您尚未共享 /api/create-checkout-session 端点的代码，但假设您正在关注文档，则响应应包含 { id: 'cs_xyz' } 形式的对象，其中 cs_xyz 是结帐会话 ID .

因此，您的动作创建器看起来像：

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

为了响应该操作，您的减速器会将会话 ID 保存到您的状态。然后，您连接的结帐组件将检查是否定义了会话 ID；如果是这样，你会重定向到结帐。例如，

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

我如何为条纹结账支付开发这个动作创建者？

How do I develop this action creator for stripe checkout payments?

stripe-payments

reactjs

react-redux