Validating checkout fields. with Apple Pay and Google Pay

Hi @abusa5,

This is how the plugin is designed. Wallet based payment methods like Apple Pay and GPay can provide all of the customer’s billing and shipping info, therefore it’s not necessary to require that info upfront.

If your customer fills out all of the required address fields, then Apple Pay and GPay won’t request that info. But if the customer’s address info is incomplete, Apple Pay and GPay will request that info in the wallet.

This allows the customer to use address info already saved in their wallet, rather then manually enter it on your checkout page.

Kind Regards

Thank you

I need this customization. because it is necessary for me.
Can it be done through snippet filters?
or by editing the plugin files themselves?
If I manage to find a developer who can do it, what are the instructions for that?

Best regards

I need this customization. because it is necessary for me.

Can you explain why you wouldn’t want your customers to take advantage of the fact that Apple Pay can populate all of the checkout page fields automatically?

You would need to modify the woo-stripe-payment/assets/js/frontend/applepay-checkout.js file and minified file with something like the following:

ApplePay.prototype.start = function (e) {
        if ($(e.target).is('.banner-checkout')) {
            this.set_payment_method(this.gateway_id);
            this.set_use_new_option(true);
            $('[name="terms"]').prop('checked', true);
           wc_stripe.ApplePay.prototype.start.apply(this, arguments);
        } else{
            if (this.checkout_fields_valid()) {
                 wc_stripe.ApplePay.prototype.start.apply(this, arguments);
            }
        }
    }

Hello

No, nothing of this

The issue is that the window pops up, then a fingerprint is applied, and then nothing!

The user tries again and later discovers, after two or three attempts, that the reason is that there are required fields. These fields may sometimes be shipping details, and not his billing details.

This makes him think that there is some technical error preventing him from buying, and he leaves.

The correct thing to do is to be notified first that there are required empty fields
If the requirement is met
Allows the window to pop up
To be fingerprinted The operation succeeds the first time

I hope this will be taken into account in coming updates.

This applies to Google Pay as well

Note: I added the code and did not notice a difference, perhaps because the idea was not completely clear to you.

Thank you

• This reply was modified 1 year, 1 month ago by abusa5.

This makes him think that there is some technical error preventing him from buying, and he leaves.

WooCommerce controls all checkout field validations via the class-wc-checkout.php file which you can verify. When there is a validation error, a notice is shown on the checkout page. It sounds like notices aren’t showing on your checkout page and that’s the issue. Our plugin doesn’t control the display of notices, that’s managed by WooCommerce.

Note: I added the code and did not notice a difference, perhaps because the idea was not completely clear to you.

It’s clear. You likely you didn’t update the minified file, which is actually the one that loads on your checkout page.

What is your website url?

Kind Regards

Hello

I did not want to bother you with too many details of my issue

While we are trying to solve it here with Apple Pay, it also applies to Google Pay.

Also, the latest update canceled the code

So if you believe in its effectiveness, I suggest considering adding this improvement to future versions

Appreciation

Hi,

Also, the latest update canceled the code

Yes, directly editing plugin files means your changes are not upgrade safe.

So if you believe in its effectiveness, I suggest considering adding this improvement to future versions

Yes we will take a look. It would be helpful if you could provide an explanation of why you don’t want to use the auto-populate feature that Apple Pay and GPay provide.

Kind Regards

Hi

The issue is not related to auto-populate or not

No

The issue is about the failure of the first payment attempt always

The popup window means readiness for immediate payment, but when you start, it fails

When you look for the reason, you find that the plugin does not check the fields in advance


But what if you move to another payment option, you will find obstacles, mandatory fields, you did not enter shipping details, did not agree to terms and conditions… etc.

Check the mandatory fields on the checkout page first, then allow starting payment secondly

Finally, be informed that I use your plugin because it is the only one that allows Apple Pay and Google Pay options within the payment methods box on the checkout page here

https://storepro.io/wp-content/uploads/2019/08/authorize-net-woocommerce.png

I do not allow the use of Google Pay or Apple Pay on the product and cart page because I need the customer to fill out the checkout page first

I hope the idea is clear

best

@mrclayton

Can you explain why you wouldn’t want your customers to take advantage of the fact that Apple Pay can populate all of the checkout page fields automatically?

I have a similar position to the OP, in regards to concerns around the shipping address. An address, either billing or shipping, is needed before checkout to properly calculate the shipping costs for our orders. It’s possible that some orders from our store could be split into multiple shipments; this all depends on the products and destination.

Also, in the event that an order needs to be shipped to a different location other than the one registered to the Google or Apple pay account is a problem if the customer clicks either payment button before including these details.

Obviously the convenience is a huge plus, but without being able to verify the accuracy of shipping prior to checkout this is a huge logistical problem for single page checkout pages for businesses like ours.

If there’s some way the plugin can handle such cases or a specific configuration, please let me know. Otherwise, the only other solution I can think of is possibly using jQuery to hide those checkout options until an address has been provided.

Obviously the convenience is a huge plus, but without being able to verify the accuracy of shipping prior to checkout this is a huge logistical problem for single page checkout pages for businesses like ours.

I think it’s worth detailing how the plugin handles address and shipping method data when using Apple Pay and GPay.

If the checkout page already has billing or shipping address data entered, the Apple Pay and GPay wallet will not request that information. It’s only if the customer’s address data is incomplete that the wallet will show the shipping address and shipping methods. You can test this by filling out all the address data, then clicking the Apple Pay button.

I am not sure what you mean regarding verifying the accuracy of shipping prior to checkout. If the shipping address selected by the customer in their wallet is not valid, they will see a notice that your store doesn’t ship to that location. When a shipping address is selected in Apple Pay or GPay, an event is emitted that the plugin uses to communicate that info to WooCommerce. A validation of the address then takes place using your store’s shipping settings.

the only other solution I can think of is possibly using jQuery to hide those checkout options until an address has been provided.

I would recommend removing the express payment buttons based on what you’re describing. If you have Apple Pay and GPay enabled in the payment method section, your customers are most likely going to enter all their address data first, since the payment method section comes last on the checkout page. And, per the explanation above, the wallets won’t request the shipping address or shipping method info if that is already populated on the checkout page.

Thanks much, I really appreciate the detailed explanation. I’ll need to think about it a bit more. I really just want to utilize G and Apple Pay as an alternative so customers do not need to enter a credit card, especially since both have pretty wide adoption.

I have address autofill set up with the Google Maps API, so customers just need to enter a street address and everything is filled in for them. It’s not much of an inconvenience.

Is there a config setting or filter to move these buttons to display before the stripe credit card instead? Apologies if this is a bit off topic and deviating from the primary thread discussion.

Hi, in my e-shop the agreement/disagreement with the terms and conditions is ignored when using Google Pay. By law, the trader must have the customer’s consent to the terms and conditions, otherwise the concluded trade is invalid by law. Each merchant has its own terms and conditions. So for me it is absolutely necessary that the agreement to the terms and conditions is validated before the Google Pay payment is enabled. And if there is no consent, the transaction cannot be concluded, therefore the payment cannot be made.
Does your plugin allow this or not?

Problem number two:
we do not deliver to an address, for transport we use a courier service that delivers to their own delivery boxes. Therefore, before making the payment, it is absolutely necessary to check whether any delivery box has been selected, where the goods are to be delivered. Unfortunately, the plugin ignores this and allows payment even if the customer has not specified where he wants the goods delivered.
Does your plugin allow this feature or not?

Thanks

And if there is no consent, the transaction cannot be concluded, therefore the payment cannot be made.
Does your plugin allow this or not?

This is a common misunderstanding because people think the Stripe plugin handles all validations, which is not correct. WooCommerce is coded to validate all required fields on your checkout page. No payment transaction is processed unless WooCommerce confirms that all required fields have a valid value. The GPay or Apple Pay wallet opening is not the same thing as a payment being processed.

You can confirm this by reviewing the WooCommerce code in class-wc-checkout.php. The payment gateway cannot process the payment for the order until WooCommerce tells it to, which takes place after checkout fields validation.

Unfortunately, the plugin ignores this and allows payment even if the customer has not specified where he wants the goods delivered.
Does your plugin allow this feature or not?

It’s important to define certain things to make sure we’re on the same page. When you say “allows payment” do you actually mean the payment is processed and the customer is redirected to the order received page? Or do you just mean the Apple Pay/GPay wallet opens?

Per the explanation above, if your delivery box is truly a required field and setup correctly, WooCommerce will include that field as part of it’s validation during the order creation process. Only when all fields are validated will the payment gateway be called to process the payment.

Kind Regards

Hello,

I just came across that topic and I have quite different experiences with the behaviour of the express checkout and the google pay payment option:

In WC Blocks Checkout the Checkboxes of the form which need to be validated seem to be ignored completely when using the Express Checkout on the cart page (Google pay) and the Google Pay method won’t show in the payment options.

In the “standard checkout” the express checkout button automatically checks the TOS and then just fails on a second required checkbox.
The “normal” checkout via google pay just waits for all required checkboxes like it should be.

I understand, that “automatically” checking the TOS reduces friction but in European countries that’s definitely not the way to do it.

Hi @axos1192

In WC Blocks Checkout the Checkboxes of the form which need to be validated seem to be ignored completely when using the Express Checkout on the cart page (Google pay) and the Google Pay method won’t show in the payment options.

That’s because the WC Checkout Block is react based and the WooCommerce code is much more opinionated and there are limitations to what can be customized. The checkout block doesn’t support the ability to have the same payment method as an express checkout option and in the payment method section. If that’s a requirement, I would recommend using the checkout shortcode.

checks the TOS and then just fails on a second required checkbox.

That’s because the TOS is a standard WooCommerce field that the plugin can reliably checked for. The plugin doesn’t know about your customer checkbox fields if they aren’t part of WooCommerce core. Unless you’re using the WooCommerce provided checkout fields filter.

but in European countries that’s definitely not the way to do it.

If you have some documentation that highlights that as an issue we’re always interested in improving compliance.

Kind Regards