決済システム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);
あなたの回答
tips
プレビュー