先日クライアントワークで、Stripeを使った決済フォームを実装することがありましたので備忘録として残しておきたいと思います。今回はフロント側でStripeのAPIを使ってトークンを発行し、バックエンド側に受け渡すというところの実装を担当しました。プロジェクトの中でVue.jsが使われていたので、そのままVue.jsのコンポーネントとして作成しました。   StripeはJavaScriptで扱えるようにライブラリが用意されているのでまずはインストールをしていきます。CDNでも対応しているようですね。また、バックエンド側にトークンを受け渡す処理もあるため、必須ではないですがaxiosも合わせてインストールしておきます。

$ npm install @stripe/stripe-js axios

  インストールが完了したら、Vue.js側でコンポーネントを作成していきます。カード番号などの入力フォーム部分はStripe側で生成してくれるので、HTMLはとてもシンプルになります。バリデーションのエラーメッセージと送信用のボタンを用意しておきます。スクリプト側では、必要なモジュールをインストールして、Stripeのキーは変数としてpropsの値で受け取りますので、コンポーネント内では定義しないようにしています。 【PaymentForm.vue】

<template>
  <h2>決済フォーム</h2>
  <div id="payment_form"></div>
  <p>{{ data.result }}</p>
  <button type="button" @click="payment($event)">購入する</button>
</template>

<script setup>
  import { loadStripe } from '@stripe/stripe-js';
  import { axios } from 'axios';
  import { reactive, onMounted } from 'vue';
  const props = defineProps({
    stripeKey: String
  });
  const data = reactive({
    stripe: null,
    cardForm: null,
    result: null,
  });
  const payment = (event) => {
    event.target.disabled = true;
    event.target.innerText = '決済処理中';
    data.stripe.createToken(data.cardForm).then((result) => {
      console.log(result)
      if(result.error) {
        data.result = result.error.message;
        event.target.disabled = false;
        event.target.innerText = '購入する';
      } else {
        axios.post('/api/*****', {
          token: result.token.id
        }).then(() => {
          event.target.remove();
        });
      }
    }).then((error) => {
      return error;
    });
  }
  onMounted( async () => {
    data.stripe = await loadStripe(props.stripeKey);
    const stripeElements = data.stripe.elements();
    data.cardForm = stripeElements.create('card', { hidePostalCode: true });
    data.cardForm.mount('#payment_form');
  });
</script>

  Stripeのライブラリではいろんなメソッドが用意されております。まずは「loadStripe()」メソッドでStirpeオブジェクトを呼び出して初期化することで使えるようになります。その際にはStripeのアカウントで用意されている公開キーをセットします。そしてStirpeオブジェクトに対して「elements()」や「create()」などのメソッドで入力フィールドを生成します。それらをVue.js側からDOMにマウントさせることで画面上に表示させます。   あとは、購入ボタンを押した時の処理を作成していきます。「createToken()」メソッドを使うとトークンを発行できるようになります。戻り値はPromiseで受け取るので、トークンが発行された後の処理を続けて書いていきます。レスポンスにエラーがない場合には、バックエンド側にある受け取り先のAPIエンドポイントにPOSTします。そのあとは適宜メッセージを出したり購入ボタンを消したりなど仕様に合わせて調整していきます。   また、補足ですがこのようなボタンをクリックさせて決済処理を行う場合に、ダブルクリックをすることで二重に決済が行われてしまう可能性もあります。上記では、クリックした時にボタン要素をdisabledの状態にすることで二重決済を防ぐようにしています。その際にはボタンのテキストも適切なものに変えてあげるとユーザビリティ的にも良いですね。エラーが出て決済に失敗した時などは、disabledの状態を元に戻して再度クリックできるようにしておきます。

const payment = (event) => {
  event.target.disabled = true;
  event.target.innerText = '決済処理中';
  .....

  これで決済用のフォームが出来上がりましたので、コンポーネントへprorsを使ってStripeのキーを受け渡していきます。

<payment-form :stripe-key="'pk_test_********'" />

  上記では静的な形でキーの値を入れていますが、実際にはStripeのキーなどもバックエンド側で環境に合わせた変数で持たせておくことが多いかと思います。例えばLaravelですとBlade上でこんな感じに値を取得してコンポーネントに渡す形になります。

<payment-form :stripe-key="{{ config( services.stripe.public_key ) }}" />

 

---

  今回はVue.jsを使ってStripeで決済する時に使うフォームのコンポーネントを作ってみました。Stripeは手数料がやや高いものの、初期コストや維持費を気にせず気軽に導入できるというメリットがあるので、選択肢に上がることも多いのではないでしょうか。ライブラリも用意されているので短時間で実装できるのも魅力ですね。   （参考にさせていただいたサイト） Stripe.js reference