Save Card

[lonelee]

Is your feature request related to a problem? Please describe. No, it is not related to a specific problem.

Describe the solution you'd like I would like to introduce a separate screen for saving cards, independent of the payment flow.

Describe alternatives you've considered An alternative is allowing users to add their cards prior to initiating the payment process.

[araratthehero]

Hi @lonelee, thank you for submitting the feature request. We'll internally review it to explore possibilities and keep you informed of any progress.

In the meantime, could you please specify whether you want to store cards independently of the payment flow within the Drop-in or Components integration?

[lonelee]

I am using Drop-in for integration, and I would like there to be a method such as DropIn.startAddCard() that will provide me with a StoredPaymentMethod object through a callback. Also, users should be able to open a page to manage all of their saved payment methods.

[araratthehero]

Hi @lonelee, thank you for the clarification.

We don't have a separate screen dedicated to managing stored payment methods, but you can achieve your goal with our current integration.

To assist you further, could you please specify whether you are using Sessions?

[lonelee]

No, I'm not using Sessions

[araratthehero]

Hi @lonelee, thank you for the clarification.

As previously mentioned, we do not have a separate screen dedicated to managing stored payment methods. However, you can implement a custom solution to allow users to store payment methods before making a payment.

Here's what I suggest:

• Display the card component on a separate screen to the user, following the instructions here.
• When creating the CheckoutConfiguration, pass a 0 amount. This will cause the card component to display the button text as "Confirm Preauthorization".
• Set the visibility of the store payment field to false for the card component in the CheckoutConfiguration. This will hide the "Save for my next payment" toggle. You can achieve this by following the code example here and calling setShowStorePaymentField(false).
• When making a payment call from your backend, send the storePaymentMethod flag as true. This ensures that the payment method is stored after authorization.

This approach will store the card after it is authorized, allowing it to be used for future payments. The stored card details will be returned in the storedPaymentMethods list in the PaymentMethodsApiResponse when fetching available payment methods.

Later you can:

• Pass the StoredPaymentMethod when launching the card component.
• Launch the Drop-in with the latest PaymentMethodsApiResponse, which will display the stored card to the user.

Let us know if it works for you.

[araratthehero]

Hi @lonelee, have you had the chance to try out the suggested approach mentioned earlier? And if you do not require further assistance, could you please close this issue?

[lonelee]

Thank you for your response, I will give it a try later.