Help us understand the problem. What is going on with this article?

StripeをVueにシンプルに導入してみた

More than 1 year has passed since last update.

はじめに

カード決済システムのStripeをVueに組み込んだので備忘録として最低限動くコードを載せておきます
cssはサボって設定してないのでお好きなようにやっちゃってくださいw
あとstripe_idは自分のに置き換えましょう

完成形

cssがないので見た目があれですが、機能としては問題ないです

image.png

実装

スクリプトを読み込む

1行追加するだけ。簡単。

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

Vueの開発

こんな感じが最低限動く形かなと。

stripe.vue
<template>
  <div class="container">
    <div id="card-element">
    </div>
    <button @click="submit">Submit Payment</button>
    <div v-if="show_result">{{result_message}}</div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      card: null,
      stripe: Stripe("stripe_id"),
      show_result: false,
      result_message: ""
    };
  },
  mounted() {
    const elements = this.stripe.elements();
    this.card = elements.create("card");
    this.card.mount("#card-element");
  },
  methods: {
    submit() {
      const self = this;
      self.show_result = false;
      this.stripe.createToken(this.card).then(result => {
        console.log("result: " + JSON.stringify(result));
        // エラーの場合
        if (result.error) {
          self.show_result = true;
          self.result_message = result.error.message;
          // 成功の場合
        } else {
          self.show_result = true;
          self.result_message = "token_id: " + result.token.id;
        }
      });
    }
  }
};
</script>

<style scoped>
</style>

成功の場合にトークンを表示してるだけなので、ここにサーバにトークンを投げる処理を入れるといいと思います

おわりに

簡単にカード決済を導入できて便利ですね〜
お金系はバグが怖いからシンプルにできるのは嬉しい

それではよきStripeライフを〜

reon777
ITフリーランス。20代後半。 2児のパパ。 新卒から数年間東京の証券系SIerで働いてましたが、2018年5月から福岡(北九州市)にUターンしました。 仮想通貨の自動売買bot運用してます。 株の自動売買に興味あり。すぐ忘れるのでこまめに色々アウトプットしていきたい。 Twitterアカウント:@reo3313
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした