CODEWITHSUNDEEP
reactjsredux
prajeesh
prajeesh

Reputation: 2382

Reactjs - How to use redux in Stripe checkout form

I am using react stripe in my project. I followd the tutorial https://stripe.com/docs/recipes/elements-react.

As mentioned in the document, the form is exported as follows.

export default injectStripe(Form)

In the documentation the api call is made as follows.

async submit(ev) {
  let {token} = await this.props.stripe.createToken({name: "Name"});
  let response = await fetch("/charge", {
    method: "POST",
    headers: {"Content-Type": "text/plain"},
    body: token.id
  });

  if (response.ok) console.log("Purchase Complete!")
}

But i need to connect the redux for making the submit api call.

checkoutActions.js

import * as types from '../constants/actionTypes';
export function checkout(obj) {
  const api = types.API_URL_CHECKOUT;
  return dispatch => {
    return dispatch({
      type: types.ACTION_CHECKOUT,
      promise: client => client.post(api, obj).then((data) => {
        return data;
      }),
    });
  };
}

So i have modified the form export as follows.

export default connect(state => ({
  ...state.resp
}),{
  ...checkoutActions
})injectStripe(Form)

But it is returning the error

Parsing error: Unexpected token, expected ";"

Any idea on how to connect redux in stripe checkout form?

Upvotes: 2

Views: 1629

Answers (1)

fyasir
fyasir

Reputation: 2970

You are missing parenthesis over injectStripe.

export default connect(state => ({...state.resp}),{...checkoutActions })(injectStripe(Form))

Upvotes: 1

Related Questions