Mobile Apps Native Checkout

tomforddev
Visitor
2 0 2

Hi All,

 

We're trying to implement a fully native checkout experience in our mobile apps, including payment using Stripe. We've tried before, and failed, and had to fall back to showing the Shopify web checkout instead - not a great user experience within a mobile app, I must say. 

 

I've recently read about Custom Apps - which seemingly give you all the permissions/access of a Public App, but for a single merchant - this is perfect for our use case. 

 

I have a plan below - can anyone confirm if this is the correct way to address this scenario, and particularly, shine some light on how we achieve this using Stripe as the payment processor?

 

 

Custom Apps

However - there is something called a Custom App. This does not require review by Shopify. This can still access payment processing. Ref here.

 

"Introducing custom apps

So far, we’ve walked you through changes to public apps built for a general audience. But our app platform also supports app development intended for a single merchant store.

 

Before today, this was facilitated only by private apps that consisted of an API key created by a merchant and shared with a developer. Private apps are missing some of the functionality of public apps, and are not very visible—accessible only from a link at the bottom of the apps section of the Shopify merchant admin.

 

When we started reviewing how unpublished apps were used, we noticed that many developers were building apps for a single store, to make use of features that private apps didn’t include, like extensions and being embedded in the Shopify Admin.

 

To address this, we’ve created custom apps.

 

Custom apps have all the functionality of a public app and can be created by developers in the Shopify Partner Dashboard, then shared with a single merchant. Once a custom app is installed, it will be visible to the merchant from the apps section of their Shopify Admin.

Like private apps, custom apps aren’t required to go through a Shopify review, as they rely on a trusted relationship between an individual merchant and a developer."

 

So - could we build a Custom App, which has access to payment processing like a public app? That seems to be what is being suggested.

 

Investigation Plan

  1. Create and install a custom app with Storefront permissions only and the relevant scopes needed for the mobile apps

  2. Pass the API keys into a test version of our mobile apps

  3. Test if existing Storefront API calls still work via the Buy SDKs

  4. Add Stripe SDK to the mobile app - ref here.

  5. Add Stripe functionality to our backend to generate a Payment Intent - ref here.

  6. Add Stripe Payment Details Capture UI to the mobile app when user clicks pay - ref here. We need to get the payment intent from the backend by passing the following:

    1. Stripe customer ref if available, or create a new one

    2. Amount

    3. Currency

  7. Pay in Stripe UI??

  8. Listen for success on backend and notify mobile app of success or failure - ref here.

 

Missing Pieces of the Puzzle

As referenced here, we should be able to use the Shopify Storefront API (via the Buy SDK) to process a payment with the checkoutCompleteWithTokenizedPaymentV3 method.

 

However, I am not sure at which point we call this method. Do we 'pay' in the Stripe UI somewhere? Does the Stripe UI take the customers payment details, and then provide us (via our backend) with the token which we can then use with the above method?

 

This is where i think we hit problems last time - we simply could not get a response from the method above with a Stripe token, and all checkouts were going into Abandoned state. However, last time we were not using a Custom App, rather a private app.

 

Any help would be appreciated - and Shopify team - this is an extremely common scenario and an extremely common question on your forums. It's time that you made this easier, simpler and clearer for developers to achieve. No one wants to open a web based checkout to accept payment in a mobile app - its a terrible user experience!

Replies 3 (3)

LiamDC
Shopify Partner
1 0 0

Did you end up finding a solution to this? In a similar position and struggling to find the answer!

magecomp
Shopify Partner
264 20 32

Hello @tomforddev 

To overcome from the challenge of checkout in the mobile app, we used webview checkout in our mobile app solution. 

But we kept the user experience seamless customers don't feel its webview.

https://apps.shopify.com/mobile-app-builder-by-magecomp?

Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website

Mowico
Shopify Partner
6 0 1

Hi there!

 

As Mowico native mobile app builder, we are offering web view checkout, which allows your customers to have the same experience and view as your website. Simply put, your payment gateway will be the same on your mobile app as well. Here is our website that you can see all of our features. https://mowico.com/

We are offering 14 days free trial(no credit card required); mowico.com/start-free-trial 

Let's get you started with Mowico! Please contact me if you have any questions.