FR: Displaying both Credit Card and Web Payments button on same 'page'

[robzor]

Hi guys, thanks for the plugin. I was wondering how you can display both a (Stripe) credit card field and the google/apple pay button on the same screen.

Currently, if I try this I get either A) on my local dev environment: A console warning that Stripe.JS is loaded twice or B) on staging: The credit card fields don't seem to load properly:

Ideally it would be something like this:

Do you have any thoughts on how this is possible?

Thanks!

[alexjcollins]

Hi @robzor

Interesting question and, admittedly, not something we've tried. Typically we stick the Web Payments button on the cart or at the very start of the checkout since they're mainly used to speed up the purchase.

It may be that we need to adapt the template tag to support this sort of scenario.

Something to think about (because I'm not sure what the site is selling); if you're asking the customer to add billing + shipping addresses and make a shipping selection, if they checkout with Apple or Google Pay, whatever they select at that stage would overwrite whatever has been entered so far in the checkout.

[robzor]

Hi @alexjcollins thanks for getting back to me so quickly.

It's quite a complicated site where we sell trees/hedges/etc and the billing and shipping stuff is pretty involved.

Our goal with your plugin is just to add an 'extra' payment option rather than replace the checkout entirely.

I'm thinking in the short term that we add an extra step to the Payment step where you choose G/APay or Credit Card or PayPal and that would fix the JS issue.

Are you saying that Web Payments will edit/overwrite the Order Shipping and Billing Address objects with the information from Apple/Google? Is there a way to disable that?

[robzor]

Just to update the original ticket, the issue with the credit card fields not rendering on staging seems to be unrelated, I'm not sure how but the account had the Dummy gateway selected.

[alexjcollins]

Are you saying that Web Payments will edit/overwrite the Order Shipping and Billing Address objects with the information from Apple/Google? Is there a way to disable that?

Correct. The feature is designed as a 'quick checkout' type feature, so the customer details, including addresses, will be overwritten with whatever the user selects in the web payment dialogue. If you don't set requestShipping, then if a shipping address is already set on the cart, it should be preserved.

There's no way to disable that functionality currently, as it's fundamental to how the plugin works. We would need to discuss the pros and cons of making this change and the work involved.

My suggestion, in the short-term at leat, would be to move the cart-based web payments button to earlier in the checkout, once you've collected information you aren't able to collect in the web payments process, such as discount codes.

[robzor]

Unfortunately, I don't think it's going to work on this particular site as they have quite an involved checkout flow but I will definitely be using this in future on a simpler site! Thanks!