stripe/stripe-connect-rocketrides

Sample on-demand platform built on Stripe: Connect onboarding for pilots, iOS app for passengers to request rides.

Rocket Rides: Stripe Connect demo

Rocket Rides is a sample on-demand platform that offers passengers rides with pilots, built on top of Stripe Connect, Connect Express, and the Stripe iOS SDK.

You can try the web app live on rocketrides.io.

This repository contains two components:

• Web server in Node.js to onboard pilots on the web and get them paid
• iOS app in Swift for passengers to request and pay for rides

Web onboarding for pilots

Rocket Rides showcases how to sign up pilots and use Connect Express accounts to get them paid. Express provides onboarding, account management, an account dashboard, and identity verification for your platform, and we've customized Express with Rocket Rides branding.

This platform also uses the Stripe API to create payments for pilots, fetch their available and pending balance, and let them view transfers. It also creates Payouts for pilots who use a debit card as their payout account.

To integrate Stripe Connect in your own app, check out these two files in particular:

1. server/routes/pilots/stripe.js shows how to easily create Connect Express accounts and interact with the Stripe API.
2. server/routes/pilots/pilots.js shows how to create payments and transfer funds to recipient pilots.

Requirements

You'll need a Stripe account to manage pilot onboarding and payments:

• Sign up for free, then enable Connect by filling in your Connect settings.
• Fill in the necessary information in the Branding section in Connect settings.
• Under the Express account type, click Manage to choose from which countries users can sign up. Where possible, choose the capability to just receive Transfers.

You'll need to have Node.js >= 7.x and MongoDB installed to run this app.

Getting started

Install dependencies using npm (or yarn):

cd server
npm install

Copy the configuration file and add your own Stripe API keys and client ID:

cp config.default.js config.js

Make sure MongoDB is running. If you're using Homebrew on macOS:

brew services start mongodb

Run the app:

npm start

Go to http://localhost:3000 in your browser to start using the app.

iOS app for passengers

The Rocket Rides iOS app is written in Swift and is built using the Stripe iOS SDK to accept both card payments and Apple Pay.

Requirements

This project is written in Swift and requires Xcode 8 to build and run, and CocoaPods to install the dependencies. The app is compatible with iOS 10.0+. You can use it both the iOS Simulator or on your iPhone.

Getting started

To get started, install the dependencies using CocoaPods:

cd ios
pod install

Open RocketRides.xcworkspace (not RocketRides.xcodeproj) in Xcode. Build and run the app!

To try out the full payment experience, run the server locally as described above, then follow these steps:

1. Create a new pilot using the Rocket Rides web onboarding.
2. Fill in the publishableKey property in AppDelegate.swift. You can find your publishable key in your Stripe Dashboard.
3. Fill in the baseURLString property in AppDelegate.swift. This should be http://localhost:3000 if you haven't modified the server configuration.
4. pod deintegrate & pod update to update the dependancies.
5. Relaunch the app! Tapping on "Payment" and "Price" should now work.
6. Enter a destination, your payment option, and request a ride! You should see the payment in your Stripe Dashboard.

Credits

• Code: Romain Huet, Joey Dong, and Michael Glukhovsky
• Design: Wes Mitchell, Bill Labus, Melissa Cameron, and Priidu Zilmer
• Original logo: Focus Lab

stripe-connect-rocketrides's Issues

Emails Without “.Com” Create Account but Fail to Be Authorized

This is awfully minor, but forgetting to enter your entire email when creating an account here will result in a page with "bad request".

Fake emails like [email protected] still work for this demo, and axel.axel will be properly scolded. Anyone using the code here as a starting point should be aware of potential oversights.

Please add a react example

I'd like to put Connect on a react app but there's no example. The only example is for a swift app

Would it please be possible to add a usage example of a react stripe connect app?

Then it would be much easier to develop web platform marketplace type things...

Copy/paste error in sample code

In server/routes/pilots/stripe.js there is a sample:

// 'stripe_user[street_address]': req.user.address || undefined,
// 'stripe_user[city]': req.user.city || undefined,
// 'stripe_user[zip]': req.user.postalCode || undefined,
// 'stripe_user[state]': req.user.city || undefined,

The last line (49) copies "city" into "state". It should copy "state", not "city".

Nav bar back button overlaps on title

Hi, there is an issue in AddCardViewController. The navogation bar back button arrow overlaps on the "back" text (I have attached the screenshot). When I integrated stripe in my project I have got the same issue also in PaymentMethodsViewController(attached the screenshots). If there is a way to keep the navigation bar back button arrow and remove the "Back" text?

