inderjeet

[pale nacelle]

Hi

[tranquil hawk]

Hi! Let me help you with this.

[pale nacelle]

Thanks for your support

I would like to inform you that

I want to subscription process using react in frontend and php in backend

[tranquil hawk]

You should create a Subscription and not a Setup Intent: https://stripe.com/docs/billing/quickstart?lang=php&client=react

[pale nacelle]

I also share the code

FIrst step - return response()->json([
'client_secret' => $setupIntent->client_secret,
]);

Pass the client secret from backedn to frontend

import { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const PaymentForm = () => {
const [error, setError] = useState(null);
const [processing, setProcessing] = useState(false);
const [succeeded, setSucceeded] = useState(false);
const [clientSecret, setClientSecret] = useState('');

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

useEffect(() => {
const fetchClientSecret = async () => {
const response = await fetch('/create-setup-intent');
const data = await response.json();
setClientSecret(data.client_secret);
};
fetchClientSecret();
}, []);

const handleSubmit = async (event) => {
event.preventDefault();
setProcessing(true);
const { error, setupIntent } = await stripe.confirmCardSetup(clientSecret, {
payment_method: {
card: elements.getElement(CardElement),
},
});
if (error) {
setError(error.message);
setProcessing(false);
} else {
setSucceeded(true);
setProcessing(false);
console.log(setupIntent);
}
};

return (
<form onSubmit={handleSubmit}>
<CardElement />
{error && <div>{error}</div>}
<button type="submit" disabled={processing || succeeded}>Save Card</button>
</form>
);
};

Above code is frontend

is it right way or not

?

[tranquil hawk]

It depends on what you do on the backend. Why are you using Setup Intent?

[pale nacelle]

Actually, I manage payment subscriptions from the backend . I need a payment method id from the frontend user.

So, without client secret frontend user not able to pass me payment method id

I hope you got my concern

[tranquil hawk]

I understand. Could you please share your backend code?

[pale nacelle]

Sure

$stripeCustomerId = $user->createAsStripeCustomer()->id;

$paymentMethod = $request->payment_method;
$paymentMethod = $user->addPaymentMethod($paymentMethod)->id;

            //  }

$plan = (!empty($request->plan_id )) ? $request->plan_id : '';

** $subscription = $user->newSubscription('default', $plan)->create($paymentMethod != null ? $paymentMethod: '');**

=================

when frontend user give me payment method id then i just need to pass it in newSubcription method then this method confirm then charge and do the subscription but frontend user not able to give me payment method id

Concern is that how using <paymentElement /> how frontend user give me the payment method id

[tranquil hawk]

Are you collecting the PM first and then creating the Subscription?

[pale nacelle]

Yah you are right

[tranquil hawk]

That's not the recommended way to do this. Please follow the guide I shared earlier: https://stripe.com/docs/billing/quickstart?lang=php&client=react

[pale nacelle]

In my api I collecting the payment method from frontend user.

There is no any another way to do this without using above way.

Because I try this another way also like
1st I create a api using payment intent and their response i got payment client secret which i give to the frontend developer and he confirms the payment.

Then the balance deducated from my account. but this is doing one time deduction not subscription

[tranquil hawk]

I am not sure you're following the guide I shared.

Here's another one maybe it's more clear. In this step you are creating a Subscription: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements#create-subscription

[pale nacelle]

Thanks for your time

[tranquil hawk]

Happy to help. Please, let me know if you have any other questions.

[pale nacelle]

Can you tell me one more thing

[tranquil hawk]

Sure

[pale nacelle]

<CardElement /> display the card in single input like card number,cvc etc.
if i want to use it into multiple input then how i can do this according to ui point of view

[frozen spear]

👋 taking over for my colleague. Let me catch up.

you can look into this tutorial video https://www.youtube.com/watch?v=gW8b0Y6Ae8o