Stripeを利用した自分のサイトでのオンライン決済
Silicon Valley Super Ware
2020年9月23日
Stripeを利用した自分のサイトでのオンライン決済
今月は早々にStripeを利用したオンライン決済の仕組みを紹介しました。今回紹介したのは一番シンプルな方法です。
Stripeが予め用意した支払いページで決済を行った後、あなたのWebサービスのページに戻る（リダイレクトする）方法でした。
この方法はシンプルで簡単に実装できますし、信頼性も高いですが支払いがあなたの提供するサイトではなく、Stripeのサイトで行われます。
できれば、自分のサイトで（他のサイトに飛ばすに）決済を行いたい場合もあるかと思います。今日はそうした場合の対応方法についての投稿です。
自分のページでも支払いは可能
インターネットで検索をすると幾つかの方法が出てきます。
VUEベースの実装もありますが、今回紹介したStripe側での決済方法以外は私自身で実装した事がありません。したがって、ここでは詳細の紹介は控えさせて頂きます。しかし、幾つかのパッケージもあるようなのでそれを見ると可能だと思います。
今回は実際に私自身で実装している方法についてもう少し詳しく解説します。
この例は「React」を利用した事例です：
使用したパッケージは「react-stripe-checkout」というパッケージです。
「npm」を使ってあなたのサービスに取り込む事が可能です。
このフォームで入力した情報、この場合、E-Mailアドレス、カード番号、有効期限とセキュリティコードを入れると決済に必要な情報がバックエンドに送られて、その情報を基に、Stripeで決済が実行されるという仕組みです。
カスタマイズ可能な「部品」
この例では、一部の最低限の情報のみの入力になっていますが、もっと詳しい情報を入力する事ができます。「react-stripe-checkout」のドキュメントをご覧になるとお分かりかと思いますが、もっと細かいパラメータ（プロパティ）を指定する事も可能です。
例えば、「billingAddress」を指定すれば、住所と名前の入力が必要になります。
「StripeCheckout」の指定の例です。通貨（currency）やロケール（locale）や住所のプロパティはコメントアウトしてあります。この指定の仕方にｙって入力フォームに入力するフィールドが出てきます。これを上手く使えば必要に応じて指定を変える事ができます。
<StripeCheckout
stripeKey={process.env.REACT_APP_KEY}
token={(token) => this.makePayment(token)}
name="教材：「オンライン決済のやり方」"
amount={this.state.product.price * 100}
//currency="JPY"
//locale="ja"
//billingAddress
//shippingAddress
>
<button>購入 ${this.state.product.price}</button>
</StripeCheckout>
なお、送付先や課金先の住所を指定すると、住所だけではなく、氏名の入力も必要になります。
バックエンドに送る情報
この方法でも、バックエンドを仲介にした処理が必要になります。
送る情報は、購入する商品情報とこの「チェックアウトフォーム」で入力した決済情報です。決済情報は、「token」になりますが、コールバックを使ってバックエンドに送ります。
「makePayment(token)」がバックエンドに情報を送るメソッドになります
makePayment(token) {
const body = {
token: token,
product: this.state.product,
};
const headers = {
"Content-Type": "application/json",
};
return fetch(`http://localhost:5000/payment`, {
method: "POST",
headers: headers,
body: JSON.stringify(body),
})
.then((response) => {
console.log("Response ", response);
const { status } = response;
console.log("STATUS ", status);
})
.catch((error) => console.log(error));
}
処理の大まかな流れは最初に紹介した、Stripeの決済ページを使う場合とは少し違います。
商品を選択後、フロントエンドで決済情報を入力してもらった上でStripeにバックエンドから決済情報を送って決済する事になります。
バックエンドの処理は？
というのが、今回紹介した3つの実装事例の概要です。
では、どれが良いかという事になりますが。お勧めはURLのみをバックエンドで処理して取得する方法です。
this.app.post("/payment", (req, res) => {
const { product, token } = req.body;
return stripe.customers
.create({
email: token.email,
source: token.id,
})
.then((customer) => {
stripe.charges.create(
{
amount: product.price * 100, // cents
currency: "usd",
customer: customer.id,
receipt_email: token.email,
description: "puchase of " + product.name,
shipping: {
name: token.card.name,
address: {
line1: "xxxx street",
},
},
}
);
})
.then((result) => res.status(200).json(result))
.catch((err) => console.log(err));
});
まずは、「支払者」を作成して、課金のセッションを作るという流れです。正常に処理が終わった場合と、課金が失敗した場合に分けて処理をします。上記は例なのでコンソールにメッセージを出すだけになっています。
実際の処理では、ページのリダイレクトなどを行って別のページを表示するようにします。
如何ですか？自分のサイト内でも意外に簡単に処理ができますよね？
どちらの決済が便利か？
このように、自分のサイト内で決済を行う事は可能です。実際のオンライン決済の処理は、いずれにしてもStripe側で行うのですが、今日紹介した例では、必要な情報を運営するサイトで全て取得して、課金情報とカードなどの決済情報をStripeにバックエンドから送っているので利用者には直接わかりません。
「react-stripe-checkout」は単に、課金情報や、カード情報を取っているだけなので、同じようなモジュールを自分で書いてもそれほど大変ではありません。
要は、必要な情報をバックエンドがStripeに送る事ができれば決済は可能という事です。
実は、Webサービス側でやる処理はとてもシンプルという事です。
最初に紹介した方法との差は、カード情報（支払い情報）の扱いです。
最初の方法は、直接Stripeのサーバーにカード情報を送りますが、今回のやり方の場合は、ホスティングのサーバーを経由して送ります。
いずれの方法でも、「https」など、SSLで暗号化された情報を送る限りはセキュリティ上のリスクは大きく変わりません。しかし、今回の方法はWebホスティングのサーバー（バックエンドの処理を行うサーバー）を経由する分リスクは若干増える事になります。
どちらが利用者が安心か？
厳密なリスクを考えると、直接Stripeに送る方がよさそうです。
しかし、利用者によっては、支払いが別のサイトに飛ぶのも心配な場合もあります。そう考えると、あなたの相手にするお客様はどちらの方が安心して使えるかを考えて実装するのが一番です。
サービスは利用者の為にあるが常に第一です！
いずれにしても、利用者の安全が第一です。
それを考えて、今回のオンライン決済の紹介では、「Stripe」のサイトでの決済をお勧めしておきます。この方法だと、カード情報などは、直接Stripeに送られるので、これらの情報をあなたのサービスが直接扱う事はありません。フォームも、Stripeが提供するものになるので間違いが少ないと言えます。したがって、初めてオンライン決済を導入される場合は、利用実績も多いStripeのサイトでの決済をお勧めしています。
9月からは、Firebaseに特化した開発の紹介を考えています。ぜひあなたの開発にもFirebaseを検討してみてはいかがでしょうか？
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