【Vue.js】Stripe API が取得できない。

Question

前提

Vue でサブスクリプションを実装しようとしています。

実現したいこと

サブスクを実装するにあたり、Stripe APIを取得したい。

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

Promise の戻りが undefined になる。

該当のソースコード

created () {
    const stripe = require('stripe')('sk_test_51Ko2ckHIT4Uh5KIjMl6QaZbOosPxcRIhRkSLi79cabV4b8HlMaHcpuQS99qSXrgCoh6hpfhpQCv7OxnusSzYPxDK00yPi6pB15')
    const prices = stripe.prices.list()
    console.log(prices)
 }

Promise {<pending>, autoPagingEach: ƒ, autoPagingToArray: ƒ, next: ƒ, …}
autoPagingEach: ƒ autoPagingEach(/* onItem?, onDone? */)
autoPagingToArray: ƒ autoPagingToArray(opts, onDone)
next: ƒ asyncIteratorNext()
return: () => {…}
Symbol(Symbol.asyncIterator): () => { return autoPaginationMethods; }
[[Prototype]]: Promise
[[PromiseState]]: "pending"

// ここで undefined が返ってきているので、取得できてないことがわかる。
[[PromiseResult]]: undefined

試したこと

こちらのStripe API の仕様書のとおり実装してみましたが、取得できません...
https://stripe.com/docs/api/prices/list

補足情報（FW/ツールのバージョンなど）

"stripe": "^9.9.0",
"vue": "^2.5.2",

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

Answer 1

sk_はシークレットキー。
シークレットなんだから公開できない。
フロントのVue.jsで使ったら公開される。
だからそれはフロントのJSからは使えないAPI。

ドキュメントにも「Node.js」としか書かれてない。
JSで書かれてもサーバーサイドから使うAPI。

こんな基本を理解してない初心者がStripeなんて絶対に使ってはいけない。

Comments

[退会済みユーザー]

文法しか見てなかった、余計な助言をしてしまいましたでしょうか。
Vueだと、@vue-stripe/vue-stripe を使うんですかね。

[kwtkwt]

回答ありがとうございます。

https://vuestripe.com/stripe-checkout/recurring-payment/

Vue Stripe というものが用意されているので、使ってはいけないという事はない思います。
ただこちらを使用すると、サブスクのキャンセル処理ができなかったため、APIを使用してみようと思いました。

[退会済みユーザー]

トランスパイルされたあとのJSファイルに、シークレットキーが出現していないことを、念の為に確認したら安心できますね。

Answer 2

ドキュメントによると、

const prices = stripe.prices.list()

じゃなくて

const prices = await stripe.prices.list()

じゃないんですか？

Comments

[kwtkwt]

回答ありがとうございます！！

const prices = await stripe.prices.list()

にすると下記のようなエラーがでてしまいます。。

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

[退会済みユーザー]

あっちの回答のコメントにも書いたので、ヨロシク

[kwtkwt]

同じ方でしたか！笑
ありがとうございます！