#joseamica
wary snowBOT
Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
worldly swallow
Hey there, using the "two step" flow guide here you can create the payment method from Element first and inspect the details like country & fingerprint etc
https://docs.stripe.com/payments/build-a-two-step-confirmation#create-pm
wispy moth
All my platform is based on a quick paying mode
user clicks pay and this screen will appear
they only select the card and they pay. I can verify on the saved cards if its from other country, but in a new form, i need to add a extra step on the ui?
worldly swallow
Most of this can be invisible to the customer, you can create that payment method and inspect it without any UI change for the customer
wispy moth
damn
i need to change all my code i think
import { Flex } from '@/components'
import { Button } from '@/components/Button'
import Modal from '@/components/Modal'
import { Spacer } from '@/components/Util/Spacer'
import { H4, JumboTitle } from '@/components/Util/Typography'
import { Currency } from '@/utils/currency'
import { useStripe } from '@stripe/react-stripe-js'
import axios from 'axios'
import clsx from 'clsx'
import { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import TipModal from './TipModal'
export default function CheckoutCard({
paymentMethodId,
customerId,
amounts,
setErrorMessage,
loading,
setLoading,
tipPercentage,
setTipPercentage,
}: {
paymentMethodId: string
customerId: string
amounts: {
amount: number
avoFee: number
total: number
}
setErrorMessage: (message: string) => void
loading: boolean
setLoading: (loading: boolean) => void
tipPercentage: number
setTipPercentage: (tipPercentage: number) => void
}) {
const stripe = useStripe()
const params = useParams()
const navigate = useNavigate()
const [showTipModal, setShowTipModal] = useState(false as boolean)
const completePayment = async () => {
try {
setLoading(true)
const response = await axios.post('/api/v1/stripe/create-payment-intent', {
currency: 'mxn',
customerId: customerId,
paymentMethodId: paymentMethodId, // Usa el método de pago guardado
params: {
venueId: params.venueId,
billId: params.billId,
},
amounts: {
amount: amounts.amount,
tipPercentage: tipPercentage,
avoFee: amounts.avoFee,
total: amounts.total,
},
})
const clientSecret = response.data.client_secret
// Confirma el pago con el método de pago guardado
const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
payment_method: paymentMethodId,
return_url: `${window.location.origin}/success`,
})
if (error) {
setErrorMessage(error.message)
} else {
// Maneja el éxito del pago aquí
// TODO redirigir a success o cerrar todos los modales y mostrar notificacion
console.log('exito', paymentIntent)
navigate(`/success?payment_intent=${paymentIntent.id}`, { replace: true })
}
} catch (error) {
setErrorMessage(error.message)
} finally {
setLoading(false)
}
}
return (
<div className="flex flex-col justify-between">
<TipModal
amounts={amounts}
tipPercentage={tipPercentage}
setTipPercentage={setTipPercentage}
showTipModal={showTipModal}
setShowTipModal={setShowTipModal}
loading={loading}
completePayment={completePayment}
stripe={stripe}
/>
<Spacer size="jumbo" />
<div className="fixed inset-x-4 bottom-4">
<div className="flex-1">
<Button
size="md"
text={loading ? 'Confirmando...' : 'Confirmar'}
onClick={() => {
setTipPercentage(0.15) // Set tipPercentage to 0.15
setShowTipModal(true) // Open the modal
}}
disabled={!stripe || loading || !paymentMethodId}
className="sticky bottom-0 p-4 rounded-full disabled:bg-zinc-400"
/>
</div>
</div>
</div>
)
}
Do you need this before you complete payment?
If so, yes you'll likely need to change your flow
If not, then you can inspect it retroactively on the payment method
wispy moth
Before the checkout form i have this:
worldly swallow
Ok, and what part of that do you need help with?
wispy moth
Well, i want to know where i can implement the part where i verify the card origin before they pay