質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1275閲覧

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

Tatsunosuke

総合スコア599

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/03 03:24

前提・実現したいこと

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});

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問