-
Notifications
You must be signed in to change notification settings - Fork 263
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: allow apple pay shipping events to emit #1298
fix: allow apple pay shipping events to emit #1298
Conversation
hey @p-sebastian , thanks for the contribution! So you're using the |
hey @charliecruzan-stripe , Apple allows you to create the button as long as it follows the guidelines, so it is an ApplePay button but created normally by me in react-native. (it is already running in production so it has been approved by apple) Difference is that in the const { presentApplePay } = useApplePay({
onShippingMethodSelected,
onShippingContactSelected,
});
const onApplePayPress = async () => {
const { error, paymentMethod } = await presentApplePay({
...
});
// Handle confirmation
}; While the button exported by export interface NativeProps {
...
onShippingMethodSelectedAction?: (
...
) => void;
onShippingContactSelectedAction?: (
...
) => void;
onCouponCodeEnteredAction?: (
...
) => void;
} The @objc func handleApplePayButtonTapped() {
if onPressAction != nil {
onPressAction!(["true": true])
// JS Callbacks are all no-ops since in legacy code (useApplePay hook),
// this behavior is controlled via the onDidSetShippingMethod and onDidSetShippingContact
// events
stripeSdk?.shippingMethodUpdateJSCallback = doesNothing
stripeSdk?.shippingContactUpdateJSCallback = doesNothing
stripeSdk?.couponCodeEnteredJSCallback = doesNothing
} else {
stripeSdk?.shippingMethodUpdateJSCallback = onShippingMethodSelectedAction
stripeSdk?.shippingContactUpdateJSCallback = onShippingContactSelectedAction
stripeSdk?.couponCodeEnteredJSCallback = onCouponCodeEnteredAction
}
} On a side note, I noticed that you will be switching to start using the: const { error, paymentMethod } = await createPlatformPayPaymentMethod({ applePay: {...} }) But that doesn't have the 2 event listeners and the manual |
Interesting, I didn't know that. FWIW, as Apple changes the design requirements, I would imagine it's easier to just use their PKPaymentButton rather than having to update your custom component every now and then to re-follow their guidelines. But maybe that doesn't happen often enough to be an issue for you! |
Hasn't happened to me yet, but they can get very picky when it comes to approving it, it's the same for the |
Gotchya, and just out of curiosity, why do you prefer using your own custom component then? Do you do the same thing for the Google Pay button component? Is there something i could add to our pre-provided components? |
@charliecruzan-stripe It allows you a bit more flexibility on the style and it is not that difficult to make. Also if you are using reanimated you could check Stripes version:Our version:Font size and icon (an SVG) is the same as the checkout next to it, as well as borderRadius (although that is editable on the stripe one) |
I see, Apple does not recommend altering the icon or text size in the Apple Pay button, so that is not something we would offer since it would open up the possibility of app rejections 😞 |
Merging to fix since this affected existing behavior, but I do want to mention that we design the Apple and Google Pay APIs to be used with our components (specifically, the |
Summary
onDidSetShippingMethod
&onDidSetShippingContact
events will again send data back to theuseApplePay
hook listeners as well as by using the standardconst eventEmitter = new NativeEventEmitter(NativeModules.StripeSdk);
listenersWhat happened was that the:
Would never be set in any place other than using the
ApplePayButton
component from Stripe, meaning that if you were using theuseApplePay
hook or needed to listen to the shipping changes, it would skip and never trigger thesendEvent
functionMotivation
I needed to listen to the shipping address changes programatically because the app we use has shipping available to different countries which require different tax calculations and currencies.
Testing
Documentation
Select one: