前提・実現したいこと

現在自分で作っているWEBサービス内にカード決済を導入したく進めているのですが、
独学のため基礎的な知識不足を感じています。

vueを使用して、一通りのサービスは作成できたのですが、
今回のpayjjp側のサーバサイドに記述するようにいう意味がよくわからず困っております。

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

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

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

[リファレンス]
(https://pay.jp/docs/api/#%E6%94%AF%E6%89%95%E3%81%84%E3%82%92%E4%BD%9C%E6%88%90)
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では必須
});

該当のソースコード

<template>
  <v-app>
    <v-form ref="form" v-model="valid">
      <v-card>
        <v-row>
          <v-col cols="10" class="mx-auto">
            <v-text-field
              label="カード番号"
              required
              v-model="card.number"
            ></v-text-field>
            <v-text-field
              label="cvc"
              required
              v-model="card.cvc"
            ></v-text-field>
            <v-text-field
              label="月"
              required
              v-model="card.exp_month"
            ></v-text-field>
            <v-text-field
              label="年"
              required
              v-model="card.exp_year"
            ></v-text-field>
            <v-card-actions>
              <v-btn @click="createToken">createToken</v-btn>
             <v-btn @click="order">注文</v-btn>
            </v-card-actions>
          </v-col>
        </v-row>
      </v-card>
    </v-form>
  </v-app>
</template>

<script>
var token = "";
var sKey = "sk_test_***";

export default {

  data: () => ({
    valid: true,
    token: token,
    price: "",
    temp: "",
    card: {
      number: "4242424242424242",
      cvc: "123",
      exp_month: "12",
      exp_year: "2020",
    },
  }),
  methods: {
    order() {
      const payjp = require("payjp")(sKey);
      payjp.charges
        .create({
          amount: 1000,
          currency: "jpy",
          card: token,
        })
        .then(console.log)
        .catch(console.error);
    },

    createToken() {
      /* eslint-disable*/
      Payjp.createToken(this.card, function(status, response) {
        /* eslint-enable*/
        if (status === 200) {
          token = response.id;
        } else {
          console.log(status);
          console.log(response);
        }
      });
    },
  },
  mounted() {
    Payjp.setPublicKey("pk_test_***"); // 
  },
};
</script>

});

試したこと

サポートセンター問い合わせ
=>秘密鍵が設定できていないことが原因なので、設定してください。
=>支払い処理はサーバーサイドで行う必要があります。
との返答でした。

僕の知識が足りていないので理解できていないのですが、
今回の決済用のプロジェクトとは別に処理用のnodeプロジェクトを準備して決済時には処理用のプロジェクトへ投げるということなのでしょうか？

最初ローカルサーバー内でテストしていたのですが、httpsでなければNGということだったので、
firebase hostingを使用してみたが、同様のエラーが発生する。

予算

一度ご提案いただけると助かります。