batman4496

[bitter field]

hi! do you have a link to the page where this behaviour can be replicated?
or the exact complete code you're using?
Any errors in your browser console logs?

[mild jasper]

I can provide the code and this is the console error im getting

[mild jasper]

'use client';
import React, { useEffect, useState } from 'react';
import Stripe from 'stripe';
import { 
  useStripe, 
  useElements, 

  CardElement,
  CardNumberElement
} from '@stripe/react-stripe-js';

function ChargeForm(props: { customers: Stripe.Customer[] }) {
  const stripe = useStripe();
  const elements = useElements();
  const [customer, setCustomer] = useState(props.customers[0]);


  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const card = elements?.getElement('card');
    if (!card) return;

    const token = await stripe?.createToken(card);
  }

  return (
    <form className="flex flex-col bg-white text-black gap-2 p-5 items-center justify-center" onSubmit={handleSubmit}>
      <select 
        onChange={
          (e) => setCustomer(props.customers[Number(e.target.value)])
        }
      >
        {props.customers.map((cust, index) => (
          <option key={index} value={index} label={cust.name || cust.id} />
        ))}
      </select>

      <div className="flex flex-col w-[50vw] p-5 h-full">
        <CardElement onBlur={e => console.log(e)} />
      </div>
      <button disabled={!stripe}>Submit</button>
    </form>
  );
}

export default ChargeForm;```
this is the component where im rendering the form

import React from 'react';
import StripeElementProvider from '@/providers/stripe-element-provider';
import Wrapper from '@/components/wrapper';
import ChargeForm from '@/components/stripe/charge-form';
import { createCardPaymentMethod, getCustomers } from '@/services/backend/stripe-service';

async function Page() {
  const customers = await getCustomers();
  if (!customers?.length) return;
  
  return (
    <Wrapper>
      <StripeElementProvider>
        <ChargeForm customers={customers ?? []} />
      </StripeElementProvider>
    </Wrapper>
  );
}

export default Page;```

here is the page that uses the component

'use client';
import React, { useEffect, useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';
import getStripe from '@/lib/get-stripe';
import { PaymentResponse } from '@/types/types';
import axios from 'axios';

type StripeElementProps = {
  children: React.ReactNode,
  intentRoute?: string,
  options?: any
}

function StripeElementProvider(props: StripeElementProps) {
  const { 
    children, 
    intentRoute,
    options 
  } = props;
  
  const [clientSecret, setClientSecret] = useState<string>();

  
  useEffect(() => {
    async function getIntent() {
      if (!intentRoute) return;
      
      const { data }: { data: PaymentResponse } = await axios.post(intentRoute);
      
      if (data.clientSecret) {
        setClientSecret(data.clientSecret);
      }
    }


    getIntent(); 
  }, [intentRoute]);

  return (
    <>
      {!intentRoute && (
        <Elements stripe={getStripe()} options={options}>
          {children}
        </Elements>
      )}

      {intentRoute && clientSecret && (
        <Elements stripe={getStripe()} options={{
          clientSecret: clientSecret,
          ...options
        }}>
          {children}
        </Elements>
      )}

    </>
  );
}

export default StripeElementProvider;```

lastly this is the custom element provider i have created