サーバレスでStripeネット決済

ネット決済代行をしてくれるStripeを使用してサーバ構築なしで販売できる別の支払い方法を紹介

前回から

前回Stripeでダイレクトリンクを作成し支払いができる状態までできましたが、それだけでは不便ですので、HTML JSの出番になります。サーバレスではあるがフロント（HTML,JS,CSS）にある程度理解があり、本運用するのであればWebページを表示できるwebサーバーが必要にはなります。無料で使用できるサービスは結構あるのでそれは別途記事にしていきたいと思います。

今回はテストで動かせるを目的にしているので、HTML,JSができれば特に問題ありません。

今回の目標

購入ボタンクリックで商品２つの商品ページが表示される

Webページ

購入ボタンクリック後

前提条件

HTMLがわかる
JSがなんとなく書ける

redirectToCheckout

テストだけならウェブサーバー不要で、手元にPCだけあればとりあえず試せます。今回はHTMLとJSでstripeのredirectToCheckoutというものを使用します。

jsに長けている人であれば、頑張ればカート（かご）機能を作ることができますが... 私はReactを使用しているのでプレーンのJSを使用するのはちょっと大変だな...

Stirpeで確認するところ

公開可能キー

商品ID

IDは「price_」から始まる文字です。 Stripe_ProductID

シークレットキー

「公開可能キー」については厳格に扱いを気にする必要はありませんが、 「シークレットキー」については絶対にどこにも公開しないでください。

ちなみに「シークレットキー」については今回は使用しません。

ソースコード

とりあえず動かせるソースを載せます。

3ヶ所修正してテストしてみてください。

1.youerstripekey
2.{price: 'price_XXXXXXXXX', quantity: 1},
3.{price: 'price_XXXXXXXXX' , quantity: 3}

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="utf-8">
 <title>Title</title>
 <script src="https://js.stripe.com/v3"></script>
 </head>
 <body>
 <button id ="btn">購入ボタン</button>
 </body>
 
 <script>
var youerstripekey = 'pk_test_XXXXXXXXXXXX'
var btn = document.getElementById('btn');
var stripe = Stripe(youerstripekey);
  btn.addEventListener('click', function () {
    stripe.redirectToCheckout({
lineItems: [
{price: 'price_XXXXXXXXX', quantity: 1},
{price: 'price_XXXXXXXXX' , quantity: 3}
],
mode: 'payment',
successUrl: 'https://localhost/success',
cancelUrl: 'https://localhost/canceled',
})
.then(function(result) {.....});
});
</script>
</html>

解説

コードの流れ

1.js.stripe.com/v3を読み込む。
2.stripeに公開可能キーを読み込ませる。
3.ボタンクリックでstripe.redirectToCheckoutを実行させる。

stripe.redirectToCheckoutでstripe側でURLが作成されるのでそこにアクセスします。（redirect）商品はLineItemsの中の物です。 price quantityを設定してあげます。

mode:paymentの他にサブスクとしてsubscriptionがありますが今回は通常の支払いのためpaymentを仕様。 successUrl , cancelUrlについて支払いが正常に完了した場合。その他支払が終わって無い場合どこにページを切り替えるかの設定です。 successUrlのURL部分に購入いただきありがとうございましたのページを作ったらいいかもですね。その他のパラメータは公式から参照ください。

公式サイトredirect_to_checkoutについて