[vue]payjpのトークン取得後、支払いを作成するとエラーが出る。

前提・実現したいこと

payjpを利用してカード決済を実装したい。

現在payjp内のガイドに沿ってカードトークンの取得まではできており、
APIリファレンスに沿って進めているのですが、支払いを作成のところで躓いています。

お分かりになる方いらっしゃればアドバイスいただければ助かります。

リファレンス
payjp-nodeをインストール後、
このリファレンスにある支払いを作成の内容をvue内のmethodで実行したところ
エラーが発生します。

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

Access to XMLHttpRequest at 'https://api.pay.jp/v1/charges' from origin 'https://※※※.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

https://api.pay.jp/v1/chargeにアクセスしたところ、

{
  "error": {
    "message": "You did not provide an API key. You need to provide your API key in the Authorization header, using Basic auth (e.g. 'Authorization: YOUR_SECRET_KEY').",
    "status": 401,
    "type": "auth_error"
  }
}

が、返ってきています。

秘密鍵がうまくapi側へ渡せていないことが原因だと思うのですが、そもそもリファレンス内のコード(以下)をvueのmethodsから実行することがあっているのかわかりません。

const payjp = require('payjp')('sk_test_c62fade9d045b54cd76d7036');
payjp.charges.create({
  card: 'tok_76e202b409f3da51a0706605ac81',
  amount: 3500,
  currency: 'jpy',
  // tenant: "ten_xxx" // PAY.JP Platformでは必須
});

該当のソースコード

vue
1<template>
2  <v-app>
3    <v-form ref="form" v-model="valid">
4      <v-card>
5        <v-row>
6          <v-col cols="10" class="mx-auto">
7            <v-text-field
8              label="カード番号"
9              required
10              v-model="card.number"
11            ></v-text-field>
12            <v-text-field
13              label="cvc"
14              required
15              v-model="card.cvc"
16            ></v-text-field>
17            <v-text-field
18              label="月"
19              required
20              v-model="card.exp_month"
21            ></v-text-field>
22            <v-text-field
23              label="年"
24              required
25              v-model="card.exp_year"
26            ></v-text-field>
27            <v-card-actions>
28              <v-btn @click="createToken">createToken</v-btn>
29             <v-btn @click="order">注文</v-btn>
30            </v-card-actions>
31          </v-col>
32        </v-row>
33      </v-card>
34    </v-form>
35  </v-app>
36</template>
37
38<script>
39var token = "";
40var sKey = "sk_test_***";
41
42export default {
43
44  data: () => ({
45    valid: true,
46    token: token,
47    price: "",
48    temp: "",
49    card: {
50      number: "4242424242424242",
51      cvc: "123",
52      exp_month: "12",
53      exp_year: "2020",
54    },
55  }),
56  methods: {
57    order() {
58      const payjp = require("payjp")(sKey);
59      payjp.charges
60        .create({
61          amount: 1000,
62          currency: "jpy",
63          card: token,
64        })
65        .then(console.log)
66        .catch(console.error);
67    },
68
69    createToken() {
70      /* eslint-disable*/
71      Payjp.createToken(this.card, function(status, response) {
72        /* eslint-enable*/
73        if (status === 200) {
74          token = response.id;
75        } else {
76          console.log(status);
77          console.log(response);
78        }
79      });
80    },
81  },
82  mounted() {
83    Payjp.setPublicKey("pk_test_***"); // 
84  },
85};
86</script>
87
88});