Implementing “Stripe Checkout” JavaScript SDK into a React Native mobile app 💳🙌🏾
A while back I implemented the “Stripe Checkout” JavaScript SDK into a React Native mobile app I was working on.
Stripe is a payment processing service/API that I used to drive the paid subscriptions for doctor appointment booking app. Stripe itself is such a joy to use; great documentation, clean APIs and SDKs.
I first started trying to use the Stripe React Native SDK, but I found a simpler option that would save me time.
I found I could implement Stripe’s pre-built checkout web page directly into the mobile app by doing the following:
1. Create a new screen that loads after a new doctor signup with a web view with raw HTML/CSS/JS that renders a web page
2. In the web view’s web page code, create and show a loading bar with HTML CSS (I used the Bulma CSS framework to help)
3. Also, in the web view’s web page, load the Stripe JavaScript SDK, and call the Stripe “redirectToCheckout” function with success and failure callbacks
4. This function will load the pre-built payment form web page where a user can enter their payment info
5. Once finished the success callback I setup earlier is called to return to the app previous page
The solution works great! It isn’t as smooth as a fully native experience but that’s a trade off I’m willing to take.
⁉️ Have you ever developed a payment form? What services did you use and how did you keep it secure?
Stripe is a payment processing service/API that I used to drive the paid subscriptions for doctor appointment booking app. Stripe itself is such a joy to use; great documentation, clean APIs and SDKs.
I first started trying to use the Stripe React Native SDK, but I found a simpler option that would save me time.
I found I could implement Stripe’s pre-built checkout web page directly into the mobile app by doing the following:
1. Create a new screen that loads after a new doctor signup with a web view with raw HTML/CSS/JS that renders a web page
2. In the web view’s web page code, create and show a loading bar with HTML CSS (I used the Bulma CSS framework to help)
3. Also, in the web view’s web page, load the Stripe JavaScript SDK, and call the Stripe “redirectToCheckout” function with success and failure callbacks
4. This function will load the pre-built payment form web page where a user can enter their payment info
5. Once finished the success callback I setup earlier is called to return to the app previous page
The solution works great! It isn’t as smooth as a fully native experience but that’s a trade off I’m willing to take.
⁉️ Have you ever developed a payment form? What services did you use and how did you keep it secure?