400 - Bad request | Setting up payments

Clicking on 'Setup payments' returns a 400 bad request.

all payments show up as "incomplete" on Stripe Dashboard

I setup this example as explained. The pilot setup worked perfectly on localhost.
The iOS version seems to work too. UI doesn't show anything wrong.

When I go into the Stripe dashboard, all the payments from iOS simulator show up as "incomplete".
On the pilot's side (web version), I see that the amounts that were supposed to be paid to him are reflected in the "This week" amount but not reflected in the "Balance" amount.

So, I believe the core of the issue is why it would show as incomplete when the setup was identical fashion as the setup instructions. Thank you!

Demo broken?

Clicking "Setup Payments"

Redirects to a page that looks like this

Feature Request: Crypto Payments

Thank you for the awesome project! I love this!

Recently I had a request to build a platform with both cash and crypto payment options. I was wondering if you could ask around Stripe and find out if that might be possible using your services.

Would you please be open minded to add some crypto payment options to the stripe connect service and this example?

I'm not a crypto zealot or anything, but just want to pass along the request I got because when somebody mentions "easy flexible payments" to me, I think Stripe !

The app is broken

Tried logging in
Internal server error

How to enable Payout button?

Hi, I tried to use the app but after reaching the dashboard, I cannot click on "Payout" button since the button is disabled. How can I enable it?

Syntax errors

I am having issues with syntax .
while running this demo app , it constanlty keeps on giving syntax errors and does not run at all.
This is the log :
router.get('/dashboard', pilotRequired, async (req, res) => {
^
SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/colworx/Downloads/stripe-connect-rocketrides-master/server/app.js:52:20)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3

Deployment to GCP

Can you run me through how I would go about deploying something like this to Google Cloud Platform? Or Netlify. Thank you for your help

In app onboarding

I'm using firebase Backend. is there a guide on how to:

deploy webapp to firebase
make IN APP on boarding (I think via uiwebview ? )

npm install and npm start issues

node and mongodb are installed successfully.
node version is:
% node --version
v16.13.0

for the npi install, I receive:
% npm install

npm WARN old lockfile

npm WARN old lockfile The package-lock.json file was created with an old version of npm,

npm WARN old lockfile so supplemental metadata must be fetched from the registry.

npm WARN old lockfile

npm WARN old lockfile This is a one-time fix-up, please be patient...

npm WARN old lockfile

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE package: '[email protected]',

npm WARN EBADENGINE required: { node: '10.x' },

npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.1.0' }

npm WARN EBADENGINE }

npm ERR! code ENOTEMPTY

npm ERR! syscall rename

npm ERR! path /Volumes/ELLIOTS/StripeRocketRides/server/node_modules/lodash

npm ERR! dest /Volumes/ELLIOTS/StripeRocketRides/server/node_modules/.lodash-rn22vo2p

npm ERR! errno -66

npm ERR! ENOTEMPTY: directory not empty, rename '/Volumes/ELLIOTS/StripeRocketRides/server/node_modules/lodash' -> '/Volumes/ELLIOTS/StripeRocketRides/server/node_modules/.lodash-rn22vo2p'

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/xxxxxxxxxx/.npm/_logs/2021-11-10T17_08_18_191Z-debug.log

And in the npm start I see:

[email protected] start

node app.js

node:internal/modules/cjs/loader:936

throw err;

^

Error: Cannot find module 'express'

Require stack:

• /Volumes/ELLIOTS/StripeRocketRides/server/app.js

  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)

  at Function.Module._load (node:internal/modules/cjs/loader:778:27)

  at Module.require (node:internal/modules/cjs/loader:1005:19)

  at require (node:internal/modules/cjs/helpers:102:18)

  at Object. (/Volumes/ELLIOTS/StripeRocketRides/server/app.js:4:17)

  at Module._compile (node:internal/modules/cjs/loader:1101:14)

  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

  at Module.load (node:internal/modules/cjs/loader:981:32)

  at Function.Module._load (node:internal/modules/cjs/loader:822:12)

  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {

  code: 'MODULE_NOT_FOUND',

  requireStack: [ '/Volumes/ELLIOTS/StripeRocketRides/server/app.js' ]

}

lol

how to get my money. i don't understand anything???

CSRF protection

In stripe.js , a 'state' random token is added to the session to protect against CSRF, but it does not seem to be used anywhere else in the app thereafter?

App is programmed in Swift 3

The app has been programmed in Swift 3 and the version of Xcode I am using(10.2) does not support version 3 of Swift or the migration from Swift 3 to 4 or further.

There is no way to run it with the latest Xcode.

