#steve-react-cardelement

1 messages · Page 1 of 1 (latest)

young lilyBOT
tawny hornet
# 
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

const StripePaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [planType, setPlanType] = useState('per_seat'); // Example default value
  const [userCount, setUserCount] = useState(1); // Example default value

  const appearance = {
    theme: 'stripe',
    variables: {
      colorPrimary: '#4A90E2',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      colorDanger: '#df1b41',
      fontFamily: 'Ideal Sans, system-ui, sans-serif',
      spacingUnit: '2px',
      borderRadius: '4px',
    }
  };

  const handleSubmit = async (event) => {
    
  };
`
  return (
    <div className="p-4">
        <form onSubmit={handleSubmit}>
          <h1 className="text-xl font-semibold text-gray-900 mb-4">Subscribe to a Plan</h1>
          <CardElement options={appearance} />
          <button type="submit" disabled={!stripe} className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Subscribe
          </button>
        </form>
    </div>
  );
};

export default StripePaymentForm;
wild mortar
#

can you share the image here again and explain what exactly is wrong?

tawny hornet
wild mortar
#

steve-react-cardelement

tawny hornet
#

I'm integrating a CardElement to a React component when it renders it just shows an icon. I wonder if Im missing some params in the CardElement. But it doesn't seem to be showing the card form

#

My understanding is that CardElement is suppose to render a form to get card info, card number CVV, expiration date etc.

wild mortar
#

in that picture there is the card element right? ou have Card number on the left.

#

the problem is that you didn't wrap the element in a parent div with a max width/height, so it takes the entire page's width right now I think

tawny hornet
#

@wild mortar quick question, what about the other fields? CVV, Expiration Date? or is the Card Element just for the card number?

#

At first, I thought to use the Stripe Payment Element. But since im dealing with subscriptions and not payment intent it seems that Stripe Payment Element could only be use with Payment Intents, is that correct?

young lilyBOT
sacred iris
#

Hi 👋

I'm stepping in for my colleague who needs to leave soon. You can use the Stripe Payment Element with Setup Intents. Have you tested this?

tawny hornet
#

Hi, I wanted to use Stripe Payment Element but it seems this is only for one time payments (Payment Intents). However, I'm creating monthly subscriptions for users

sacred iris
#

That is not correct. You can use the Payment Element for Subscriptions as well

wild mortar
#

(sorry wrong thread)

tawny hornet
#

thanks would look into this

sacred iris
#

Happy to help 🙂

tawny hornet
#

@sacred iris ```The error you're encountering indicates that the Payment Element requires a clientSecret when it's created. The clientSecret is obtained from your server after you create a Payment Intent or Setup Intent. This is a shift from the simpler CardElement integration, as the Payment Element is designed to handle multiple payment methods and requires server-side interaction before it can be rendered.

sacred iris
#

How are you integrating? Are you creating the Subscription object before you create the Payment Element?

tawny hornet
#

I'm currently working on a form that would hit the backend. The backend creates the customer, subscription, etc. But I need to capture the credit card information in the form. How would you advice me in doing that?

sacred iris