Add the possibility to use Paypal Express Checkout

[rubofvil]

Overview

Add the possibility to use PayPal Express Checkout

Before

Don't begin the process.

After

Work, the contribution is completed and the redirect is succeeding.

Comments

• Issue in Drupal: https://www.drupal.org/project/webform_civicrm/issues/3356628#comment-15107303

[rubofvil]

@KarinG how do you see this approach

• Drupal issue: https://www.drupal.org/project/webform_civicrm/issues/3356628

[KarinG]

@rubofvil - thank you for your work on this. I've asked Jitendra to add this to his list. Test failures for 9.5 means the PR will need work. Jitendra can help guide you.

[jitendrapurohit]

@rubofvil Do we need to display both paypal button and default webform submit button on the form?

The button from paypal redirects to the main webform instead of paypal. Ideally we should be handling the redirect on the paypal button and hide the default submit button if paypal express is chosen as the payment processor similar to civicrm workflow?

[jitendrapurohit]

I also see a relevent js here - https://github.com/colemanw/webform_civicrm/blob/6.x/js/webform_civicrm_payment.js#L28 which might help in doing the above? @rubofvil

[rubofvil]

Thanks, @jitendrapurohit

You are right with this, the CiviCRM contribution / event page works with this extra button added with javascript.

We are doing the integration with more payment processors and we prefer, if is possible, work with normal submit (with the usual submit button), not with an extra button that paypal express generate.

Can we work to disable this javascript that generates the paypal express button?

• This MR exposed is working if you click in usual submit webform

[jitendrapurohit]

I haven't used paypal express for any of our client. Do you think its a normal approach of making a payment?

Since paypal express provides this button, i would expect to click on the same button to redirect me to paypal site for payment, and not the normal site submit button to do so. Would like to have more thoughts on this from admins using this processor. Anyone @KarinG ?

@rubofvil From the js code I pasted the link above, i think submit would still work, the section of the code still uses the d7 element ids, etc. Perhaps making a change like the following would allow you to redirect to paypal with the express button?

diff --git a/js/webform_civicrm_payment.js b/js/webform_civicrm_payment.js
index 0adf0e9..6aec469 100644
--- a/js/webform_civicrm_payment.js
+++ b/js/webform_civicrm_payment.js
@@ -26,12 +26,12 @@
             });
           }
           // When an express payment button is clicked, skip the billing fields and submit the form with a placeholder
-          var $expressButton = $billingPaymentBlock.find('input[name$=_upload_express]');
+          var $expressButton = $billingPaymentBlock.find('button[name$=_upload_express]');
           if ($expressButton.length) {
             $expressButton.removeClass('crm-form-submit').click(function(e) {
               e.preventDefault();
               $billingPaymentBlock.find('input[name=credit_card_number]').val('express');
-              $(this).closest('form').find('input.webform-submit.button-primary').click();
+              $(this).closest('form').find('input.webform-button--submit.form-submit').click();
             })
           }
           $('fieldset.billing_name_address-group').remove();

[KarinG]

We don't use PayPal for any of our clients, but if we're using PayPal, I do think we need to show the PayPal button because that's part of PayPal. It's what users will expect.

I do shop fairly regularly on European sites - easy to get birthday/gifts for my family in The Netherlands so I am aware of the multitude of Payment options. And since I don't have a Dutch bank account anymore, and since they don't accept non-European credit cards, I always use PayPal on this site:

Greetz.nl -> I pick any of three payment options:

That PayPal button -> as I user I am happy to see the PayPal button (it's familiar, that's what I want) -> it redirects me to PayPal:

[rubofvil]

Thx @KarinG @jitendrapurohit for the feedback, this week i don't have time, next week i will provide a more generic solution with default paypal express button and hidding the default submit button

[rubofvil]

Thx for feeback @KarinG @jitendrapurohit

Issue with Paypal Button

I adjust the code with the advices of @jitendrapurohit, to work with usual workflow, the same that is use by CiviCRM in contribution page, hiding the submit button and only showing the Paypal button.

---

Issue with confirmation page

To this point this dev is only working with the default confirmation page of the webform (showed in the screenshot). A proposal would be to work in a "preview confirmation page", like in CiviCRM contribution page workflow, and after that redirect to the confirmation page selected in the settings of the webform.

Screenshot of the previous page in CiviCRM that confirms the contribution to Paypal

@KarinG @jitendrapurohit what do you think about this proposal?

Video - All workflow in CiviCRM contribution page

[jitendrapurohit]

Thanks for the update @rubofvil. On a quick review, it looks like both buttons (submit & paypal) is still displayed when the webform has payment processor configured as only paypal express.

It works fine when payment processor is set to -User Select-.

Also, would it be possible to add style to the paypal button? See the relevant code in civi - https://github.com/civicrm/civicrm-core/blob/master/CRM/Core/Payment/PayPalImpl.php#L187-L197