Need to integrate react-stripe-elements

🙋Get Help
1

Hi,

I am trying to integrate stripe as my site’s checkout process but i am having few issues

  • need 2 HOCs (connect,injectStripe), tried to use recompose but its not working and throwing this error
    Uncaught Error: It looks like you are trying to inject Stripe context outside of an Elements context.
    Please be sure the component that calls createSource or createToken is within an component.

  • Stripe requires a script to be added to index.html but i cant find it.

I appreciate your responses.

Thanks!

2

I’ve just tested connect with recompose and it works fine:

By taking a look at the react-stripe-elements issues it looks like more a problem of react-stripe-elements with SSR:

In Frontity, you can use state.frontity.rendering === "ssr" to know if you are on SSR or on CSR.

So for example, you could add stripe to the StripeProvider only in the browser, using useEffect:

const Theme = ({ state }) => {
  const [stripe, setStripe] = useState(null);

  useEffect(() => {
    // useEffect only fires in CSR (client side rendering)
    window.Stripe('pk_test_12345')
    setStripe(
  }, []);

  return (
    <StripeProvider stripe={stripe} >
      <Head>
        ...
      </Head>
      <Body>
        ...
      </Body>
    </StripeProvider>
  );
};

And use state.frontity.rendering === "csr" to render the react-stripe-elements components only on the browser:

import { Elements } from 'react-stripe-elements';

const MyStoreCheckout = ({ state }) => 
  state.frontity.rendering === "csr"
     // Render this in the browser
     ? <Elements>  <InjectedCheckoutForm /> </Elements>
     // Render this in the server
     : <CheckoutPlaceholder />;

Use CheckoutPlaceholder to render something in the server. Please note that the placeholder will be shown in the browser as well, until React is loaded. Once React loads, rendering becomes "csr" and the react checkout is shown.

Let me know if this approach works for you.

3

Hi @luisherranz, Thanks for such a detailed reply. with recompose i was able to make the things working, i just had to reorder the components in recompose to make them work.

now i need to import some CSS files but seems like they are not being rendered, may i know how to make them work?

4

CSS from the react-stripe-elements library?

5

I’ve just released the Style docs made by @SantosGuillamot that were still on “draft”. I think they are good enough for now: https://docs.frontity.org/learning-frontity/styles

We’ll improve them over time. I’ve also added a section on how to add external CSS files: https://docs.frontity.org/learning-frontity/styles#external-css-files

@SantosGuillamot I hope you don’t mind :slight_smile:

6

No, Its from another library react-credit-cards

7

Something like this:

import { Global, css } from "frontity";
import Cards from 'react-credit-cards';
import CardsCss from  'react-credit-cards/es/styles-compiled.css';

const MyCards = ({ input }) => (
  <>
    <Cards
      number={input.number.value}
      name={input.name.value}
      expiry={input.expiry.value}
      cvc={input.cvc.value}
    />
    <Global styles={css(CardsCss)} />
  </>
);
8

Thanks Its worked!

2 Likes