#florin_docs

1 messages · Page 1 of 1 (latest)

crystal sunBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1318903908051062864

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

lapis dawn
#

Hi, let me help you with this.

#

let the user add it again in the future
You mean add a card with the same number? This is not a problem.

The docs talk about PaymentMethod object, not about a speific card. When PaymentMethod object is detatched, it is as good as deleted. But the same card can be added and it will create a new PaymentMethod object. Or you can add the same card multiple times and each time it will get a new PaymentMethod object.

fluid crescent
#

yea, basically add the same card again

#

oh, I see

#

and if I want to add a payment method for a user ( basically have a form where he puts his card details and just save them as payment method) do I create a payment intent with 0 cost ?

#

or what would be the best choice

lapis dawn
crystal sunBOT
fluid crescent
#

so I want to use the CardElement component because I will only allow cards to be used as payment methods. I added a CardElement wrapped between Elements with options set with that payment intent, is that a good approach ? After that do I need to use confirmCardPayment + the elements.getElement(CardElement) ? just like I would pay ?

tight zealot
#

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

#

so I want to use the CardElement component because I will only allow cards to be used as payment methods
you could do that with PaymentElement as well

#

where you would only activate Cards in the Payment Method Configurations settings in your dashboard

fluid crescent
#

I would like to not do that because I don't want my merchant to cause any issues by forgetting to do that step

tight zealot
#

you can do it for them

#

it's possible to create a PaymentMethodConfiguration using the API and using it when you create the SetupIntent

fluid crescent
#

but what if I just want to have a CardElement and just use that to add the payment without any other configuration ?

tight zealot
#

the reason why we don't recommend using the CardElement is that it's not extensible, meaning that if tomorrow you want to add more payment methods, instead of just updating the existing configuration you would have to rewrite your code

#

it's a bummer to say the least not to leverage the PaymentElement honestly

fluid crescent
#

so basically I would need to
1)create the payment method configuration object
2)use it when creating the setup intent const setupIntent = await stripe.setupIntents.create({
customer: user.stripeCustomerId,
automatic_payment_methods: {
enabled: true,
},
});
3) return the client Secret to the frontend
4) use the client secret in the payment element options
5) ?

#

is that so ?

tight zealot
# 
    automatic_payment_methods: {
      enabled: true,
    },

no

#

yes but you would also need to create a customer and pass the customer ID when creating the SetupIntent

fluid crescent
#

yea, I am doing that, I am saving the stripe customer id on my customers from my db

tight zealot
#

yes sorry I didn't see the customer: user.stripeCustomerId my bad

fluid crescent
#

So to be clear, I would need to create a payment method configuration that would only let the users to add cards

#

Something like the card element

tight zealot
#

yes yes

#

the configuration you will create will have to disable all non-card payment methods

#

and that would be it

fluid crescent
#

yea, that's what I was trying to do, I thought I can disable all of them at once and then just enable the card

#

await stripe.paymentMethodConfigurations.create({
name: 'Card only',
acss_debit: {
display_preference: {
preference: 'off',
},
},
card: {
display_preference: {
preference: 'on',
},
},
});

so I would need to do this, set everything on off, but the card

tight zealot
#

this is sufficient ```{
card: {
display_preference: {
preference: "on"
}
},
name: "only-cards"
}

#

this would automatically set everything else as false

fluid crescent
#

so I created a payment method configuration in the dashboard to test something, but I can't find how to delete it, and the API doesn't specify anything about deleting one. Is there a way to retrieve a configuration by the name?

#

basically I want to check if this config exists, use it, if not, create it

tight zealot
fluid crescent
#

so right now I hard coded the payment intent client secret on the frontend for testing purposes, but this is my idea of the flow.
The user clicks Add new payment method -> Send a HTTP request to the server to get a payment intent client secret -> Open the modal with the PaymentElement component, pass the client secret through props -> The user completes the form and clicks add -> I am using stripe.confirmSetup in the submit handler

#

Right now with the hardcoded value I am getting this error {error: IntegrationError: Invalid value for stripe.confirmSetup(): elements should have a mounted Payment E…} while this being my modal for adding .

`const AddPaymentMethodModal = ({
onClose,
STRIPE_PUBLISHABLE_KEY,
}: {
onClose: () => void;
STRIPE_PUBLISHABLE_KEY: string;
}) => {
const stripe = useStripe();
const elements = useElements();
const [error, setError] = useState<string | undefined>();
const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY ?? '');

const options: StripeElementsOptions = {
clientSecret: 'seti_1QXMdcKCK5mmw7xEvTUg0iIU_secret_RQD3r4MAbsr1tTSb2CyhllYFOh4jxZU',
};
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
onClose();
}
};

const addPaymentMethodHandler = async () => {
if (!stripe || !elements) {
return;
}

try {
  const { error } = await stripe.confirmSetup({
    elements,
    confirmParams: {
      return_url: 'url',
    },
  });

  if (error) {
    setError(error.message);
  }
} catch (error) {
  console.log({ error });
}

};

return (
<Flex
onClick={handleBackdropClick}
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
>
<div className="w-96 rounded-lg bg-white p-6">
<div className="mb-4 text-lg font-semibold">{Add a payment method}</div>
<Elements stripe={stripePromise} options={options}>
<PaymentElement />
</Elements>

    <Flex className="mt-4 justify-center">
      <Button className="w-[100px]" onClick={addPaymentMethodHandler}>
        Add
      </Button>
    </Flex>

    <div className="mt-4 flex justify-end">
      <Button onClick={onClose}>Close</Button>
    </div>
    {error && <Text className="flex justify-center text-red-500">{error}</Text>}
  </div>
</Flex>

);
};

`

tight zealot
#

what is this component <PaymentElement /> ?