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

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

ただいまの
回答率

88.93%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 210

gatta

score 0

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

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

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

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

試したこと

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

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

コード

<script type="text/javascript">
      // Create and initialize a payment form object
      const paymentForm = new SqPaymentForm({
        // Initialize the payment form elements

        //TODO: Replace with your sandbox application ID
        applicationId: "application ID",
        inputClass: 'sq-input',
        autoBuild: false,
        // Customize the CSS for SqPaymentForm iframe elements
        inputStyles: [{
            fontSize: '16px',
            lineHeight: '24px',
            padding: '16px',
            placeholderColor: '#a0a0a0',
            backgroundColor: 'transparent',
        }],
        // Initialize the credit card placeholders
        cardNumber: {
            elementId: 'sq-card-number',
            placeholder: 'Card Number'
        },
        cvv: {
            elementId: 'sq-cvv',
            placeholder: 'CVV'
        },
        expirationDate: {
            elementId: 'sq-expiration-date',
            placeholder: 'MM/YY'
        },
        postalCode: {
            elementId: 'sq-postal-code',
            placeholder: 'Postal'
        },
        // SqPaymentForm callback functions
        callbacks: {
            /*
            * callback function: cardNonceResponseReceived
            * Triggered when: SqPaymentForm completes a card nonce request
            */
            cardNonceResponseReceived: function (errors, nonce, cardData) {
            if (errors) {
                // Log errors from nonce generation to the browser developer console.
                console.error('Encountered errors:');
                errors.forEach(function (error) {
                    console.error('  ' + error.message);
                });
                alert('Encountered errors, check browser developer console for more details');
                return;
            }
               alert(`The generated nonce is:\n${nonce}`);
               fetch('process-payment', {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                  nonce: nonce
                })
              })
              .catch(err => {
                alert('Network error: ' + err);
              })
              .then(response => {
                if (!response.ok) {
                  return response.json().then(errorInfo => Promise.reject(errorInfo)); //UPDATE HERE
                }
                return response.json(); //UPDATE HERE
              })
              .then(data => {
                console.log(data); //UPDATE HERE
                alert('Payment complete successfully!\nCheck browser developer console for more details');
              })
              .catch(err => {
                console.error(err);
                alert('Payment failed to complete!\nCheck browser developer console for more details');
              });
            }
        }
      });
      paymentForm.build();
     // onGetCardNonce is triggered when the "Pay $1.00" button is clicked
     function onGetCardNonce(event) {
       // Don't submit the form until SqPaymentForm returns with a nonce
       event.preventDefault();
       // Request a nonce from the SqPaymentForm object
       paymentForm.requestCardNonce();
     }
    </script>
const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto');
const squareConnect = require('square-connect');

const app = express();
const port = 3000;

// Set the Access Token
const accessToken = 'Access Token';

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(__dirname));

// Set Square Connect credentials and environment
const defaultClient = squareConnect.ApiClient.instance;

// Configure OAuth2 access token for authorization: oauth2
const oauth2 = defaultClient.authentications['oauth2'];
oauth2.accessToken = accessToken;

// Set 'basePath' to switch between sandbox env and production env
// sandbox: https://connect.squareupsandbox.com
// production: https://connect.squareup.com
defaultClient.basePath = 'https://connect.squareup.com';

app.post('/process-payment', async (req, res) => {
  const request_params = req.body;

  // length of idempotency_key should be less than 45
  const idempotency_key = crypto.randomBytes(22).toString('hex');

  // Charge the customer's card
  const payments_api = new squareConnect.PaymentsApi();
  const request_body = {
    source_id: request_params.nonce,
    amount_money: {
      amount: 100, // $1.00 charge
      currency: 'JPY'
    },
    idempotency_key: idempotency_key
  };

  try {
    const response = await payments_api.createPayment(request_body);
    res.status(200).json({
      'title': 'Payment Successful',
      'result': response
    });
  } catch(error) {
    res.status(500).json({
      'title': 'Payment Failure',
      'result': error.response.text
    });
  }
});

app.listen(
  port,
  () => console.log(`listening on - http://localhost:${port}`)
);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • CHERRY

    2020/07/14 23:07

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

    キャンセル

  • gatta

    2020/07/18 20:37

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

    node.jsをインストールするという考え方があっている、もしくは間違っていて他にローカル環境では作動し、本番環境では動作しない原因の見当がつく方がいらっしゃればぜひ、お力添えよろしくお願いいたします。

    キャンセル

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

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る