#usm-seong_react-native-payment-sheet
spark sparrowBOT
👋 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/1273725163933925449
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
hollow geyserBOT
distant steppe
Hi there 👋 the only thing coming to mind is to use the approach shown here to complete the payment outside of the Payment Sheet:
https://docs.stripe.com/payments/accept-a-payment?platform=react-native#react-native-flowcontroller
but it still looks like that flows immediately dismisses the payment sheet when the customer completes the input there, though I do believe it would then let you show your own UI for the rest of the flow.
main depot
hmm
let me check please give me a moment
oh i already have customFlow: true
for initPaymentSheet
try {
const { data } = await axios.post(createStripePaymentMethodSIPoint);
return data?.clientSecret;
} catch (e) {
console.log('fetchClientSecret error', e);
return null;
}
};
const openPaymentSheet = async () => {
const { error: presentError } = await presentPaymentSheet();
if (presentError) {
if (presentError.code === PaymentSheetError.Canceled) {
return;
}
...
return;
}
const { error: confirmError } = await confirmPaymentSheetPayment();
if (confirmError) {
...
return;
}
await dispatch(fetchProfile());
Toast.show({
type: 'info',
text1: 'A credit card has been added successfully.',
});
};
useEffect(() => {
const initializePaymentSheet = async () => {
const setupIntentClientSecret = await fetchClientSecret();
if (!setupIntentClientSecret) {
console.log('FETCHING CLIENT SECRET FAILED');
return;
}
const { error } = await initPaymentSheet({
merchantDisplayName: 'AAA',
customFlow: true,
setupIntentClientSecret,
});
return error;
};
const fetchPI = async () => {
const initError = await initializePaymentSheet();
if (initError) {
.........
);
return;
}
};
fetchPI();
}, []);
<Button onClick=openPaymentSheet>Pay</Button>
distant steppe
The custom flow is the closest thing to accomplish what you're after, where you can display your own UI after the payment sheet is dismissed, but as far as I'm aware you can't delay the sheet dismissal.
main depot
gotcha. thank you for confirming. i have another question. how do I display a stripe form that also has an apple pay (or google pay)option? in this
on desktop, I have this so it has Google pay/apple pay options are visible
however on React Native, I can't find a way
I only have my first screenshot
distant steppe
That's also covered in the doc I linked to.
Apple Pay is here:
https://docs.stripe.com/payments/accept-a-payment?platform=react-native#react-native-apple-pay
Google Pay instructions are here:
https://docs.stripe.com/payments/accept-a-payment?platform=react-native#react-native-google-pay
spark sparrowBOT
usm-seong_react-native-payment-sheet
main depot
yeah when I update initPaymentSheet just like the doc
merchantDisplayName: 'AA',
customFlow: true,
setupIntentClientSecret,
applePay: {
merchantCountryCode: 'US',
},
});```
then It looks like this. how do I (as a user) proceed with Apple Pay?
I'd expect to have a CTA that dismisses this modal and opens up Apple pay window
but now it seems like it only show the apple pay window when I close this modal by pressing X button
distant steppe
Hm, that does seem a little odd. Are you able to select Apple Pay if you tap on Add, or is that the only place it's shown?
main depot
this is what I see when I tap on Add
distant steppe
On the devices you're testing wtih, is it already logged into an Apple account that has a card already added to the Apple Pay wallet?
main depot
yes I think cuz this is a iOS simulator that has a test credit card in Wallet
Please give me some time Let me test this on a real ios device
distant steppe
Will do! I'm also checking to see if my teammates have seen this before.
An additional question, when running this in the simulator, are you seeing any errors in the logs when Apple Pay is selected? Anything that might indicate we tried to launch the Apple Pay UI but couldn't?
main depot
nope
i think the confusion is coming from the fact that Apple Pay option in "Select your payment method" modal is preselected but when I tap the Apple Pay option, the modai is dismissed and the apple pay window shows up
distant steppe
Oohh, gotcha, so it looks selected, but it still has to be tapped on to trigger the next step?
distant steppe
I see
main depot
do you know why I have Amount Pending? here's the code
merchantDisplayName: 'US Mobile',
customFlow: true,
setupIntentClientSecret,
applePay: {
merchantCountryCode: 'US',
cartItems: cartItemSummary,
merchantName: 'US Mobile',
currencyCode: 'USD',
requiredBillingContactFields: [PlatformPay.ContactField.PostalAddress],
},
googlePay: {
merchantCountryCode: 'US',
testEnv: env.isTest,
cartItems: cartItemSummary,
merchantName: 'US Mobile',
currencyCode: 'USD',
requiredBillingContactFields: [PlatformPay.ContactField.PostalAddress],
},
});
return error;
};
distant steppe
Looks like you're using a Setup Intent based on your variable name (setupIntentClientSecret), which don't charge an amount so there isn't an amount to show.
distant steppe
I believe in rare cases a $1 authorization may be used for Setup Intents. I also think it'd be misleading if you said you were going to charge your customer $0, and then charge them later. That seems like a recipe for disputed payments.
main depot
no yeah that's not the expected behaviour. the expected behaviour is to display $0 and charge nothing actually
distant steppe
I don't think that's correct
main depot
sorry I'm not getting it
distant steppe
I don't think the expected behavior is for the Apple Pay UI to show $0. I believe the "Amount Pending" you showed in your screenshot is the expected behavior of that UI.
What do you have in your cartItemSummary variable?
Double checking our docs, I see I'm mistaken and the cartItems parameter you're using is where you provide the details for populating that:
https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams
main depot
gotcha i think i have all the info I wanted. thank you for today have a good one please feel free to archive this chat