This post is a tag alone for my post in Draftbit community. If you happen to use Xano + Draftbit, you might find it helpful. I am going to talk about the Xano side here and for Draftbit, please check out the link.
This is a tutorial on how to implement Sripe Mobile Elements for your app with minimal custom code. The result is the following:
iOS
Android
The Why:
I found posts how to implement Stripe Links, but Links are not really for mobile apps . So, I wanted to implement a native checkout look and feel that all of us are used to. Luckily, Stripe Mobile Payment Element is just that.
The How – High-Level:
My goal was to minimize custom code, so I leveraged built-in Draftbit functionality whenever possible + Xano as my backend. High level, the flow executes as follows and I will go in detail for each step below.
1) On screen focus:
a. Get Stripe publishable key via API call to Xano
b. Initialize Stripe using custom function
c. Create payment Intent using API call to Stripe via Xano
d. Initialize Payment Sheet using custom function and client secret you get in the previous step response
2) On Pay button press
a. Open payment sheet using custom function.
Important:
The flow above works for both Android and for iOS, but it is kind of annoying, because once you created a payment intent and before a user clicked “Pay”, you need to keep track of user actions. For example, if a user changed the cart and the payment amount changed, you’ll need to update payment intent. For simplicity, I won’t go into those details here, but here are the Stripe docs on the subject.
If you care about iOS only, you can simplify the flow above, like this:
1) On screen focus:
a. Get Stripe publishable key via API call to Xano
b. Initialize Stripe using custom function
2) On Pay button press
a. Create payment Intent using API call to Stripe via Xano
b. Initialize Payment Sheet using custom function and client secret you get in the previous step response
c. Open payment sheet using custom function.
This way you create payment intent AND present payment sheet only when Pay button is clicked. User can still back out or cancel payment and then change cart etc, and the once they click Pay again, new payment intent is created etc. In other words, you don’t have to worry about tracking and updating existing payment intent.
Note, that Stripe asks you to only create one payment intent per session and then update is as needed, so this is not Stripe like… but if you want to push the MVP out of the door, it works. And you can clean up later.
The How – Details:
Stripe:
- Register and find your API keys under Developer => API keys
Xano:
- Go to Settings and save your Publishable Key and Secret Key as Environment Variables. Click Manage button to do so.
- Create an API group and two APIs in it (as a reminder we are ignoring other APIs you can use to manage the lifecycle of payment intents)
o /get-publishable-key
§ With this one you just return the publishable key you just saved as an Environment variable.
o /create-payment-intent
§ To create this one, use curl command from Stripe docs here. To do so, in Xano add External APi Request => import curl => paste curl command from Stripe you just copied.
§ You will need to make two changes: instead of a placeholder amount, specify an “amount” as an input of your function stack; instead of hard-coded api key, specify you secret key that you saved as an Env variable.
§ Note: Stripe deals in cents, so $10 is represented as 1000. So, you’ll need to handle is somewhere, for example like I did by multiplying amount by 100.
§ As you make this call to Stripe, it will return a whole payment intent object with a bunch of stuff we don’t need at this point, so for our purposes your Xano endpoint can just return clientSecret.
Draftbit - please check out the rest of the details in the Draftbit community.