Express Checkout - JSv4

[angelleye]

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/upgrade-integration/

[angelleye]

We need to follow the guide above to upgrade our Express Checkout integration to their JSv4 integration using their checkout.js script.

Our API calls and everything should still work the same way, so this should just be a matter of updating how our buttons are displayed and how they trigger the API calls. This should not require an entire re-write of the integration.

[angelleye]

This may replace the need for the "In Context" functionality. This JSv4 integration happens on your site similar to In Context by default, so I believe we'll be able to get rid of the In Context stuff and replace it with JSv4.

[angelleye]

I believe we'll also be able to remove our option to add the PayPal Credit button because that gets tied into this JSv4 experience as well. so where we currently have both EC and PayPal Credit buttons displayed (depending on settings) we'll just have this one "smart button" now.

Still need to verify 100% but I believe this is the case...

[angelleye]

Or it might be that we still need to provide our options, and then that will help us dynamically build the JavaScript to generate the "smart buttons" on the site. I believe we'll have the ability to include PayPal EC, Credit, Venmo, Apple Pay, Android Pay, Credit Cards, all in a single button integration with options.

[angelleye]

Yeah, the Upgrade doc has links within it for "customize the button" and this shows how to present all the different options. So we'll still need our settings, I think, and then based on the user settings we'll build the JSv4 button accordingly.

Hopefully this will help with our general button alignment issues we've had in some themes. Now we'll just have a single button instead of trying to line up EC and Credit buttons side by side.

We will need to consider that if they enable lots of options there will be lots of buttons stacked on top of each other.

[angelleye]

Quick example from a PayPal rep:

One line of code -> 3 integrations! (see highlight part below) Available on REST, Classic and BT SDK (all platform)

paypal.Button.render({

       

        // Set your environment

        funding: {

        allowed: [ paypal.FUNDING.VENMO, paypal.FUNDING.CREDIT ]

},

 

        env: 'sandbox', // sandbox | production

 

        // Specify the style of the button

 

        style: {

            layout: 'vertical',// checkout | credit | pay | buynow | generic

            size:  'medium', // small | medium | large | responsive

            shape: 'rect',   // pill | rect

            color: 'blue'   // gold | blue | silver | black

        },

 

        // PayPal Client IDs - replace with your own

        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

 

        client: {

            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',

            production: '<insert production client id>'

        },

 

        // Wait for the PayPal button to be clicked

 

        payment: function(data, actions) {

            return actions.payment.create({

                payment: {

                    transactions: [

                        {

                            amount: { total: '0.01', currency: 'USD' }

                        }

                    ]

                }

            });

        },

 

        // Wait for the payment to be authorized by the customer

 

        onAuthorize: function(data, actions) {

            return actions.payment.execute().then(function() {

                window.alert('Payment Complete!');

            });

        }

   

    }, '#paypal-button-container');

Demo: https://developer.paypal.com/demo/checkout/#/pattern/responsive

[angelleye]

Need to update documentation to show that "In Context" is now called "Smart Buttons" and provide info on building your button display using the options in the Smart Buttons section of EC settings.

[kcppdevelopers]

@iMansoorAliKhan Could you please test this issue for me?

[iMansoorAliKhan]

@kcppdevelopers Sure, I'm just going to test it now. will give my feedback here.

[iMansoorAliKhan]

Please see my findings

1- Paypal credit ON OFF option gone?
2- Selected 2 option but still showing 4?
http://prntscr.com/iibuz1, http://prntscr.com/iibv96
3- In-context is taking too much time to load
4- Error : http://prntscr.com/iibx6p Clicked on AMEX button
5- When clicked those new smart buttons, they will force fire guest-checout along with Account optional override from settings??? any dependencies or notice for those???
6- Enabled cart button position at both top and bottom and it gave my site kind of heart attack, it stopped loading, console have some JavaScript parse error.�After around 3 minutes it load, not sure what happened but something might be wrong there, need to verify.

7- http://prntscr.com/iic46g
8- Button Layout
	a. Vertical : no sampple layout ????
	b. Horizontal: 
		i. No sample layout for button label : Credit
	c. Button Tag line
		i. Enabled shows text but the other creditcard buttons are gone, 
	d. Removed the only selected payment method and got this error http://prntscr.com/iic8te
	e. On backend : button lable change shows this
		i. http://prntscr.com/iicdon
	f. Selected Paypal Credit Option and then label text changing don’t work in backend. http://prntscr.com/iiceq9
	g. With following settings http://prntscr.com/iicgcm, no preview shows same happened on front-end
	http://prntscr.com/iicgqj, http://prntscr.com/iich1c

