source
hackmd.io
- About a year ago I built a food delivery app that needed to integrate payment. I quickly learned about stripe and tried to integrate this service into my iOS application. The process of integrating stripe into my application was an unpleasant one because I had very little development experience at the time and there was no tutorial out there that properly helped me integrate stripe. As a teacher now and an avid learner I hope for this repository to serve as a resource for students/developers looking to integrate stripe into their applications
- Before your iOS Client Application can submit a payment to stripe it must create a payment-intent with a client secret that can only be generated using server side code. Once the client seceret is generated, your server sends it back to your client iOS Application. Your iOS Client uses that client secret to create a payment-intent. Using that payment intent the iOS Application can now proceed to making a payment.
1. Install dependencies
- On repl, go to your
Shell
option on the top left
-
Run the following commands to install the necessary packages for running a Flask server
::: warning
pip freeze > requirements.txt
pip install Flask
pip install requests
pip install stripe
:::
2. Copy the template Stripe API Code to your Repl
#! /usr/bin/env python3.6
"""
Python 3.6 or newer required.
"""
import json
import os
import stripe
# This is your real test secret API key.
stripe.api_key = "sk_my api key"
from flask import Flask, render_template, jsonify, request
#creates the slack application
app = Flask(__name__, static_folder=".",
static_url_path="", template_folder=".")
def calculate_order_amount(items):
# Replace this constant with a calculation of the order's amount
# Calculate the order total on the server to prevent
# people from directly manipulating the amount on the client
return 1400
#The @app.route() tells flask what fucntion to run when a particular route is requested
@app.route('/create-payment-intent', methods=['POST'])
def create_payment():
'''
This funnction create a payment Intent that stripe then uses on the client side to finalize payments
'''
try:
data = json.loads(request.data)
intent = stripe.PaymentIntent.create(
amount=calculate_order_amount(data['items']),
currency='usd'
)
return jsonify({
'clientSecret': intent['client_secret']
})
except Exception as e:
return jsonify(error=str(e)), 403
if __name__ == '__main__': #checks if the file name is being called
app.run(host="0.0.0.0") # runs the app
3. Run you Flask server
- On repl, go to your
Shell
option on the top left and run:python app.py
::: warning Be sure you have gone through the Slides first before following this instructions :::
-
Create a Python file name it app.py
-
Start your Virtual Env ==IMPORTANT==
- Start a virtual env
python3 -m venv env
- Activate your virtual environment
source env/bin/activate
- Start a virtual env
-
Now that you’re in your virtual environment you can install packages. Let’s install the Requests library from the Python Package Index (PyPI):
pip3 install Flask
pip3 install requests
pip3 install stripe
python3 -m pip3 install --user virtualenv
pip3 freeze > requirements.txt
-
Head here and sign up or login into stripe
-
Then head to iOS SDK Integrations
-
Your file should look like what we have below but with your api key
⚠️ Stripe will fill in your api key for you in the file after you sign up
#! /usr/bin/env python3.6
"""
Python 3.6 or newer required.
"""
import json
import os
import stripe
# This is your real test secret API key.
stripe.api_key = "sk_my api key"
from flask import Flask, render_template, jsonify, request
#creates the slack application
app = Flask(__name__, static_folder=".",
static_url_path="", template_folder=".")
def calculate_order_amount(items):
# Replace this constant with a calculation of the order's amount
# Calculate the order total on the server to prevent
# people from directly manipulating the amount on the client
return 1400
#The @app.route() tells flask what fucntion to run when a particular route is requested
@app.route('/create-payment-intent', methods=['POST'])
def create_payment():
'''
This funnction create a payment Intent that stripe then uses on the client side to finalize payments
'''
try:
data = json.loads(request.data)
intent = stripe.PaymentIntent.create(
amount=calculate_order_amount(data['items']),
currency='usd'
)
return jsonify({
'clientSecret': intent['client_secret']
})
except Exception as e:
return jsonify(error=str(e)), 403
if __name__ == '__main__': #checks if the file name is being called
app.run(host="0.0.0.0") # runs the app
- Run the command below in your terminal:
python3 app.py
-
You should have something like this show up on your terminal:
-
Head to localhost 5000 you should see a hello world message. This means that your Flask web server is now up and runing at that url above.
⚠️ Make sure to run your application or your local host will not show anything when you head to the link above
-
👋 If you have xcode installed and don't want to go through the process of building your own application you can just run the .xcworkspace in the test_stripe_iOS
folder
❌ If you have never built an iOS application before be sure to follow this tutorial here to get started.
- Head back to iOS SDK Integrations
- Create a simple iOS Application
- Copy and paste the code in CheckoutViewController.swift into your ViewController.swift(Replace Everything in your ViewController.swift)
- Change the:
-
class CheckoutViewController: UIViewController {}
- to
-
class ViewController: UIViewController {}
- Change the
backendUrl
tohttp://127.0.0.1:5000
- The backendUrl is a variable in your ViewController.swift
- Run Your iOS Application
- Make a test payment
- Use a test card number to try your integration. These card numbers work in test mode with any CVC, postal code, and future expiry date. Stripe also has a set of international test cards to test specific postal code formats (e.g. only allow numerical values for U.S. zip codes).
Payment succeeds 4242 4242 4242 4242 Payment requires authentication 4000 0025 0000 3155 Payment is declined 4000 0000 0000 9995
- Final Client Side Outcome should look like this: