Closed PrinzJuliano closed 7 months ago
dmengelt
commented
7 months ago @PrinzJuliano thank you for reporting this:
could you give me some more context regarding the rejection?
PrinzJuliano
commented
7 months ago Right now, we are using IonicFramework Angular and Integrate the Google Pay buyflow using Stripe as a Gateway. The screenshot of the App (labeled Web Button on Android) got flagged as non compliant.
Using the Angular Library did not work due to issues with the extensive use of shadow dom. Thus we use the createButton JavaScript api with the API loaded from https://pay.google.com/gp/p/js/pay.js
The original response we got was:
Hi amicaldo GmbH,
We have an update on your recent Google Pay API integration submission.
Please revisit your integration and ensure that you are using our approved Google Pay Button. Web: https://developers.google.com/pay/api/web/guides/brand-guidelines#payment-buttons Android: https://developers.google.com/pay/api/android/guides/brand-guidelines#payment-buttons
All Google Pay payment buttons on your site must adhere to our brand guidelines, which include, but aren't limited to, the > following requirements:
- The size must be relative to other similar buttons or elements of the page. You can adjust the button size with the buttonSizeMode option of the createButton API.
- The button color must contrast with the background color of the area that surrounds it.
- The button must maintain the minimum amount of clear space on all sides of it.
We provide the CreateButton API that will automatically ensure that your Google Pay button adheres to our brand guidelines. Web: https://developers.google.com/pay/api/web/guides/resources/customize Android: https://developers.google.com/pay/api/android/guides/resources/update-to-new-payment-button
Please make or provide the appropriate updates, and re-submit your integration again through the Google Pay & Wallet Console. If the above marketing review feedback cannot be implemented because you are using a dedicated Plugin or provided hosted checkout solution from your Payment Service Provider, please reach out to us by responding to this email.
Thank you for submitting your integration through the Google Pay & Wallet Console. It’s been a pleasure working with you.
This highly confused us.
We wrote to the support with the reply:
Thanks for your update,
I am not sure how to proceed.
The brand guidelines clearly show border around the buttons, but none of the written guidelines mention borders, only clear space around the button (which we satisfy).
Additionally, all material provided on the usage of the Google Pay button API does not include any border as well. (The Button appears to be plain black and inspecting the HTML, the Button has a 0px width black border, as does our integration)
For example: https://developers.google.com/pay/api/web/guides/resources/demos
I have used the Google Pay Button API to ensure the integration complies with all brand guidelines. I do not modify any of the styles beyond the settings provided by the API.
Could you provide the links to the documentation on the Google Pay Button API where I can set borders?
Or am I completely mistaken by your suggestion and I should change something else?
I am looking forward to your reply.
Which we got the reply:
Hi,
Thanks for update.
Please refer to the attached screenshot and update the Google Pay button as per our brand guidelines boarder should be present around the button.
Best, Dharani
The Google Pay API Support Team
This confused us even more, as we were using the createButton api
But further communication only hinged on the border missing.
Since non of the documentation or provided source code includes guidelines on the border:
dmengelt
commented
7 months ago thanks @PrinzJuliano for sharing the details.
your integration is now approved.
PrinzJuliano
commented
7 months ago Thanks for your help.
Describe the bug A clear and concise description of what the bug is.
Currently, there is a major discrepancy between the Brand Guidelines for Web and Android, the official Demo Page, and this library. The Brand Guidelines for Web do feature buttons without a border. The Brand Guidelines for Android (while not mentioning it) clearly show in some of the dark buttons a rgb(117, 117, 117) #757575 border. This library does not currently add this border.
Thus, following the Integration Checklist closely will yield a rejection from the Google Pay submission when using a Web to Native Framework like Ionic.
To Reproduce Steps to reproduce the behavior:
Expected behavior A clear and concise description of what you expected to happen. I expect both Guidelines to be the same, or at least give me options to enable the border when detecting android.
Screenshots If applicable, add screenshots to help explain your problem. Android Button:
Web Button:
Web Button on Android:
Component information:
@google-pay/button-react)@google-pay/button-element)@google-pay/button-angular)Environment:
Additional context Add any other context about the problem here. This is not a bug. Just different standards for Guidelines concerning the same UI Element.