CODEWITHSUNDEEP
reactjsstripe-payments
Fran M
Fran M

Reputation: 249

React Stripe Elements not showing up?

Hi I am new to using Stripe and Stripe Elements in React. I am using the packages react-stripe-js and stripe-js, as explained in https://stripe.com/docs/stripe-js/react. I have two components one calles StripeWrapper :

import React from 'react';

// stripe
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

// components
import CheckoutForm from './CheckoutForm';

// stripe load
const stripePromise = loadStripe(...);

const StripeWrapper = () => {
    return (  
        <Elements stripe={ stripePromise } >
            <CheckoutForm /> 
        </Elements>
    );
};
 
export default StripeWrapper;

Which is only a HOC to wrap the actual CheckoutForm with the Elements component, again, as explained in Stripe documentation. And the actual form component:

const CheckoutForm = () => {

  const stripe = useStripe();
  const elements = useElements();

  // dispatch
  const dispatch = useDispatch();

  const setStep = useCallback(
    step => dispatch( setStepperAction(step) ),
    [ dispatch ],
  );

  const handleSubmitPayment = async e => {
    e.preventDefault();

    if (!stripe || !elements) return;
    
    ...
  };

  return (  
      <Col xs={12} className="bg-light px-1 my-2">
        <Form inline className="mx-0 w-100 h-100"
          onSubmit={ handleSubmitPayment }
        >  
          <label>
            Número de tarjeta
            <CardNumberElement />
          </label>
          <label>
            Fecha de caducidad
            <CardExpiryElement />
          </label>
          <label>
            CVC
            <CardCvcElement />
          </label>
          <Button type="submit" disabled={ !stripe } > Pagar </Button>
        </Form>
      </Col>
  );
}
 
export default CheckoutForm;

But those elements are not displaying at al, only the labels and the button. What am I missing here? It is exactly reproduced as shown in Stripe docs. I could use a bit of help here, thanks.

Upvotes: 2

Views: 4948

Answers (2)

Tyler
Tyler

Reputation: 11

I was having that issue too. I solved the problem by putting the publishable key directly into the loadstripe function. like this:

const stripePromise = loadStripe('your publishable key here')

Upvotes: 1

Fravel
Fravel

Reputation: 177

I had the same problem. I figure out that the Card fields disappear when we apply a display:flex CSS rule on the enclosing tag.

Solution that works for me : Apply width:100%; to the .StripeElement CSS class (this class come with the card field). In the example they did this.

Upvotes: 7

Related Questions