決済システムの導入編 [SwiftUI × Firebase × Stripe] Stripe Connect Standardについて
本記事ではStripe ConnectのStandardを実装します。
Stripe Connectには3種類あります。
料金
Standard…1アカウント作成辺り無料
Express…1アカウント作成辺り200円
Connect…1アカウント作成辺り200円
責任(不正取引)
Standard…ユーザー
Express…プラットホーム(自社)
Connect…プラットホーム(自社)
Cloud Functionにデプロイします。
今回は、iPhoneアプリでCtoCサービスの決済システムを導入します。CtoCサービスとはメルカリやBaseなどの「Consumer to Consumer：個人間取引」のサービスです。このCtoCサービスで決済するためにStripeのConnectを利用します。
Stripeでできること
・ユーザーの登録
・クレジットカード情報の登録・削除
・本人確認
・決済(個人間の決済)
[メリット]
・クレジット決済が可能
・初期費用は無料、月額費または隠れた料金は一切なし
・アカウントの作成が簡単
[デメリット]
・１決済あたり3.6%の手数料(2021年 12月23日現在)
本記事ではSwiftUI × Firebase × Stripe をアプリに組み込む方法と、決済を成立させるまでの実装を解説しております。
・SwiftUIアプリ又はSwiftアプリとFirebaseの紐付け
・FirebaseのCloud Functionsを使うため、Firebaseのプランを従量制(Blaze)にする。
・Stripeのアカウント登録
CtoCサービスでのお金の決済を行う仕組み
ユーザー間の電子決済のやり取りをサポートします。
・Customer(顧客)・・・お金を支払う人(購入者)
・Stripe(ストライプ)・・・手数料3.6%
・Connect(コネクト)・・・お金を受け取る人(サービス提供者)
・Platform(プラットフォーム)・・・アプリを提供している会社(私たちになります。)
・Standardアカウント
・Customアカウント
・Expressアカウント
本記事ではCustomアカウントについて説明いたします。
1. Stripeの登録及びプロジェクトの作成
<バックエンド側(Firebase Cloud Function)>
2.VScodeでの npm パッケージのinstall
3.デプロイ
<フロントエンド側>
4. Customer(支払う側) と ConnectAccount(受け取る側)の作成
5.Customerのクレジットカードを登録する。
6.決済する。
導入方法はユーザーがStripeのアカウントを登録できるようにFirebaseにデプロイする。
const { Stripe } = require('stripe');
const stripe = new Stripe(functions.config().stripe.secret, {
apiVersion: '2020-08-27',
});Firebaseのcloud functionにある.oncallを利用してアプリでログイン情報を入力する際にStripeも登録しておくようにする。
●StripeのCustomerを作成する。作成したcustomerIdをフロントエンドに返す
exports.createCustomer = functions.region("us-central1").https.onCall(async (data, context) => {
const email = data.email;
const customer = await stripe.customers.create(
{ email: email },
{ idempotencyKey: data.idempotencyKey });
const customerId = customer.id;
return { customerId: customerId }
});●StripeのStandardConnectを作成する。作成したaccountIdをフロントエンドに返す
exports.createStandardConnect = functions.region("us-central1").https.onCall(async (data, context) => {
const connect_account = await stripe.accounts.create({
type: 'standard',
country: 'JP',
email: data.email
});
const accountId = connect_account.id;
return { accountId: accountId }
});●StripeのStandardConnectの個人情報を登録するURLを作成する。作成したaccountLinksURLをフロントエンドに返す
exports.createStandardURL = functions.region("us-central1").https.onCall(async (data, context) => {
const accountLinks = await stripe.accountLinks
.create({
type: "account_onboarding",
account: data.id,
refresh_url: `https://sponserjapan.com`,
return_url: `https://sponserjapan.com`,
})
const accountLinksURL = accountLinks.url
return { accountLinksURL: accountLinksURL }
});フロントエンドでaccountIdとcustomerIdとaccountLinksURLを保存します。
Cloud FunctionにデプロイしたcreateCustomerをアプリのログイン情報入力する際に呼び出します。
Firebaseの.onCallからStripeに登録したcustomerIDを得る。
func createCustomerId (email: String) {
var functions = Functions.functions()
let data: [String: Any] = [
"email": email
]
functions.httpsCallable("createCustomer")
.call(data) { result, error in
if let error = error {
print("エラーです。 : \(error)")
} else if let data = result?.data as? [String: Any],
let customerId = data["customerId"] as? String {
print("Stripeに登録したカスタマーIDです : \(customerId)")
}
}
}同時にConnectも作成する。
func createStandardConnect (email: String) {
var functions = Functions.functions()
let data: [String: Any] = [
"email": email
]
functions.httpsCallable("createStandardConnect")
.call(data) { result, error in
if let error = error {
print("エラーです。 : \(error)")
} else if let data = result?.data as? [String: Any],
let accountId = data["accountId"] as? String {
print("コネクトの結果です。 : \(accountId)")
}
}
}func createStandardURL (accountID: String) {
var functions = Functions.functions()
let data: [String: Any] = [
"id": accountID
]
functions.httpsCallable("createStandardURL")
.call(data) { result, error in
if let error = error {
print("エラーです。 : \(error)")
}
else if let data = result?.data as? [String: Any],
let accountLinksURL = data["accountLinksURL"] as? String {
//下記でStripeで作成した支払う側のIDを作成できます。
print("個人の登録用のURLになります。 : \(accountLinksURL)")
}
}
}CustomerIDとConnectIDをFirebaseに保存する。
アプリでログイン情報の登録が終わりますと、Stripe上にCustomerが登録されていますので、次にカード情報を持たせます。
カード情報を安全に登録するため、カード情報をトークン化したものをCustomerに登録します。トークン化することで自社のサーバーにカード情報を保存せず直接Stripeに送信することができます。
★Customerのクレジットカードを登録(Firebase)：お金を支払う人側(顧客)
フロントエンドからクレジットカードのトークン情報を先ほど作ったCustomerに保存する。
exports.createCardInfo = functions.region("us-central1").https.onCall((data, context) => {
const customerId = data.customerId;
const cardToken = data.cardToken;
return stripe.customers.createSource(
customerId,
{ source: cardToken },
);
});★Connectの入金される銀行口座の登録(SwiftUI)：お金を受け取る側(コネクト)
フロントエンドから銀行口座情報のトークン情報を先ほど作ったConnectに保存する。
参考文献
https://stripe.com/docs/connect/enable-payment-acceptance-guide
2021年 12月 27日 著作者 西村太智 (BeeeLU責任者,WATSON CAMP責任者,Sponser責任者,Shuwa責任者)
コメント