Tips on Google Pay and Apple Pay with Stripe
This is all that I learned in the implementation with Payment Request Button, a feature of Stripe Elements.
This article is a collection of what I stumbled upon through my research so far. I will provide tips on how to test Google Pay and Apple Pay with Stripe using Payment Request Button, with what’s not written in the official docs.
About Stripe Elements
Stripe Elements are rich, prebuilt UI components that help you create your own checkout flows across desktop and mobile.
If you are interested in learning more about how to create the credit card payment, Stripe Elements is for you to get started. As soon as you open the page, you will find Card Element that provides a set of prebuilt UI components. These components will help you build a payment form without worrying about treating sensitive information. You can count on Stripe to securely handle all of it.
For hands-on development details, elements-examples would be one of the most helpful resources.
Just for your reference, there is a new feature called Stripe Payment Element which is in beta now at the time of this writing.
According to the doc, it says:
Stripe is working on an expanded suite of embeddable components to help you build custom payment forms on web and mobile, all aimed at increasing your checkout conversion. The Payment Element is the first of these new components, displaying multiple payment methods in a customized UI embedded into your checkout page.
Also, I recently joined their user feedback video call by requesting the beta access. They mentioned there are more features being developed and added into the component this year. If you are interested in learning what’s coming, you can sign up from here to request the beta access and ask questions with engineers via video call.
I heard they are working on Apple Pay so it will be available in the component soon. There is something more exciting going on in Stripe Payment Elements. I am sure this component is going to reduce a significant amount of development time and allow for faster development. 👏
And what we will look into further now is actually one of Stripe Elements features called Payment Request Button that lets users pay with Apple Pay and Google Pay. All details are elaborated on that page so my article is just to assist you with tips not written in docs.
Test with Cards
I am not 100% confident this information I found is true, but I am sharing this information because it is working as expected in my project. This is all based on my experiment with Payment Request Button.
The Flow of Payment
First of all, please read the numeric list below which describes how users actually interact with Payment Request Button in your checkout page.
1. Users land on your checkout page where the payment button is.2. Stripe will automatically show an appropriate Payment Method for users: It could be Apple Pay, Google Pay or other methods, depending on browsers or devices of users.3. The button is clicked by users.4. Payment sheet is presented over to the screen where users can click the Pay button.5. Stripe handles the payment6. Payment succeeds or fails.
In this way, users interact with your Payment Request Button.
Setup Test Cards
Before you develop and test those payment methods, make sure you set up your cards for testing purposes.
Importantly, in both production and development environments, Payment Request Button is invisible unless you save your cards appropriately. It is only visible when your browser detects your cards stored in wallets, which is done automatically by Payment Request Button.
Buttons
After the button is integrated into your app, users see one of these buttons depending on what their device and browser combination supports.
The difference between Pay Now and Google Pay is just simply explained as the difference between Chrome wallet or Google Pay wallet. I saw some people online mistook Google Pay for Pay Now because they are a part of Google services.
Payment Types
Also, Pay Now is one of those wallet payments, but technically no. It is because Stripe retrieves a credit card stored in the Chrome wallet and use that to make a payment. As you can see, the Payment Intent log in our Stripe test environment below confirms that it does not contain wallet information. Stripe just uses card information saved in Chrome wallet.
If you pay with Apple Pay or Google Pay, the wallet will either contains google_pay or apple_pay.
Below I will explain how to test Pay Now, Google Pay, and Apple Pay.
Pay Now and Google Pay
Real cards are not accepted to create a dummy purchase with Google Pay and Pay Now. Please be careful that Stripe will throw an error if you use a real card in a test environment and vice versa.
According to the official tutorial video, she mentioned that if you need to test a card for the integration, you need to set up your Stripe Test Card in Wallet before you start development. Having said that, it sounded unclear to me. I was not sure about what she meant by Wallet because there are two wallets – chrome or Google Pay.
Switching Test Environments
After some research, it dawned on me that those two payment methods can be tested differently:
- Adding a Stripe test card from
chrome://settings/paymentsfor Pay Now button - Joining User Group from Test Card Sweets for Google Pay button.
Through my own research and understanding, I discovered that the Pay Now button is only shown and available when more than one payment is registered in the payments of chrome settings and most importantly when there is no card stored in Google Pay and you are not in the group. This does the trick, but I should say, at least, I observed that it did the trick.
1. Pay Now
First go to chrome://settings/payments to add 4242 4242 4242 4242 in the card number box in the same way as Card Element if you have experience with it before. Other fields such as expiration, name and nickname can be anything random.
Registering a Stripe Test card starting with 4242 never gets approved in the payment wallet for Google Pay. It only works in the wallet of Chrome.
If you want to create a failure or authenticated patterns too, please refer to this page to test various types of scenarios.
And if you go to your checkout page, you should see the bluish or purplish button as shown below. My environment is Japanese so the text may be different from yours, but it means Pay Now. The arrow should be animated.
And if you hit down the button, the confirmation view will be popped over to you. Now you can test the Pay Now button👍
If you want to modify card or address information, you can do so in there or directly change them in Chrome settings.
2. Google Pay
Next, if you want to test with Google Pay, first please join User Group. As the doc says:
The new test card suite empowers Google Pay developers to run integration and API tests without the need to add a real credit card in their Google Account.
What you need to do is just “join the group”. At the bottom of the page from the link, you will find the clickable text saying the join.
After you join it, you will be redirected to the Google Pay API Test Cards Allow List page. There is no further action required after the successful enrollment.
You can access this demo page where you can check if Google Pay is enabled or not. However, even though it looks enabled in there, it might take some hours until Google Pay is available in your checkout after you join the group. If it does not seem to appear, just patiently wait a few hours and sometimes refresh the checkout page. It should appear in no time.
Also, it might probably be better to delete cards in the wallet of Chrome first before you join the user group if there are any.
For your reference, when I tested this my settings were as following:
- Country connected with my profile is set to America (any country should be okay but I have not confirmed which would not work)
- I registered no credit card both in Google Account Payments or Chrome Payments.
- Joined the User Group.
- It took around one hour until Google Pay became visible in my app.
According to this answer, since April 2021, Google Pay is shown when Google Pay is an option.
This means if you register cards in both wallets Google Pay is the default Button so that Google Pay should be prioritized over Pay Now. I have not tested this so if you want to know about this, please experiment this.
The click of Google Pay triggers the Google Pay form to be presented over to you. There is a list of test cards pre-registered so you can choose one of them to test your dummy purchase.
Now you can test Google Pay button👍
Apple Pay
On the other hand, unlike Google Pay or Pay Now, a real card in the wallet is required to make a test purchase with Apple Pay. Stripe detects which environment you are in so all transactions with real cards in development are never billed. An answer to a question in StackOverFlow said:
Apple won’t let you add a fake credit card to Passport and the iPhone. However, if you’re using Apple Pay and your test Stripe API keys, we’ll recognize the situation when the Apple Pay request is made and return a successful test card token. To test a payment in live mode, you’ll need to use a working credit card.
But in order to activate Apple Pay, as described here, you need some additional steps.
- download a well-known file and host it under directly under your domain. If your domain is https://domain.com, then you put that downloaded file under http://domain.com/apple-developer-merchantid-domain-association (the domain is dummy)
- Register your domain with Apple. You can do this in here.
Once all steps are completed, you are ready to test Apple Pay 👍
There is also a detailed tutorial video about Apple Pay integration released on YouTube. you can check in here:
From here I will explain commonalities between Pay Now, Google Pay, and Apple Pay. When you test those payment methods, card information is not the only thing that matters; shipping address and design to the payment button are also something that you want to take into consideration.
Other Tips
We have seen test cards above. Here are other tips that I struggled with during my research in implementing those payment methods
Shipping Address.
When you extract shipments from Apple Pay and Google Pay, I found out that the address format differs. The important point to notice here is that Google Pay does not offer line2 or building information. The address comes from one sentence so that if you implement that shipping part in the same way as you implement Apple Pay, it could invite an unwelcoming bug.
Stripe provides events to listen to changes/updates. You can use shippingaddresschange event, and then with the received shipping information, you can correctly parse it in your frontend or backend side.
Payment
When you create a purchase, you need to finish the payment within 30 seconds, or it fails. If you have encountered an error that payment goes successful in the server but the payment sheet keeps throwing a failure error, it is recommended to optimize the payment process. Incidentally, user experience.
Styling
The designs of those prebuilt payment methods are not fully flexible, but you are given some options to change color, width or height, and type. The type is the title of button. It offers a couple of options to select — donation, book, or buy.
If you want to create a customizable button, you can design your own button. In this case you need to follow Apple Pay’s Human Interface Guidelines and Google Pays’s Brand Guidelines.
Conclusion
I took a significant amount of time to understand how to test those payment methods via the Payment Request Element in a correct manner. It seems that people online were also struggling with how to test, especially around Google Pay and Pay Now. I hope this article contributes to the developer community and helps those who are going through the same situation.
If you found my article helpful and can be recommended to your friends, please clap to me! That makes me feel motivated to share my learning more. 🙌
