zakaria7298 | Stripe Developers | Page 1

violet flumeBOT Dec 18, 2023, 9:31 AM

#

floral panther Dec 18, 2023, 9:31 AM

#

@strange coral let's keep talking in this thread please.

strange coral Dec 18, 2023, 9:32 AM

#

okey

floral panther Dec 18, 2023, 9:32 AM

#

const stripePromise = loadStripe('pk_test_...');

const CheckoutForm = ({ clientSecret }:any) => {
const stripe = useStripe();
const elements = useElements();

const handleSubmit = async (event: { preventDefault: () => void; }) => {
event.preventDefault();
if (!stripe || !elements) {
  return;
}

const { error, paymentIntent } = await stripe.confirmPayment({
  elements,
  redirect: 'if_required'
});


if (error) {
  console.log('[error]', error);
} else {
  console.log('[PaymentIntent]', paymentIntent);
  // Traiter le PaymentIntent
}
};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<IonButton type="submit" disabled={!stripe} expand="block" >Payer</IonButton>
</form>
);
};

const Selltrip = () => {
const [clientSecret, setClientSecret] = useState('');

useEffect(() => {
fetch('http://localhost:3000/payment/create-payment-intent', { method: 'POST' })
.then((response) => response.json())
.then((data) => setClientSecret(data.clientSecret))
.catch((error) => console.error('Erreur lors de la création de l'intention de paiement:', error));
}, []);
const appearance = {
theme: 'stripe',
// Pour les styles de composants spécifiques
rules: {
  '.Label': {
    color: '#6964F6',
    width:'2px',
  },
  // ... autres règles CSS personnalisées
},
};

#

const options:any = {
clientSecret: clientSecret,
appearance: appearance
};
return (
<div>
<IonCard>
<IonCardContent class='ion-card-content-custom'>
{clientSecret && (
<Elements stripe={stripePromise} options={{ clientSecret }}>
<CheckoutForm clientSecret={clientSecret} />
</Elements>
)}
</IonCardContent>
  </IonCard>

</div>
);
};

export default Selltrip;

#

When a user attempts to make a payment via PaymentIntent, the payment methods previously registered for this user are not displayed.
Where are you expecting the payment method to be displayed ?

strange coral Dec 18, 2023, 9:35 AM

#

yes

#

I want to give the user the option of paying with the payment method already registered or entering a new payment card.

floral panther Dec 18, 2023, 9:40 AM

#

What is the Stripe SDk youa re using ?

#

It seems that you are suing Stripe ReactJs SDK, right ?

strange coral Dec 18, 2023, 9:41 AM

#

yes

floral panther Dec 18, 2023, 9:41 AM

#

if so you can't display existing payment method using Stripe Element, you need to implement a UI by your own to list the existing payment method of the customer

#

For mobile integration, you can use PaymentSheet, however it's available onl for ReactNative, Android and IOs

#

Stripe doesn't support an official integration for Ionic

strange coral Dec 18, 2023, 9:44 AM

#

I want to know if it works with simple react js

floral panther Dec 18, 2023, 9:46 AM

#

No unfortunately

strange coral Dec 18, 2023, 9:47 AM

#

okey

#

thank you very much

#zakaria7298