Error adding token to customer: Cannot read property 'id' of null

I am unable to book a ride on a localhost server. following error is shown from the server for account without bank account linked:

Error adding token to customer: Cannot read property 'id' of null

I think this is corresponding log from stripe

{
  "error": {
    "code": "parameter_missing",
    "doc_url": "https://stripe.com/docs/error-codes/parameter-missing",
    "message": "Missing required param: destination[account].",
    "param": "destination[account]",
    "type": "invalid_request_error"
  }
}

Judging by the log file, it seems that it's not related to un verified rider.

ps. thanks a lot to the team & Romain for this helpful work to get us started.

Onboarding asks user for business information.

Hello.

It's clear that this demo could mimic existing apps like Lyft, Uber, DoorDash, etc. If that's the case, then the app itself acts as a medium to transfer funds from a user to another user who performed a service.

Why, then, does the onboarding ask a pilot to provide information about their business when pilots don't have a business - they're just providing a service through the app?

I'm building a service-based marketplace and I'm integrating Stripe, but I don't want to ask the users for their business information because they don't own businesses.

Is it possible to circumvent this?

Thanks.

Not taken back into Rocketrides after Authing in with Stripe

While signing in to become a pilot and logging in with my Stripe credentials, I went through the forgot password flow. After doing that and completing signup, I wasn't redirected back to rocketrides.io, but instead was dropped into the Stripe dashboard. Is this intentional, and is it the intended flow for Stripe Connect in general? Is this a result of going through the forgot password flow?

Connecting recommendations

Use babel to handle async rather than require Node7

It seems like requiring Node@>=7 is bit restrictive. Can babel be used to handle async instead as I'm assuming this is why:

.../stripe-connect-rocketrides/routes/pilots/pilots.js:30
router.get('/dashboard', pilotRequired, async (req, res) => {
                                        ^ unexpected token

demo breaks with non-USD test accounts

Steps to reproduce:

• create account at rocketrides.io
• configure test Stripe account with non-USD currency
• click on 'Create passenger ride' button

Outcome:

• when I click on 'Create passenger ride', it fails with Payment Required error, though still creating a ride
• 'Pay out now' button is never enabled

"Create passenger ride" responds with 402 Payment Required

When I click "Create passenger ride", it does a POST to https://rocketrides.io/pilots/rides. The response has status 402 and the body is just "Payment Required". I'm not sure what's supposed to happen, but this seems like an error.

I see the new ride listed on my Rocket Rides dashboard, but my linked Stripe Express dashboard doesn't show any payments.

My stripe

Extra $ sign in the dashboard

In the pilot dashboard, if there's an available balance there's an extra dollar sign in front of the amount.

Need to remove that hardcoded $ on this line:
https://github.com/stripe/stripe-connect-rocketrides/blob/master/server/views/dashboard.pug#L26

how we can implement this in react native ?

i studied all sources in the stripe sites , but i can't understand how we can implement this in react native , like below link access to dashboard by entering stripe account and password.
https://rocketrides.io/

MainAPIClient.shared.createCustomerKey

I am trying to run the demo project but it is showing me that "MainAPIClient.shared.createCustomerKey". Can you please help me regarding this.

This email already exists. Please try to log in instead.

Getting email already exists error while trying to sign up. And if I try to login with the email and some random password getting internal server error.

Issue with 3D secure card

Hi,
I am facing some issue while requesting ride using 3d secure card.

Stripe

Delete account

I was testing this application and stupidly linked it to my email which had other accounts. Once I closed all the other accounts, I cannot re-create a stripe account or log into it because I believe this application created a stripe account for me. Could this be removed or checked?

How do I convert this to .net core?

I'm trying to integrate stripe for .net core 3.0 web api for the servcer and react / react-native for clients.

But this repository has node.js server with view pages.

Can you please provide server side only implementation of .net core?

Email address capture

When I view the demo, I see a field for a users' email address, but I cannot find it's input code anywhere in the project. Where is that code located ?

Any Better Documentation?

The documentation on the website is questionable at best and this sample code doesn't seem to map to the few pages of documentation.

Is there anything else available? a video a more clearly documented example?

I am getting through the express setup, but all my test accounts are restricted, and it is not clear to me how to actually edit the account as a logged in user. Stripe says the user does exists... Do I need to create the stipe user account first and then take the user down the connected account path?

How do I delete the test connect accountant?

Just looking for some additional guidance

Invalid Stripe API version: 2018-11-21 accounts_upgrade=true

Tried the express account on boarding process today and this is the error I'm seeing on rocketrides.io: