Stripe ElementsとVue.jsを統合して、カスタム支払いフォームを設定する

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

Stripeは、オンラインでの支払いを処理するための最良の方法の1つであり、最近、StripeElementsをリリースしました。 Stripe Elements は、独自のチェックアウトフローを簡単に作成するのに役立つUIコンポーネントのビルド済みライブラリです。これにより、アプリのカスタム支払いフォームの設定がこれまでになく簡単になりましたが、2つを統合する際に注意する必要のあるいくつかの落とし穴があります。

この投稿では、Vue.jsとStripe Elementsを統合して、Webサイトまたはアプリでカスタムカード支払いフォームをすばやく設定できるようにする方法を紹介します。

代わりにStipeElementsをAngularアプリに統合することに興味がある場合は、この投稿をチェックしてください。

Stripe Elementsとは何ですか？

Stripe Elementsは、ユーザーから情報を収集するためのボタンや入力などのチェックアウトフォームを作成するために使用できるさまざまな要素を備えたコンポーネントのコレクションです。この投稿で焦点を当てるのは、カード要素です。カード要素を使用すると、1つの要素内ですべてのカード情報を収集できます。これには、動的に更新されるカードブランドのアイコンと、番号、有効期限、CVC、および郵便番号の入力が含まれています。

インストール

Stripe ElementsはStripe.jsの一部として利用できるため、次のスクリプトタグを使用してページにスクリプトを含めるだけです。 Stripeは、次のURLを使用して、常にindex.htmlページに直接含めることをお勧めします。

<script src="https://js.stripe.com/v3/"></script>

カード要素の初期化

Stripe Elementsは独自のUIを処理して初期化するため、StripeElementsよりも前にVue.jsを初期化すると競合が発生する可能性があります。これを回避するには、Vue.js要素がDOMにマウントされた後にStripeElementsを設定します。

<template>
  <div ref="card"></div>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  }
};
</script>

カード要素のスタイルのカスタマイズ

要素のスタイルをカスタマイズするには、オブジェクト内でスタイルを宣言する必要があります。

let style = {
  base: {
    border: '1px solid #D8D8D8',
    borderRadius: '4px',
    color: "#000",
  },

  invalid: {
    // All of the error styles go inside of here.
  }

};

次に、カード要素を初期化するときにそのオブジェクトをcreateメソッドに渡すことができます。これにより、宣言したスタイルが要素に確実に適用されます。

card = elements.create('card', style);

ストライプトークンの収集

Stripeを使用すると、Elementsによって収集されたカード情報を収集して使い捨てトークンに変換し、サーバーに渡してAPI呼び出しで使用できます。

purchaseメソッドをボタンにバインドしてから、そのメソッド内でstripe.createTokenメソッドを呼び出すことができます。

<template>
  <div ref="card"></div>
  <button v-on:click="purchase">Purchase</button>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  },

  purchase: function () {
    stripe.createToken(card).then(function(result) {
      // Access the token with result.token
    });
  }
};
</script>

カードエラーをキャッチする

カード要素は、Visa、MasterCard、およびその他のサポートされているカードタイプの構文に適合しないカード番号のエラーを自動的にキャッチします。それでも、さまざまなタイプのエラーが発生する場合があります。StripeElementsを使用すると、result.error変数を使用してcreateTokenメソッド内でエラーを処理できます。

purchase: function () {

  let self = this;

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      self.hasCardErrors = true;
      self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update.
      return;
    }

  });
}

参照

Stripe Elementsは、支払いの処理を迅速かつ簡単にするStripeのソリューションであり、Vue.jsプロジェクトへの統合は非常に簡単です。詳細については、必ずドキュメントをチェックアウトしてください。

getdocs

13036