[angelleye]

@kcppdevelopers Okay, yeah, that's fine. So the basic logic would be something like...

If {fresh_install} or {in_context_enabled} then {enable smart buttons by default with standard options set}

Is that what you did in these recent commits?

[angelleye]

@kcppdevelopers Testing on latest updates, I added ELV and Credit to the "hide" option under smart buttons. It's correctly adding those to the disallowed section, and the result on the front end is as expected. However, it's still leaving those options under "allowed" too..??

"allowed_funding_methods":"[\"credit\",\"card\",\"elv\",\"venmo\"]","disallowed_funding_methods":"[\"credit\",\"elv\"]"

[angelleye]

Per discussion with @kcppdevelopers, Venmo returns an error that it cannot be disallowed when specifically added to the disallow parameter. As such, if Venmo is added to the "hide" option under smart button settings then we'll simply leave it out entirely...so it won't be added to allowed or disallowed.

The other options can be specifically added to allowed or disallowed based on whether or not they are hidden in settings.

[kcppdevelopers]

@angelleye I have applied changes as per discussion and push to dev branch.

[angelleye]

@kcppdevelopers This looks better, thanks. I will talk to PayPal about why Venmo doesn't show up even on their own demo.

[angelleye]

@kcppdevelopers In the Smart Button settings, if I have it set to Horizontal layout I get additional options like Button Label. Right now, though, if I hide PayPal Credit in the hide option, I can still set Button Label to Credit so it just shows a PayPal Credit button. This is confusing. We need to make sure the PayPal Credit option doesn't show up in the Label option if it has been added to the hide option already.

Also, I notice that you have "Paypal" in some of these settings/options. We need to make sure to always use "PayPal".

@iMansoorAliKhan says this was already fixed but now it's happening again..??

[angelleye]

@kcppdevelopers Also, PayPal Credit is showing up now regardless of the country set on the site..?? PayPal Credit is only available in the US and UK, so if the country is not set to one of those we need to remove PayPal Credit from the options entirely.

[iMansoorAliKhan]

@kcppdevelopers in Firefox smart button ( vertical ) is taking 2 clicks to open popup.
Screenshot:

[kcppdevelopers]

@iMansoorAliKhan I have checked smart button ( vertical ) it is working well in the single click. I have also checked in your website and for me it's working..

[angelleye]

@kcppdevelopers When viewing source on a cart page I see this:

var angelleye_in_content_param = {"payer_id":"paypal-facilitator_api1.angelleye.com","environment":"sandbox","locale":"","start_flow":"http:\/\/woo.angelleye.com\/cart\/?startcheckout=true","show_modal":"1","update_shipping_costs_nonce":"9536c47db8","ajaxurl":"http:\/\/woo.angelleye.com\/?wc-ajax=wc_angelleye_ppec_update_shipping_costs","generate_cart_nonce":"36f64e7c78","add_to_cart_ajaxurl":"http:\/\/woo.angelleye.com\/?wc-ajax=angelleye_ajax_generate_cart","is_product":"no","is_cart":"yes","is_checkout":"no","cart_button_possition":"bottom","button_size":"responsive","button_color":"gold","button_shape":"pill","button_label":"","button_tagline":"","button_layout":"vertical","button_fundingicons":"","cancel_page":"http:\/\/woo.angelleye.com\/cart\/","is_us_or_uk":"yes","allowed_funding_methods":"[\"credit\",\"card\",\"elv\",\"venmo\"]","disallowed_funding_methods":"[]","set_express_checkout":"http:\/\/woo.angelleye.com\/?wc-api=WC_Gateway_PayPal_Express_AngellEYE&pp_action=set_express_checkout"};

Notice that you're passing the API username into the payer_id parameter of the JSON string. the Payer ID is actually something else. Remember with Express Checkout we pass a token into GetExpressCheckoutDetails and that response gives us a PAYERID value like this: MV88D7MFLZSVE

I'm pretty sure that's what should go in the payer_id parameter for the Smart Button JS.

You actually have this included on the page(s) where the buttons are initially being displayed, but the Smart Button docs only talk about using it at the DoExpressCheckoutPayment step within the checkout flow, which makes sense because we don't get that value back until we've already made the call to SetExpressCheckout and the user has logged in and returned back to the site.

So I'm not sure why we're including payer_id at the very first step at all..?? Right now we can actually see the API username value in the source code of the page, which is not good.

[kcppdevelopers]

@angelleye Actually client/payer_id optional parameter and it's not required in our custom integration so I have remove completely. I have double checked and it's working fine.