Onboarding Stripe Connect users in your iOS project(Swift + Firebase + Node.js)
For this short demo, I am assuming you have initialized/implemented Stripe, and Firebase Cloud Functions in your project. If you are having trouble, I’ll attach some resources at the bottom!
The Stripe SDK/API is one of the most highly regarded and developer-centric tools out there. There is a ⛵️ load of resources and documentation on Stripe.com(and the rest of the internet) to try and help you navigate their massive array of services. However, I found that for the beginner iOS Developer, it could be a lot to take in. One area that is hard to figure out is onboarding custom Stripe Connect users with the Stripe onboarding webform. If you are unfamiliar with the onboarding web form Stripe describes it as:
“a web form hosted by Stripe that takes care of collecting identity verification information from users”
It essentially makes it super easy for developers to get up and running with Stripe Connect without having to worry about the legal/regulation overhead. For more information you can look at the Stripe docs on it here.
To implement it for iOS, I found that there are really two options:
- You have to have a website that your user is told to visit to complete the onboarding with Stripe before they can utilize the app(or at least get paid). This is obviously not ideal, however for some people it might work best.
- After the user creates an account on your app you immediately prompt them to go through Stripe’s onboarding flow and once they accept you send them into the WKWebView. However for this you will need two success and failure links that will prompt your user to go back to the app or try onboarding again.
Let’s discuss the second option…
Steps
- Sign up a Firebase Auth account and corresponding Firestore Document.
- Create Stripe Account(returns Stripe Account ID)
- Request a Stripe Account Link. This is the URL for your user's onboarding.
- Send new users into WKWebView to complete the onboarding webform and tells them to come back to the app after.
- Verify your user's capabilities and send them to the onboarding flow in the future if needed(This is the beauty of the Stripe onboarding flow…they keep up with that stuff!) I will discuss this in a separate article but if you want more information check out Stripe’s info here.
Sign Up Page
We will start by creating a signup page and taking some basic information on our users. On click of the “Create Account” button we will validate the user input, and then create a Firebase auth user. On success, we store a corresponding Firestore document for additional user information.
Cloud Functions
Now that we have an app, we can start actually creating Stripe accounts and account links in the cloud. In your index.js file, you should initialize the Stripe library with your secret key(Use your test key until your ready to test for production! It should start with “sk_test”).
const stripe = require(‘stripe’)(“<TEST_SK>”);exports.createConnectAccount = functions.https.onRequest((req, res) => {
var data = req.body
var email = data.email
var response = {} stripe.accounts.create(
{
type: 'custom',
country: 'US',
requested_capabilities: [
'transfers',
],
business_type: 'individual',
},
function(err, account) {
if (err) {
console.log("Couldn't create stripe account: " + err)
return res.send(err)
} console.log("ACCOUNT: " + account.id)
response.body = {success: account.id}
return res.send(response)
}
);
});
Once we have Stripe setup we can start making calls to the Stripe API. The First cloud function we are going to include will create a Stripe account for our user. At some point you should save that Stripe account id to the user’s Firestore document so that you can pull their specific Stripe data later. Also, you have to go to your Connect settings page to customize the visual appearance of the form(you can provide the name, color, and icon of your brand). You must provide this information for Connect Onboarding or you’ll get an error from the Stripe API. For more information on creating a connect user and the different capabilities, check out the connect accounts API here.
exports.createStripeAccountLink = functions.https.onRequest((req, res) => {
var data = req.body
var accountID = data.accountID var response = {} stripe.accountLinks.create({
account: accountID,
failure_url: 'https://example.com/failure',
success_url: 'https://example.com/success',
type: 'custom_account_verification',
collect: 'eventually_due',
}, function(err, accountLink) {
if (err) {
console.log(err)
response.body = {failure: err}
return res.send(response)
} console.log(accountLink.url)
response.body = {success: accountLink.url}
return res.send(response)
});
});
After receiving the account id, we can get an account link from Stripe. This takes success and failure URL parameters for the completion of the flow. Once your user is done Stripe will redirect them to one of those pages. For more information on Stripe.accountLinks check out the API docs here.
Stripe View Controller
Now all we have to do is call those cloud functions and handle the responses. Here is an example of how I did this. Notice I have separated all of my code that deals with cloud functions to one class.
If everything is set up properly your signup should look something like this!
I hope this helps. I am still learning too so any suggestions are welcome! Also here are some links on setting up Stripe and Firebase.
