The app freezes when a modal is shown after completing an Apple Pay payment #445
Comments
|
Hey @ChielBruin
The expected way to dismiss DropIn/Component UI is to call Are you using |
|
We use the advanced flow like shown in the README and example app: class Client {
public async payments(
data: PaymentMethodData,
component: AdyenActionComponent,
_extra: unknown,
): Promise<undefined | PaymentResponse> {
const body = {
...data,
...this.config,
recurringProcessingModel: 'CardOnFile',
channel: Platform.OS === 'ios' ? 'iOS' : 'Android',
};
const response = await this.request(body, '/payments');
if (response.action) {
component.handle(response.action);
return undefined;
} else {
this.handleResponse(response, component);
return response;
}
}
public async paymentsDetails(
data: PaymentDetailsData,
component: AdyenActionComponent,
): Promise<undefined | PaymentResponse> {
const response = await this.request(data, '/payments/details');
this.handleResponse(response, component);
return response;
}
private async request(data: object, path: string): Promise<any> {
const response = await request
.agent()
.post(this.baseUrl + path)
.set('Content-Type', 'application/json')
.send(data)
.ok(() => true);
if (response.status !== Http.OK) {
console.error(response.body);
throw new Error(response.body);
}
return response.body;
}
private handleResponse(
response: PaymentResponse,
component: AdyenActionComponent,
): void {
const success = [
ResultCode.authorised,
ResultCode.received,
ResultCode.pending,
ResultCode.presentToShopper,
].includes(response.resultCode as ResultCode);
component.hide(success);
if (!success) {
throw response;
}
}
} <AdyenCheckout
config={client.config}
paymentMethods={paymentMethods}
onSubmit={(...args) =>
client
.payments(...args)
.then((response) => {
// Show success/error message
}).catch((ex) => {
// Show error message
})
}
onAdditionalDetails={(...args) =>
client
.paymentsDetails(...args)
.then((response) => {
// Show success/error message
}).catch((ex) => {
// Show error message
})
}
onError={(error, component) => {
component.hide(false);
// Show error message
}}
>This works perfectly for iDEAL and creditcard payments, but not for Apple Pay. |
|
In your code you are missing One suggestion - use useCallback. This will make sure only one instance of a function exist.
Seems like something is trying to present Are you using any 3rd-party libraries for spinner or loading bar during network call, maybe? Could you make a |
|
Thanks for spotting the missing call to I added some logs to see what re-renders are triggered:
I found that I got message 2 and 4 a couple ms before the "Attempt to present"-error Regarding other libraries:
|
|
Is it possible for you to create a blank app and reproduce this behaviour there? |
|
Hey @ChielBruin, do you still face this issue with the latest releases? |
|
I just tried with version 2.2.0 and still see the same issue Do you know if other user have gotten ApplePay to work (meaning I probably missed some configuration step somewhere)? |
|
Hey @ChielBruin It is confirmed to work.
I believe this could be a "re-render" issue. Something is mutating state of your "parent" view and it causes recreation of Is it possible for you to create a blank app and reproduce this behaviour there? |
|
I've narrowed down the issue to the popups we show upon payment completion using the |
|
ApplePay is a bit unique - it is not a standard UIViewController: it is another window, running in a separate thread, appearing above your screen. With other VC, 3rd party library (we do that, for example) can traverse view hierarchy and present itself on top, but it is not possible with Apple Pay. Maybe this is what causing this collision on iOS level |
ChielBruin
changed the title
|
Hey @ChielBruin Any luck? |
|
I have not been able to spend more time on it after I figured out what was causing the issue. It might be worth checking what https://github.com/mkharibalaji/react-native-adyen-payment does differently in their Apple Pay implementation, as we did not see the same issue with multiple modals when using that library. But I am not sure when I can spend time on that due to other priorities |
|
Closing this issue for now. Feel free to reopen when it becomes relevant again. |
Describe the bug
When I complete an Apple Pay payment, the drop-in closes but the app is completely unresponsive.
The payment itself did succeed.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The app should function normally after completing a payment (which in our case would show a pop-up telling the user that the payment succeeded)
Logs
I get the following error messages in my logs:
It seems to fail to overwrite the drop-in in the view stack
Devices:
Additional context
The shown behaviour is similar to an issue with integrating Apple Pay that I had in a different library, but they are probably unrelated: mkharibalaji/react-native-adyen-payment#54
The text was updated successfully, but these errors were encountered: