Paypal-checkout-components: payment() is called multiple times for the same checkout button click

Created on 22 Jan 2017 · 10Comments · Source: paypal/paypal-checkout-components

Hi guys,

I'm using the sandbox environment. I have created the ExperienceProfile with "landing_page_type": "Billing" in order to get the direct credit card payment feature (not sure if it's important actually.)

I'm using the Express Checkout adv. server integration flow
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-integration/

Here is the client side part:

For testing I'm using the sandbox PERSONAL account with the $1 balance in order to check the insufficient funds flow.

First payment try works as expected: it suggests me to input the CC info or login.

I'm choosing the login and then it suggests me to enter the CC info again (I think because of the insufficient funds)

This is the end and I'm clicking the cancel link in the bottom of the browser window. It closes the window and calls the onCancel handler in the client-side.

Now I'm clicking the checkout button again and it opens the modal (since I'm already logged in) and call the payment handler with the ajax call to the server.

After that in Console\Network I'm seeing the 400 response:

With the content:

After that modal popup is turned out to the browser window and it calls the payment handler one more time. Which causes the second payment creation and in my server flow - new Order DB entity creation (also goods reservation, etc.)

So the questions is: why does it call the payment handler one more time?

Thank you!

🐞 bug

Source

sguryev

All 10 comments

Hi @sguryev,

First off, thank you so much for the detailed issue report! This is probably the most thorough explanation of an issue we've had since opening this repo, I wish they were all like this!

Let me make sure I understand completely:

You click the button and load up the popup window
payment() gets called for the 1st time
You log in, then click cancel and return to the parent page
You then click the button a second time, and load up the modal/lightbox iframe
payment() gets called for the 2nd time
The modal prompts you to click "Log in with PayPal", and when you click, a popup window is opened
payment() gets called for the 3rd time

Is that correct? If that's the case:

The reason it's breaking you out into a popup window from the modal iframe is, due to our InfoSec policy we can't collect a new credit card inside an iframe, so we need to break out
If we're calling payment() a 3rd time, at that point, then that's a bug. Generally the rule should be, payment() will only be called once each time you click the checkout button on the merchant page, so in your case it should not have been called a 3rd time.

So if I'm understanding correctly, and that call is happening a 3rd time, I'll try to repro and figure out why, because you're right, that is an issue.

bluepnume on 22 Jan 2017

👍1

Yeah, OK, I ran a quick test and I'm seeing that 3rd call. Really good catch! :) I'll figure out how soon we can make a fix for this.

bluepnume on 22 Jan 2017

👍1

Hi @bluepnume

Thank you for you work. I understand that a lot of details means the fast solution)

Yes, you are correct. Except small adjustments.
On the step #6 I don't click the login (since I have clicked the Login button on the step #3 and I'm logged in currently - cookies, etc.)
So I'm seeing the iframe with the rotation indicator during it calls the payment() 2nd time and then instead of showing the payment info it breaks out in to the browser window with the same rotation icon and calls the payment() 3rd time (without cancelling payment created on the 2nd time so I have one extra Order entity in the DB)

sguryev on 22 Jan 2017

@bluepnume GREAT! Thank you! If needed I can give you an access to our staging server where you will be able to try it yourself. In case you want to test it in my configuration.

sguryev on 22 Jan 2017

@bluepnume btw, maybe you can help me with the Negative Testing? Does it work with the REST API and express checkout flow? I have tried to enable the Negative Testing and pass the different codes as the Transactions[0].Amount.Total and Transaction.ItemList.Items[0].Price _(because of the validation error that total amount doesn't match items price*quantity)_ but had no luck. It was the regular checkout process.

Sorry if it's a wrong place. I understand but I don't know where is the best place to ask. I have found several stackoverflow articles with mention that Negative Testing doesn't support the REST API. But they are pretty old so I hope that it's better now 😄. So generally question is: how I can tests different error situations (not related to the HTTP issues like 5xx or 4xx) with the REST API and Express Checkout? I have created the PERSONAL accounts with $0 and $1 to test zero balance and insufficient funds _(actually they work the same)_. But it's doesn't look enough.

Sorry for disturbing!
Thank you!

sguryev on 22 Jan 2017

Hi @sguryev

On the 3rd payment() call issue, I've found the root cause. By default payment() is memoized every time the button is clicked, but slight variations in the params passed into the function were causing the memoization to not kick in.

I have a fix that I should be able to push out early next week.

On the negative testing front, I took a look but I don't see any reference to support for passing in error codes into the REST api. Actually, the error codes the REST api emits are totally different to the old nvp api.

I'll ask around but I think this is probably not supported.

I'm not sure what backend you're using, but would it be possible for you too mock out the paypal responses with the error codes you want to test? For example, if you're using node, we've had success using https://github.com/node-nock/nock in the past.

Thanks,
Daniel

bluepnume on 22 Jan 2017

👍1

Great thank you!

I'm using the ASP.NET MVC and WebAPI (using the official NuGet package). Generally I handle all the network related issues.

But I also analyze the payment.state value during payment creation execution. And and I'm curious if it can be different to the I expected ones (with the 2xx http status code), how I can emulate it and what I should do in this case.