新しいUIのStripe CheckoutをRailsでつくってみた

4787 ワード
stripe Rails Rails テキストリンク

前話

Stripeの旧来のデザインであるStripeの実装記事は多くありますが、今現在のデザインでの導入記事は見当たらなかったので投稿します。
StripeのチェックアウトをstripeのドキュメントやらstackoverflowやQiitaを必死こいて探してもみあたらず、結果的にカスタマーサポートに連絡をして参考URLをいただきました泣。自分が欲しいドキュメントを探すのって意外と大変で、検索力って大事だなと実感。

そんなこんなで共有してもらったURLがこちら

旧来のデザインはこちら

現在のデザインはこちら

導入

まず、stripeのgemをインストール

gem install stripe

initializerでstripe設定をする

Rails.configuration.stripe = {
  publishable_key: ENV['STRIPE_PUBLISHABLE_KEY'],
  secret_key: ENV['STRIPE_SECRET_KEY']
}
Stripe.api_key = ENV['STRIPE_SECRET_KEY']

参考記事
https://qiita.com/ryouzi/items/6ee8f277471aa3b02f7b

stripe側に遷移するときの処理をコントローラー内にメソッド作成

def create_checkout
  content_type 'application/json'
  session = Stripe::Checkout::Session.create({
    payment_method_types: ['card'],
    line_items: [{
      price_data: {
        unit_amount: 2000,
        currency: 'usd',
        product_data: {
          name: 'Stubborn Attachments',
          images: ['https://i.imgur.com/EHyR2nP.png'],
        },
      },
      quantity: 1,
    }],
    mode: 'payment',
    success_url: "支払い完了後のURL",
    cancel_url: "支払い失敗時のURL",
  })
  {
    id: session.id
  }.to_json
end

checkoutを呼び出すためのhtmlページ作成

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img
          src="https://i.imgur.com/EHyR2nP.png"
          alt="The cover of Stubborn Attachments"
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <button type="button" id="checkout-button">Checkout</button>
    </section>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51IbbUMJRUSCBZvFMNE3kqdUc75hqKIePTnalyL4PHw1ZA60rwv6wGYmFpsyWfLnG1zQY77LdcZYtOhIOOpNuAEhe00mi7WLG6B");
    var checkoutButton = document.getElementById("checkout-button");
    checkoutButton.addEventListener("click", function () {
      fetch("[作成したメソッドのpath]", {
        method: "POST",
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        });
    });
  </script>
</html>

支払いの流れ

作成したHTMLページ　=> コントローラー　=> stripe側のチェックアウトページ　=> 成功ページ　or 失敗ページ

の流れで支払いが完了します。

　まとめ

Stripeのチェックアウトページがださいなーって思っている方は是非実装してみてください。