#crisscrosschris
oblique relic
Can you clarify more about what you are unclear on? You can do things like let the customer set a default in your system or list out the saved payment methods in a UI and use whichever one your user chooses
opaque coral
Yeah, the UI allows customers to set a default, but when I list the payment methods (https://stripe.com/docs/api/payment_methods/list), there doesn't seem to be a field in the response that gives me the id of the chosen default card to charge.
oblique relic
If it is a Stripe UI, that setting may be set on the customer as one of these two properties
https://stripe.com/docs/api/customers/object#customer_object-invoice_settings-default_payment_method
https://stripe.com/docs/api/customers/object#customer_object-default_source
opaque coral
I'm retrieving a customer and logging it rn and it doesn't look like it's stored there
oblique relic
What UI are you using that is setting this as the default? Is this a pre-built RN UI or something else?
opaque coral
Yeah it's the React Native one, looks like this
when you list the payment methods, it returns an array of the payment methods, (in the above case it'd return 2 methods) but there's no indication of which was the selected one
oblique relic
To be clear, is that the UI for selecting the default, or are you expecting that UI to show the default that the user chose elsewhere?
And do you know what that UI's Stripe object name in your code is?
opaque coral
To be clear, is that the UI for selecting the default, or are you expecting that...
It's the UI for selecting the default (the check on the bottom right corner of the card). I'm just trying to access the id of the default card to charge it
opaque coral
And do you know what that UI's Stripe object name in your code is?
Uhhh not sure
I'm just following the steps in the first link I sent and got stuck on 5
oblique relic
Can you walk through your code and see what your code is doing to display that UI? Unfortunately I'm not that familiar with this sample code so I'm not immediately sure what RN component that is
I am guessing that it likely provides you with the selected PaymentMethod ID as a callback when it closes
opaque coral
// Initiailize payment sheet
export const initializePaymentSheet = async (
stripeCustomerId,
currentUserID,
theme
) => {
// https://stripe.com/docs/elements/appearance-api (fonts & light/dark mode)
const paymentSheetAppearance = {
shapes: {
borderRadius: 12,
borderWidth: 0,
shadow: 0,
},
colors: {
primary: "#fcfdff",
background: theme.accent,
componentBackground: "#e86464",
componentBorder: "#f3f8fa",
componentDivider: Color.white,
primaryText: Color.white,
secondaryText: Color.white,
componentText: Color.white,
placeholderText: Color.white,
icon: Color.white,
error: "#e1e1e1",
},
primaryButton: {
colors: {
background: "#e86464",
text: Color.white,
},
shapes: {
borderWidth: 0,
borderRadius: 12,
shadow: 0,
},
},
};
const idToken = await getIdToken(auth.currentUser, true);
const response = await fetch(`${API_URL}/createSetupIntent`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + idToken,
},
body: JSON.stringify({
stripeCustomerId: stripeCustomerId,
uid: currentUserID,
}),
});
// Handle response from your server.
if (!response.ok) {
const responseData = await response.json();
console.log("Response:", responseData);
throw new Error("Failed to setup intent.");
}
const { setupIntent, ephemeralKey } = await response.json();
// Initialize payment sheet
const { error } = await initPaymentSheet({
merchantDisplayName: MERCHANT_DISPLAY_NAME,
customerId: stripeCustomerId,
customerEphemeralKeySecret: ephemeralKey,
setupIntentClientSecret: setupIntent,
appearance: paymentSheetAppearance,
});
if (error) {
throw error; // Throw the error if initialization fails
}
// Promise resolves successfully if no error
};
I've looked into this, but I'm not aware of any callback when it closes
tender birchBOT
opaque coral
I've looked into this, but I'm not aware of any callback when it closes
If there is a callback, that would be very useful to know, because so far I've actually had to fetch the card count and compare it with the previous count to know if a user added/removed a card in the payment sheet
const checkIfPaymentInitialized = async () => {
const userRef = doc(db, "users", currentUserID);
const paymentMethods = await fetchPaymentMethods(
stripeCustomerId,
currentUserID
);
const cardCount = paymentMethods.data.length;
if (cardCount === 0) {
setIsPaymentInitialized(false);
await updateDoc(userRef, {
isPaymentSetup: false,
});
} else if (cardCount > 0) {
setIsPaymentInitialized(true);
if (isPaymentSetup == false) {
await updateDoc(userRef, {
isPaymentSetup: true,
});
}
}
// Check if card count has decreased
if (prevCardCountRef.current > cardCount) {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 300);
}
// Update the previous card count after the check
prevCardCountRef.current = cardCount;
};```So maybe I'm missing something
full karma
👋 Give me a moment to catch up on the context