loading...
Cover image for Stripe with Nuxt ①ドキュメント漁る

Stripe with Nuxt ①ドキュメント漁る

ryunishimura profile image Ryu Nishimura Updated on ・1 min read

更新していくよ

目次

  1. ドキュメント整理
  2. UIの構築
  3. 決済APIの構築
  4. テスト
  5. サブスクリプションの構築
  6. FirebaseとStripeを組み合わせる

1. ドキュメント整理

Stripe.js Reference

2. UIの構築

ポイント

  • 'https://js.stripe.com/v3/'をVueコンポーネント内に読み込むと、エラーになるので、nuxt.config.jsで読み込む。
  • .envに公開可能キーとシークレットキーを記載する。
  • { hidePostalCode: true }で郵便番号を消すことができる。

Stripe Elements for the web
Stripe Elements examples

# Stripe
STRIPE_PUBLIC_KEY=pk_test_****
STRIPE_SECRET_KEY=sk_test_****
Enter fullscreen mode Exit fullscreen mode
export default {
  mode: "spa",
  head: {
    script: [{ src: 'https://js.stripe.com/v3/' }],
  },
}
Enter fullscreen mode Exit fullscreen mode

Nuxt 外部リソースを使うには?

  mounted() {
    var stripe = Stripe(process.env.STRIPE_PUBLIC_KEY);
    console.log(stripe)
    var elements = stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };
    var card = elements.create('card', {style: style});
    card.mount('#card-element');
  },
Enter fullscreen mode Exit fullscreen mode

3. 決済APIの構築

  • Netlify Functionsを使用します。

Netlify Functions

4. テスト

Test the integration

Alt Text

こちらのスイッチをオンにすると、テストデータに切り替わります。

5. サブスクリプションの構築

ポイント

  • 顧客を把握すること
  • 一度購読した顧客は、再度登録できないこと
  • 購読している顧客に対して、コンテンツを解放できること
  • 引き落とし日を把握すること

Set up a subscription

Posted on by:

ryunishimura profile

Ryu Nishimura

@ryunishimura

Favorites❤️ JAMStack/Serverless/Nuxt.js/Contentful

Discussion

pic
Editor guide