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

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

新規登録して質問してみよう
ただいま回答率
85.37%
Square

Squareは独自のカードリーダーを使ってスマートフォンやタブレットにクレジットカード決済機能を提供します。レジアプリはiOS/AndroidアプリやモバイルWebサイトとAPI連携できます。その他、Webサイト向けの決済APIや商品、顧客管理APIも提供しています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

2002閲覧

決済システムSquareのAPIが本番環境で動作しない

gatta

総合スコア0

Square

Squareは独自のカードリーダーを使ってスマートフォンやタブレットにクレジットカード決済機能を提供します。レジアプリはiOS/AndroidアプリやモバイルWebサイトとAPI連携できます。その他、Webサイト向けの決済APIや商品、顧客管理APIも提供しています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/07/14 13:09

編集2020/07/14 13:24

決済システムSquareのAPIについて

現在、自身のサイトに決済システムSquareを導入しようと考えており、APIを学習しています。
公式のドキュメントを見ながら進めたところ、localhostでは、実際のカードを使った決済が完了しましたが、本番環境(お名前.comにてワードプレス使用)では、エラーとなってしまいます。

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

SyntaxError: Unexpected token < in JSON at position 0 恐らくtokenとは、アクセストークンのことを指しているのだと思います。

試したこと

公式のドキュメントでは、localhostにnode.jsをインストールして環境構築をしました。
server.jsというファイルに、アクセストークンのコードがあるので、server.jsのファイルをサーバーにアップロードしないといけないと考えていますが、local環境と同様に、他のファイルと同じディレクトリにアップロードしても機能しません。

ローカル環境では動作するものが、本番環境では動作しない原因など、もし見当つく方がいればご回答お願いいたします。

コード

index.html

1<script type="text/javascript"> 2 // Create and initialize a payment form object 3 const paymentForm = new SqPaymentForm({ 4 // Initialize the payment form elements 5 6 //TODO: Replace with your sandbox application ID 7 applicationId: "application ID", 8 inputClass: 'sq-input', 9 autoBuild: false, 10 // Customize the CSS for SqPaymentForm iframe elements 11 inputStyles: [{ 12 fontSize: '16px', 13 lineHeight: '24px', 14 padding: '16px', 15 placeholderColor: '#a0a0a0', 16 backgroundColor: 'transparent', 17 }], 18 // Initialize the credit card placeholders 19 cardNumber: { 20 elementId: 'sq-card-number', 21 placeholder: 'Card Number' 22 }, 23 cvv: { 24 elementId: 'sq-cvv', 25 placeholder: 'CVV' 26 }, 27 expirationDate: { 28 elementId: 'sq-expiration-date', 29 placeholder: 'MM/YY' 30 }, 31 postalCode: { 32 elementId: 'sq-postal-code', 33 placeholder: 'Postal' 34 }, 35 // SqPaymentForm callback functions 36 callbacks: { 37 /* 38 * callback function: cardNonceResponseReceived 39 * Triggered when: SqPaymentForm completes a card nonce request 40 */ 41 cardNonceResponseReceived: function (errors, nonce, cardData) { 42 if (errors) { 43 // Log errors from nonce generation to the browser developer console. 44 console.error('Encountered errors:'); 45 errors.forEach(function (error) { 46 console.error(' ' + error.message); 47 }); 48 alert('Encountered errors, check browser developer console for more details'); 49 return; 50 } 51 alert(`The generated nonce is:\n${nonce}`); 52 fetch('process-payment', { 53 method: 'POST', 54 headers: { 55 'Accept': 'application/json', 56 'Content-Type': 'application/json' 57 }, 58 body: JSON.stringify({ 59 nonce: nonce 60 }) 61 }) 62 .catch(err => { 63 alert('Network error: ' + err); 64 }) 65 .then(response => { 66 if (!response.ok) { 67 return response.json().then(errorInfo => Promise.reject(errorInfo)); //UPDATE HERE 68 } 69 return response.json(); //UPDATE HERE 70 }) 71 .then(data => { 72 console.log(data); //UPDATE HERE 73 alert('Payment complete successfully!\nCheck browser developer console for more details'); 74 }) 75 .catch(err => { 76 console.error(err); 77 alert('Payment failed to complete!\nCheck browser developer console for more details'); 78 }); 79 } 80 } 81 }); 82 paymentForm.build(); 83 // onGetCardNonce is triggered when the "Pay $1.00" button is clicked 84 function onGetCardNonce(event) { 85 // Don't submit the form until SqPaymentForm returns with a nonce 86 event.preventDefault(); 87 // Request a nonce from the SqPaymentForm object 88 paymentForm.requestCardNonce(); 89 } 90 </script>

server.js

1const express = require('express'); 2const bodyParser = require('body-parser'); 3const crypto = require('crypto'); 4const squareConnect = require('square-connect'); 5 6const app = express(); 7const port = 3000; 8 9// Set the Access Token 10const accessToken = 'Access Token'; 11 12app.use(bodyParser.json()); 13app.use(bodyParser.urlencoded({ extended: false })); 14app.use(express.static(__dirname)); 15 16// Set Square Connect credentials and environment 17const defaultClient = squareConnect.ApiClient.instance; 18 19// Configure OAuth2 access token for authorization: oauth2 20const oauth2 = defaultClient.authentications['oauth2']; 21oauth2.accessToken = accessToken; 22 23// Set 'basePath' to switch between sandbox env and production env 24// sandbox: https://connect.squareupsandbox.com 25// production: https://connect.squareup.com 26defaultClient.basePath = 'https://connect.squareup.com'; 27 28app.post('/process-payment', async (req, res) => { 29 const request_params = req.body; 30 31 // length of idempotency_key should be less than 45 32 const idempotency_key = crypto.randomBytes(22).toString('hex'); 33 34 // Charge the customer's card 35 const payments_api = new squareConnect.PaymentsApi(); 36 const request_body = { 37 source_id: request_params.nonce, 38 amount_money: { 39 amount: 100, // $1.00 charge 40 currency: 'JPY' 41 }, 42 idempotency_key: idempotency_key 43 }; 44 45 try { 46 const response = await payments_api.createPayment(request_body); 47 res.status(200).json({ 48 'title': 'Payment Successful', 49 'result': response 50 }); 51 } catch(error) { 52 res.status(500).json({ 53 'title': 'Payment Failure', 54 'result': error.response.text 55 }); 56 } 57}); 58 59app.listen( 60 port, 61 () => console.log(`listening on - http://localhost:${port}`) 62);

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

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

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

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

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

CHERRY

2020/07/14 14:07

質問に書かれている内容であれば、実行する環境に node.js をインストールして環境構築する必要があると思いますが、リモート環境にもローカル環境と同じように node.js をインストールしたのでしょうか?
gatta

2020/07/18 11:37

遅くなりまして申し訳ありません。 こちらで、質問する前に、知り合いに聞いたところ、node.jsは必要ないのではないか、もしくは安い共用サーバーでは、node.jsをインストールできないのではないかと言われました。 彼もエンジニア職ではなく、デザイナーなので詳しいアドバイスまでは受けれませんでしたが、自分より経験があるので、そういうものなのかと感じておりました。 また、お名前.comにnode.jsをインストールしたという記事も見当たらなかったため、node.jsをインストールするという考えが間違っているのではないかなと思い、こちらで質問した次第です。 node.jsをインストールするという考え方があっている、もしくは間違っていて他にローカル環境では作動し、本番環境では動作しない原因の見当がつく方がいらっしゃればぜひ、お力添えよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問