Stripeでのサブスクリプション作成が上手くできません

Question

Nuxt.js、firebase cloud functions、Stripeでサブスクリプション決済の機能を作成中で、2点質問したいことがございます。

質問1

顧客情報を生成してからサブスクリプションの生成をしたいのですが、顧客の生成前にサブスクリプション生成のコードが実行されてしまい、エラーとなってしまいます。
以下のコードで言うと、★★★1のところでは生成した顧客IDが確認できますが、★★★2では空白になっています。

async/awaitを使用して顧客を作成したのち、サブスクリプションを生成しているつもりなのですが、async/awaitの使い方が間違っておりますでしょうか？

質問2

★★★2のところで試しにcustomerId = 'xxxxxxxxxxxxxxxx'と直接IDを指定すると無事にサブスクリプションが作成されました。
しかし、★★★3のところでres.okがfalseになっており、フロント側では生成が失敗しているように見えてしまいます。
こちらは何が原因でしょうか？

// functions/index.js

const charge = async (request, response) => {
  const stripe = new Stripe(functions.config().stripe.token)

  const body = JSON.parse(request.body)
  const token = body.token.id
  const email = body.email

  let customerId = ''

  // 顧客を作成
  await stripe.customers.create(
    {
      email: email,
      source: token,
      description: description
    },
    function(err, res) {
      if (err) {
        console.error(err)
      }
      console.log('customer ID1: ', res.id)  // ★★★1. IDを取得できていることを確認済み
      customerId = res.id
    }
  )

  console.log('customer ID2: ', res.id)  // ★★★2. ここでは値が空白になっている

  // Subscriptions を作成
  stripe.subscriptions.create(
    {
      customer: customerId,
      items: [{ plan: 'plan_HArFYxS5axxgmPl' }]
    },
    (err, subscription) => {
      if (!err && subscription) {
        return done(null, { my_msg: 'OK' })
      } else {
        return done(null, { message: JSON.stringify(err, null, 2) })
      }
    }
  )
}

exports.charge = functions
  .region(REGION)
  .https.onRequest((request, response) => {
    const CORSRequestHandler = CORS({ origin: true })
    CORSRequestHandler(request, response, () => {
      if (request.method !== 'POST') {
        send(response, 405, { error: 'Invalid Request' })
      }
      try {
        charge(request, response)
      } catch (e) {
        console.log(e)
        send(response, 500, {
          error: `The server received an unexpected error. Please try again and contact the site admin if the error persists.`
        })
      }
    })
  })

<script>
import { mapGetters } from 'vuex'
import { db } from '@/plugins/firebase'

const stripe = Stripe('pk_test_BGKBSXtRPT9rFB9PKwafgTaW7xxLXmuTDe')
const elements = stripe.elements()
const style = {
  base: {
    color: '#333'
  }
}
const cardNumber = elements.create('cardNumber', { style })
const cardExpiry = elements.create('cardExpiry', { style })
const cardCvc = elements.create('cardCvc', { style })

export default {
  data() {
    return {
      email: ''
    }
  },
  computed: {
    ...mapGetters(['user', 'uid'])
  },

  mounted() {
    cardNumber.mount('#card-number')
    cardExpiry.mount('#card-exp')
    cardCvc.mount('#card-cvc')
  },

  methods: {
    // Stripeのトークンを作成する処理
    async createStripeToken() {
      await stripe.createToken(cardNumber).then(async (result) => {
        if (result.error) {
          // エラー表示.
          const errorElement = document.getElementById('card-errors')
          errorElement.textContent = result.error.message
          this.loading = false
        } else {
          // トークンをサーバに送信
          const res = await this.stripeTokenHandler(result.token)
          console.log('結果: ', res)
          if (res) {
            db.collection('users')
              .doc(this.uid)
              .update({ premium: true })
          } else {
            alert('エラー発生')
          }
        }
      })
    },

    // トークンをサーバーに送信する処理
    async stripeTokenHandler(token) {
      const url =
        'https://asia-northeast1-example.cloudfunctions.net/charge'

      console.log('token: ', token) 

      const res = await fetch(url, {
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify({
          token,
          email: this.email　　
        })
      })
      console.log(res) // ★★★3. サブスクリプションが無事に生成されていても、ここでresをみてみるとres.ok: falseが入っている
      if (res.ok) {
        console.log('ok')
        return true
      } else {
        return false
      }
    }
  }
}
</script>

Answer 1

他に問題がありました。