Stripe API がうまく取得できない

Question

前提

Vue.js、Stripe を使用して支払いシステムを開発しています。

開発中にエラーが発生しました。

実現したいこと

Stripe API を取得したい

発生している問題・エラーメッセージ

Stripe: Unknown arguments ([object Object]). Did you mean to pass an options object? See https://github.com/stripe/stripe-node/wiki/Passing-Options. (on API request to GET `/charges/{charge}`)

該当のソースコード

vueファイルのスクリプト部分です。

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe'
// import Stripe from 'stripe'

export default {
  props: ['documentId', 'isLoggedIn'],
  components: {
    StripeCheckout
  },
  data () {
    this.publishableKey = 'pk_test_xxxxxxxxxxxxxxxxx'
    return {
      loading: false,
      lineItems: [
        {
          price: 'price_xxxxxxxx', // The id of the one-time price you created in your Stripe dashboard
          quantity: 1
        }
      ],
      successURL: `${location.protocol}//${location.host}/event-detail/${this.documentId}?${this.isLoggedIn}`,
      cancelURL: 'https://www.google.com/?hl=ja'
    }
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout()
    }
  },
  computed: {
    currentUser () {
      return this.$store.getters.cuurentUser
    }
  },
  created () {
    const Stripe = require('stripe')
    const stripe = Stripe('sk_test_xxxxxxxxxxxx')

    var charge = stripe.charges.retrieve(
      'ch_xxxxxxxx',
      {
        apiKey: 'sk_test_xxxxxxxxxxxx'
      }
    )
    charge.then((result) => {
      console.log(result)
    }).catch((error) => {
      //////////////////////   ここでエラー
      console.log(error.message)
    })
  }
}
</script>

回答よろしくお願いします。

Answer 1

ドキュメントを見ると

const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');

const charge = await stripe.charges.retrieve(
  'ch_3LE7uI2eZvKYlo2C0dmZLshs'
);

ってあるから、真似して書いたらだめなんでしょうか。
const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');で既にapiKeyを与えてあるから、
stripe.charges.retrieve()の時点で改めて与える必要はなさそうに読めましたが。

Comments

[kwtkwt]

回答ありがとうございます！
下記のようにしてみましたが、undefinde が返ってきてやはりだめです。。

```js
const stripe = require('stripe')('sk_test_51Ko2ckHIT4Uh5KIjMl6QaZbOosPxcRIhRkSLi79cabV4b8HlMaHcpuQS99qSXrgCoh6hpfhpQCv7OxnusSzYPxDK00yPi6pB15')

const charge = stripe.charges.retrieve(
'ch_3KpoVtHIT4Uh5KIj0Z8gfMhT'
)
console.log(charge)
```

```log
Promise {<pending>}[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "pending"[[PromiseResult]]: undefined
```

[退会済みユーザー]

await わすれてるゾ

[kwtkwt]

await を入れると下記のようになってしまいます。。

Syntax Error: await is a reserved word (67:19)

こちらの原因は分かりますでしょうか？

[退会済みユーザー]

Vue.jsっていう関係だと、こちらのドキュメントでわかるでしょうか。
Vue.jsでのasync,awaitの書き方 - Qiita https://qiita.com/NT1123/items/d1051d360e1b1f9174ab
たぶん、
async created () {
にするんじゃないかな。

[kwtkwt]

ありがとうございます！
Syntax Error: await is a reserved word (67:19) は消えましたがだめでした...
ログの結果は console.log('⭐️')　のみで以降は動作しません...

```html
<button @click="stripe()">Stripe</button>
```

```js
stripe: async function () {
console.log('⭐️')
const stripe = require('stripe')('sk_test_51Ko2ckHIT4Uh5KIjMl6QaZbOosPxcRIhRkSLi79cabV4b8HlMaHcpuQS99qSXrgCoh6hpfhpQCv7OxnusSzYPxDK00yPi6pB15')
const prices = await stripe.prices.list()

console.log('⭐️⭐️')
console.log(prices)

prices.then((result) => {
console.log('⭐️⭐️⭐️')
console.log(result)
}).catch((error) => {
console.log(error)
})
}
```