negative10xprogrammer

[slender star]

im talking aobut this form, everything works as i origianlly intended with card elements

[feral rune]

Hi there, there's a deferred intent creation flow that you can consider to use https://stripe.com/docs/payments/accept-a-payment-deferred?type=payment

[slender star]

and this will work with my intended flow?

[feral rune]

Yes, I'd suggest you to go through the doc I sent earlier.

[slender star]

i did, unfortunately i have very little js/react skills.im a backend developer.

I have this:

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

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_51N0LqFK8v32HmraZlMkljiLm2bJY4aj5oNreVbAK6m9w3BpoWlUCAIkLUWEhUtYg0ucw90zvIh4EqVq5KEI8yJC3007HkfI3sM');

function App() {
    const options = {
        mode: 'payment',
        amount: 1099,
        currency: 'usd',
        // Fully customizable with appearance API.
        appearance: {/*...*/ },
    };


    return (
        <Elements stripe={stripePromise} options={options}>
            <CheckoutForm />
        </Elements>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

in index.js and this in checkoutform.js

import React from 'react';
import { PaymentElement } from '@stripe/react-stripe-js';



const CheckoutForm = () => {
    return (
        <form>
            <PaymentElement />
            <button>Submit</button>
        </form>
    );
};


export default CheckoutForm;

But i'm not sure how to customize the layout to include multiple payment methods in accordion

like i dont really follow, where does this go?

[feral rune]

OK, you can pass the same param to the <PaymentElement /> component. For instance

<PaymentElement options={{
  layout: {
    ...
   }
}}