決済システムの導入編 [SwiftUI × Firebase × Stripe] Stripe Connect Customについて
今回は、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にデプロイする。
Firebaseのcloud functionにある.oncallを利用してアプリでログイン情報を入力する際にStripeも登録しておくようにする。
StripeのCustomerを作成する。
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 }
});Connectを作成し、accountIdを返す
exports.createConnect = functions.region("us-central1").https.onCall(async (data, context) => {
const connect_account = await stripe.accounts.create({
type: 'custom',
country: 'JP',
email: data.email,
business_type: 'individual',
business_profile: {
mcc: '5834',
url: 'https://drwatson2020.com/',
product_description: 'プラットフォーム型サービスのテストアカウントです',
},
capabilities: {
card_payments: { requested: true },
transfers: { requested: true },
},
individual: {
email: data.email,
},
settings: {
payouts: {
schedule: {
interval: 'manual',
},
},
},
}, {
idempotencyKey: data.idempotencyKey,
});
const accountId = connect_account.id;
return { accountId: accountId }
});business_typeは、individualを入力してください。個人間でのやり取りをする。フロントエンドでaccountIdとcustomerIdを保存します。
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 createConnect (email: String) {
var functions = Functions.functions()
let data: [String: Any] = [
"email": email
]
functions.httpsCallable("createConnect")
.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)")
}
}
}上記のcreateCustomerId関数とcreateConnect関数をそれぞれログイン時に実装するとStripeに登録されたそれぞのIDが確認できると思います。
CustomerIDとConnectIDをFirebaseに保存する。
アプリでログイン情報の登録が終わりますと、Stripe上にCustomerが登録されていますので、次にカード情報を持たせます。
カード情報を安全に登録するため、カード情報をトークン化したものをCustomerに登録します。トークン化することで自社のサーバーにカード情報を保存せず直接Stripeに送信することができます。
フロントエンドからクレジットカードのトークン情報を先ほど作った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に保存する。
参考文献
https://stripe.com/docs/connect/enable-payment-acceptance-guide
2021年 12月 23日 著作者 西村太智 (BeeeLU責任者,WATSON CAMP責任者,Sponser責任者,Shuwa責任者)
コメント