Add Support for PayPal Express Smart Payment Buttons

[garthkoyle]

It is a new button that support alterative payment methods, like Venmo. It would be adding Java Script to the button code to make it dynamic. It would detect if the customer has Venmo and it shows as an option during checkout. PayPal is going to add more payment methods in the future too, like Apple Pay and Amazon Pay.

Docs PayPal provided: Muse_and_SPB_Best_Practices.pptx Smart Payment Buttons Value Prop - 1.16.18.pptx Solution Design Document Express Checkout using NVP.pdf

[mnelson4]

So there are really 3 different features mentioned in those documents.

1. PayPal Marketing Solutions (Muse). "...is a snippet of JS that a merchant has on their site that gathers insights and provides marketing messaging to consumers from PayPal." (Their Woocommerce plugin demo shows it pretty clearly: https://www.youtube.com/watch?v=tsSHL8NarAE&feature=youtu.be)
2. Smart Payment Button. Basically, the user needs to sign into PayPal first (preferably before we request registration information, so we can use their PayPal profile data to auto-populate some of the registration form), and then we can request PayPal generate a button image showing the payment options applicable to the current user. I think this is the feature that allows users to pay with Venmo etc
3. PayPal Express with checkout.js. Provides a payment experience basically identical to Stripe.

From the Express Checkout using NVP PDF

You have to include the PayPal checkout.js on the page hosting the PayPal button. Make sure you do not download the JS and host it from your server.

That conflicts with the WP.org plugin guidelines (we could break the WP plugin guidelines a little with this, or have this not be part of the EE core decaf, or try downloading the JS and hope to update it whenever PayPal updates the script)

[garthkoyle]

We were contacted by PayPal for option 2.

[shorrocks]

Hi Garth,

The goal is adding Smart Payment buttons because it is dynamic, this means that alternative payments will appear for the buyers during checkout.

This product pairs well with a few other things, which include:

• Integration Sign Up (Fast Onboarding)

• PayPal Marketing Solutions –

o PayPal Credit Offers and Banners

o Customer and Data Insights Now that you are starting to look at the documentation, I am going to request and Integration Engineer to help with questions and issues that come up too.

Sara Horrocks PARTNER MANAGER | Global

[mnelson4]

Here's their documentation for paypal One Touch: https://developers.braintreepayments.com/guides/paypal/overview/ios/v4#paypal-one-touch. I think we'd have folks first log in with PayPal, then they can use one touch instead of PayPal Express to pay

[shorrocks]

Hi Mike,

Did you get all of your questions answered to start the integration? If not, please let Nate, and I know.

@'Garth Koyle'mailto:garth@eventespresso.com I am getting the final approvals from finance. Once that is done I will send you a contract for this integration. I think I should have this to you by early next week.

Thanks, Sara

From: Mike Nelson [mailto:notifications@github.com] Sent: Thursday, May 10, 2018 4:00 PM To: eventespresso/event-espresso-core event-espresso-core@noreply.github.com Cc: Horrocks, Sara shorrocks@paypal.com; Manual manual@noreply.github.com Subject: Re: [eventespresso/event-espresso-core] Add Support for PayPal Express Smart Payment Buttons (#313)

Here's their documentation for paypal One Touch: https://developers.braintreepayments.com/guides/paypal/overview/ios/v4#paypal-one-touch. I think we'd have folks first log in with PayPal, then they can use one touch instead of PayPal Express to pay

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/eventespresso/event-espresso-core/issues/313#issuecomment-388184212, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AkuPZSUxLtEpb5nhBQvgHDQY2tv58nIOks5txKpGgaJpZM4TaaSh.

[mnelson4]

While waiting for a response to a few question, I'm going to take a stab at this. Here's the UI plan: -from the SPCO payment options step, PayPal will appear as a regular button -when clicked, we'll show the user the stacked button options, like on https://developer.paypal.com/demo/checkout/#/pattern/vertical -when the user clicks one of those options, a pop-up will appear acquiring payment info -A: the successful payment will trigger submitting SPCO payment options step and complete the purchase -B: if the payment is cancelled, the user can still try other payment options

Note: instead of having a regular paypal button in the list, we could try to put the PayPal Smart button in the list of payment options. Then when users clicked it, it would immediately open the pop-up etc, so it would skip a step. I think this would be pretty troublesome though as SPCO is pretty opinionated that they should first select their method of payment, and THEN see some more info about it and pay. So I'd rather do this as a v2, if at all.

This will technically be an onsite payment method, really similar to our current Stripe implementation. And I'm going to try doing this in a branch; I doubt we'll want this as a separate add-on.

[mnelson4]

thought about it some more, and following the above plan will result in a UI that will look like this: where there are two "PayPal" buttons, which will be really strange. So I'm prioritizing making the regular PayPal button instead be a smart button. Talked with Brent about it, we probably want to:

• edit \EE_SPCO_Reg_Step_Payment_Options::_setup_payment_options() so payment methods can define how their button will work
• add an interface that defines that, Brent suggested CustomAvailablePaymentMethodFormSectionInterface

So when the user clicks the smart button, we'll probably want to both show the PayPal pop-up, and execute EE's normal AJAX to bring up the billing form (which will have hidden inputs in it)

Brent also suggested

I would do is extract the logic in \EE_SPCO_Reg_Step_Payment_Options::_setup_payment_options() that currently builds that form section and put it in a new method. Then when you check for that new interface, you either call that new method with the extracted logic, or call whatever method(s) from the PM to get its custom form section that will make it clear and clean to read

ie, extract the logic from

  // loop through payment methods

       foreach ($this->checkout->available_payment_methods as $payment_method) {

           if ($payment_method instanceof EE_Payment_Method) {

               $payment_method_button = EEH_HTML::img(

                   $payment_method->button_url(),

                   $payment_method->name(),

                   'spco-payment-method-' . $payment_method->slug() . '-btn-img',

                   'spco-payment-method-btn-img'

               );

               // check if any payment methods are set as default

               // if payment method is already selected OR nothing is selected and this payment method should be

               // open_by_default

               if (($this->checkout->selected_method_of_payment === $payment_method->slug())

                   || (! $this->checkout->selected_method_of_payment && $payment_method->open_by_default())

               ) {

                   $this->checkout->selected_method_of_payment = $payment_method->slug();

                   $this->_save_selected_method_of_payment();

                   $default_payment_method_option[ $payment_method->slug() ] = $payment_method_button;

               } else {

                   $available_payment_method_options[ $payment_method->slug() ] = $payment_method_button;

               }

               $payment_methods_billing_info[ $payment_method->slug(

               ) . '-info' ] = $this->_payment_method_billing_info(

                   $payment_method

               );

           }

       }

[mnelson4]

todo:

• [x] actually process payment (see https://developer.paypal.com/docs/api/overview/ to get authorization token, and https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-payments-api/execute-payments/ to execute payment)
• [x] convert to add-on
• [x] handle expiring access token
• [x] use real payment data
• [x] use dynamic JS, right now it's all hard-coded (eg, div IDs and gateway creds are hard-coded)
• [x] configuration: big or small buttons, start or end of list
• [ ] review new approach (using a filter to add buttons onto start, and use CSS to hide normal button, instead of just replacing the image because that way the old radio button was still clickable)
• [ ] use new file structure for JS (CSS is ok?)
• [x] help docs (setup mostly)
• [ ] log errors to server
• [ ] itemized list

issues:

• after authenticating, although we skip some clicks, there's the viewport still jumps around unnecessarily (like it does with Stripe a bit, but this is probably more jarring)

[mnelson4]

view of what I have so far: https://drive.google.com/file/d/1jfhFrYXi-Hr6b2oajuzJucykzIiIEtiR/view

[shorrocks]

Adding Nate

Sara

From: Mike Nelson [mailto:notifications@github.com] Sent: Wednesday, June 6, 2018 3:07 PM To: eventespresso/event-espresso-core event-espresso-core@noreply.github.com Cc: Horrocks, Sara shorrocks@paypal.com; Manual manual@noreply.github.com Subject: Re: [eventespresso/event-espresso-core] Add Support for PayPal Express Smart Payment Buttons (#313)

view of what I have so far: https://drive.google.com/file/d/1jfhFrYXi-Hr6b2oajuzJucykzIiIEtiR/view

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/eventespresso/event-espresso-core/issues/313#issuecomment-395196672, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AkuPZaLL3onABLXDI3MGAY05KZxWxYA8ks5t6DZigaJpZM4TaaSh.

[shorrocks]

From: Mike Nelson [mailto:notifications@github.com] Sent: Wednesday, June 6, 2018 3:07 PM To: eventespresso/event-espresso-core event-espresso-core@noreply.github.com Cc: Horrocks, Sara shorrocks@paypal.com; Manual manual@noreply.github.com Subject: Re: [eventespresso/event-espresso-core] Add Support for PayPal Express Smart Payment Buttons (#313)

status update:

issues:

• what JS action can I listen for to initialize the smart button? there's spco_display_step which fires when the user goes from the attendee info step to the payment options step (well, at the start of all steps), but it doesn't fire when someone just reloads SPCO while already on the payment options step, or they revisit the payment option step
• after authenticating, although we skip some clicks, there's the viewport still jumps around unnecessarily (like it does with Stripe a bit, but this is probably more jarring)
• the new buttons aren't laid out in the most appearling style (they're bigger than normal EE PM buttons)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/eventespresso/event-espresso-core/issues/313#issuecomment-395196628, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AkuPZSHNxaJSgq1MVdvcVkDWj667HnPIks5t6DZWgaJpZM4TaaSh.

[ppnsanders]

@mnelson4, for bullet 3 in the above, the size can be set to align with the other button sizes on the page.

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/#button-styles

style.size:

Value	Dimensions	Description
small	150 pixels by 25 pixels	default
medium	250 pixels by 35 pixels	Use to match the size of other medium buttons on the page.
large	350 pixels by 40 pixels	Use to match the size of other large buttons on the page.
responsive	Dynamic	Matches the width of the container element, height is decided dynamically based on width. Minimum width is 150px, maximum width is 500px.

[mnelson4]

thanks @ppnsanders. Ya I think I'll default to using responsive and putting it into a container that's the same size as the other buttons.

[mnelson4]

created a core PR for the core work needed for this (I'll probably create a few but so far there's just one): https://github.com/eventespresso/event-espresso-core/pull/517 Also, we're preferring to have this be an add-on, at least initially, so created https://github.com/eventespresso/eea-paypal-smart-buttons

[mnelson4]

FYI I created a video showing how to setup a paypal REST API app: https://drive.google.com/file/d/1QW5btK7UP8FU4JehgENkzApA-TZkANuI/view (it requires going to developer.paypal.com, which is a bit weird IMO, especially for live credentials), but that's the same thing shown in this video: https://www.youtube.com/watch?v=jlnXFs7vxRs

[shorrocks]

Adding Nate

Sara

From: Mike Nelson [mailto:notifications@github.com] Sent: Thursday, June 14, 2018 4:39 PM To: eventespresso/event-espresso-core event-espresso-core@noreply.github.com Cc: Horrocks, Sara shorrocks@paypal.com; Manual manual@noreply.github.com Subject: Re: [eventespresso/event-espresso-core] Add Support for PayPal Express Smart Payment Buttons (#313)

FYI I created a video showing how to setup a paypal REST API app: https://drive.google.com/file/d/1QW5btK7UP8FU4JehgENkzApA-TZkANuI/view (it requires going to developer.paypal.com, which is a bit weird IMO, especially for live credentials), but that's the same thing shown in this video: https://www.youtube.com/watch?v=jlnXFs7vxRs

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/eventespresso/event-espresso-core/issues/313#issuecomment-397446773, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AkuPZd9NxhC4UXVWcT1zVtdtI-wYlYIDks5t8tf1gaJpZM4TaaSh.

[ppnsanders]

@mnelson4, I understand that it might seem a little different, having to go to the developer site to generate the app. There is an alternative, but it requires using third party permissions via Integrated Sign-Up (ISU). This is an additional integration step and would change your first party Onboarding you have today.

Would you like to discuss this further? Or keep the requirement that the merchant goes to developer.paypal.com to get the app credentials?

-Nate

[mnelson4]

Thanks @ppnsanders. The initial version of our integration probably won't feature ISU, but it would be nice to know what our options are. I tried searching online for documentation about it but couldn't find any. Could you please point me to the documentation?

Also, for PayPal Express and PayPal Pro we needed to provide a "BUTTONSOURCE" argument in order to show payments were generated using our integration. How should I provide that information from checkout.js and the REST API? (FYI here is our javascript code: https://github.com/eventespresso/eea-paypal-smart-buttons/blob/FET/begin/scripts/ee_pp_smart_buttons.js, as you can see onAuthorize just stuffs the payment ID and order ID etc into some form inputs, which get submitted server-side, which eventually gets handled by https://github.com/eventespresso/eea-paypal-smart-buttons/blob/FET/begin/core/services/PayPalRestApiClient.php where we send a REST API request to execute the payment. I'm not sure where to insert the equivalent of "button source", or how exactly to inser it.)

[ppnsanders]

@mnelson4, Here are the links to documentation for Integrated Sign-Up (referred to as "Connected Path") in the documentation.

Overview Document: https://developer.paypal.com/docs/marketplaces/connected/

API Docs: https://developer.paypal.com/docs/api/partner-referrals/

Interactive Walk-Through: https://www.paypal.com/apex/product-profile/connected/getAccessToken

Sample Code (NodeJS): https://github.com/ppnsanders/pp-mp-examples/tree/master/pp-mp-connected-path

With the REST API to provide the BUTTONSOURCE, you'll do that through the Header param PayPal-Partner-Attribution-Id. You can see those docs on developer.paypal.com as well.

Please let me know if you have further questions! My apologies for the delay, I've been traveling and am just now getting caught up.

-Nate

[mnelson4]

thanks @ppnsanders for the links. Is it ok if we only provide the PayPal-Partner-Attribution-Id during the server-side execute request? or does the client-side javascript need to set that instead?

[ppnsanders]

@mnelson4, my apologies for not getting back to you on the PayPal-Partner-Attribution-Id question.

If you're doing the client-side JS to create the payment, you'll want to pass that Attribution-Id in the client-side, but if the client-side JS is calling your server first, then your server only needs to pass it.

For context, we have monitors that track conversion on the integrations, so seeing the difference from the /create call to the /execute call helps give us insight into the funnel of consumers who click the button and those that complete the full checkout. Being able to look at this data by Partner is helpful to ensure that we can see data relating to your specific conversion rates.

I hope this helps. My apologies for missing this earlier. I need to change my email address on my public github profile so these notifications don't go to my personal email.

-Nate

[mnelson4]

No worries, thanks @ppnsanders. Yes, we're creating the payment client-side, but then executing it server-side. (I thought executing it server-side was important to verify the payment actually occurred, because it's possible someone could hack the client-side code to simulate a valid payment happening and then tell our server the payment was successful when it actually never happened). So now we're sending the PayPal-Partner-Attribution-Id also from our client-side requests, and even our server-side authorization requests (see https://github.com/eventespresso/eea-paypal-smart-buttons/pull/10)

[ppnsanders]

Excellent! Thank you @mnelson4!