Hide PayPal payment field after successful payment

[strandofgenius]

It is confusing when a payment is successful because the buttons still display after the payment. Adding a line to remove the payment field if it is successful.

[engram-design]

It sure about this one. For starters, probably should be in onAfterSubmit where we reset everything about a form after the submission was successful.

But what if the user wants to fill out the form again without having to refresh the page?

But actually, what you’re doing here is hiding the button after authorization of payment. The capturing of that doesn’t happen until the submission is made. Again - what if the user wants to change their authorisation?

I’ll take a look at some examples elsewhere just to confirm what standard behavior is.

[strandofgenius]

Based on your configuration I wasn't sure where to put that line, but the idea came from this PayPal Dev repo. If a user has already paid it doesn't make sense to show them the payment buttons again. Ideally it would be a better experience to click the form submit button, go through the payment process, and then be redirected back to the site with a confirmation.

https://github.com/paypaldev/PayPal-Standard-Checkout-Tutorial/blob/175a8f17c10b5d2eb77139cc57d5a697027a90f7/script.js#L75

[strandofgenius]

Maybe I'm confused, has the payment not gone through until after the user clicks the submit button? I assumed that when I click "complete purchase" in the PayPal checkout window I've already paid.

[engram-design]

Ideally it would be a better experience to click the form submit button, go through the payment process, and then be redirected back to the site with a confirmation.

Sure, but this is a payment authorisation process, where the user is redirected off to PayPal to approve an amount to be debited from their account. Payment isn't captured until the user submits the last page of the form (see

formie/src/integrations/payments/PayPal.php

Line 163 in c3716f1

$response = $this->request('POST', "v2/payments/authorizations/{$authId}/capture");

)

The problem with payments in forms is that while typically it's on the last page and the last thing the user does - that's not always the case. As such, this is why we have an authorisation step, that could be anywhere in the form, and we don't capture payment until the submission has been validated.

What if you pressed the PayPal "pay" button which captured payment immediately, but then another field in the form failed validation when you pressed submit? Maybe the user bailed on the form, but then they've already paid for things.

If a user has already paid it doesn't make sense to show them the payment buttons again

I sort of agree with this, but there are cases where users want to make multiple payments on a form, and as with other payment integrations, we don't hide it on form submit. Merely reset everything back to its original state to be ready to input again. The PayPal Dev repo is in the context of a traditional checkout as well.

So to re-iterate, this would be hiding the PayPal button after the user has authorised payment, not when the payment has been captured. If you're after the latter, I might suggest using your own JS Event to achieve what you're after as in this PR.