Google Pay Button for Android CSS for hybrid apps

Question

I have a CapacitorJS hybrid application which integrates Google Pay. We were using the web Google Pay button seen here: https://developers.google.com/pay/api/web/guides/brand-guidelines#style but the one that says "Pay with Google Pay"

However, during our approval process for our Android app, the approver rejected the application because it doesn't use the correct button variant found here: https://developers.google.com/pay/api/android/guides/brand-guidelines#style

Note the more rounded corners on the Android version. Unfortunately, there doesn't seem to be any easy way to convert this into CSS since the Android assets only give the SVG Google Pay mark and other Android specific xml assets.

Are there any existing resources out there to create the Android google pay button in CSS or does it have to be "eyeballed"?

Answer 1

A simple solution i would provide is, the brand says for such asssets use google pay mark, the mark is provided by the brand which should only be used.

Link to full details:

https://developers.google.com/pay/api/web/guides/brand-guidelines

Link to download the assets: https://developers.google.com/static/pay/api/download-assets/Google-Pay-Acceptance.zip

Info by brand: Display "Google Pay" in text next to the mark if you do so for other brands. Don't change the color or weight of the mark's outline, or alter the mark in any way. Use only the mark provided by Google.

Do

Use only the Google Pay mark provided by Google. Use the Google Pay mark to indicate Google Pay as a payment option in payment flows.

Don't

Don't create your own mark or alter it in any way. Don't translate the word “Pay.” Don't display the Google Pay mark in a different or smaller size than the other payment options.