square決済フォームサンプル（js + php + Wordpress）

このサンプルはWordpress環境における、pure JavaScript と phpを利用したsquareの決済フォームサンプルです。
※テスト購入するためのSandboxとしてサンプルコード

あくまでもサンプルですので、取り扱いは自己責任でお願いいたします。
セキュリティ面なども気をつけてください✨

このコードを元に、ChatGPTなどに質問しながら制作を進めれば、スムーズに進めることができると思います。

ステップ１：Composerのインストール

Windows:

1. Composerの公式ウェブサイト（getcomposer.org）からWindows用のインストーラーをダウンロードします。

2. ダウンロードしたファイルを実行し、指示に従ってインストールします。

3. コマンドプロンプトを開き、composerコマンドが動作することを確認します。

macOS/Linux:

1. ターミナルを開きます。

2. 以下のコマンドを実行してComposerをインストールします：

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
chmod +x /usr/local/bin/composer

3.composer コマンドが動作することを確認します。

ステップ２：Composerを使ってSquare SDKをプロジェクトに追加

1. ターミナルまたはコマンドプロンプトを開きます。

2. プロジェクトディレクトリがまだ存在しない場合は、作成します：

mkdir my-square-project
cd my-square-project

3.Composerを使ってSquare SDKをインストールします：

composer require square/square

これにより、vendor ディレクトリがプロジェクト内に作成され、必要なライブラリがすべてインストールされます。composer.json ファイルと composer.lock ファイルも作成され、これによりどのライブラリがどのバージョンであるかが記録されます。

require 'vendor/autoload.php';

$client = new \Square\SquareClient([
    'accessToken' => 'アクセストークンをここに',
    'environment' => \Square\Environment::SANDBOX  // または \Square\Environment::PRODUCTION
]);

このコードスニペットは、Square APIにアクセスするためのクライアントインスタンスを作成します。これを使用して、支払いの処理や顧客情報の管理など、さまざまなAPI呼び出しを行うことができます。

これで、ComposerとSquare SDKを設定する基本的な手順が完了しました。

ステップ3：フロント（html + js）を制作

<?php get_header(); ?>
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>


<h1>支払いフォーム</h1>
<div id="card-container"></div>
<button id="card-button">支払う</button>

<script>
    async function initializeCard(payments) {
        const card = await payments.card();
        await card.attach('#card-container');
        return card;
    }

    async function createPayment(token) {
    const response = await fetch('ここにサーバーサイドのURL', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ nonce: token })  // ここで 'token' を 'nonce' としてJSONにセット
    });

    if (response.ok) {
        console.log('Payment successful!');
        alert('支払いが成功しました！');
    } else {
        const errorResponse = await response.json();
        console.error('Payment failed.', errorResponse);
        alert('支払いに失敗しました。エラー: ' + errorResponse.message);
    }
}


    document.addEventListener('DOMContentLoaded', async function() {
        if (!window.Square) {
            console.error('Square.js failed to load properly');
            alert('Square.jsの読み込みに失敗しました。');
            return;
        }

        const payments = Square.payments('あなたのSandbox Application ID', 'あなたの Location ID');
        const card = await initializeCard(payments);

        document.getElementById('card-button').addEventListener('click', async function(event) {
            event.preventDefault();
            try {
                const result = await card.tokenize();
                if (result.status === 'OK') {
                    await createPayment(result.token);
                } else {
                    console.error('Tokenization failed:', result.errors);
                    alert('カードのトークン化に失敗しました。');
                }
            } catch (error) {
                console.error('Payment failed', error);
                alert('支払い処理中にエラーが発生しました。');
            }
        });
    });
</script>
<?php get_footer(); ?>

ステップ４：サーバーサイド（PHP）を制作

<?php
// JSON形式でデータを受け取る
$data = json_decode(file_get_contents('php://input'), true);
$nonce = $data['nonce'] ?? null;  // nonceの安全な取り出し

if (!$nonce) {
    http_response_code(400);
    echo 'エラー: トークンがありません。';
    error_log('Error: No token provided');
    exit;
}
require_once(__DIR__.'/../../../../wp-load.php');//ここはファイルの場所によってパスを変更してください
require __DIR__.'../../vendor/autoload.php';//ここはファイルの場所によってパスを変更してください

$client = new \Square\SquareClient([
    'accessToken' => 'あなたの Sandbox Access token',
    'environment' => \Square\Environment::SANDBOX
]);

$paymentsApi = $client->getPaymentsApi();
$reference_id = is_user_logged_in() ? wp_get_current_user()->ID : "Guest-" . uniqid();

$amountMoney = new \Square\Models\Money();
$amountMoney->setAmount(3000); // 金額の設定
$amountMoney->setCurrency("JPY"); // 通貨の設定

$idempotency_key = uniqid('idemp_');

// コンストラクタに必要な引数を渡す
$createPaymentRequest = new \Square\Models\CreatePaymentRequest($nonce, $idempotency_key);
$createPaymentRequest->setAmountMoney($amountMoney); // amount_moneyのセット
$createPaymentRequest->setReferenceId($reference_id); // reference_idのセット

$apiResponse = $paymentsApi->createPayment($createPaymentRequest);

if ($apiResponse->isSuccess()) {
    $payment = $apiResponse->getResult()->getPayment();
    echo '支払い成功！ Transaction ID: ' . $payment->getId();
} else {
    $errors = $apiResponse->getErrors();
    http_response_code(400);
    echo '支払いエラー: ';
    foreach ($errors as $error) {
        echo '<p>Error: ' . htmlspecialchars($error->getDetail()) . '</p>';
        error_log('Payment error: ' . $error->getDetail());
    }
}

?>

本番決済にする場合

デモ決済ではなく、本番決済に切り替える場合は下記の２点を本番用に変更してください。

認証用のidなどを本番用に変更

・Application ID
・Access token
・Location ID

フロントサイトのCDNを本番ように変更

<!-- デモ用 -->
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>

<!-- 本番用 -->
<script src="https://web.squarecdn.com/v1/square.js"></script>

サーバーサイドのアクセストークンの部分

// デモ用
$client = new \Square\SquareClient([
    'accessToken' => 'あなたのデモ用アクセストークン',
    'environment' => \Square\Environment::SANDBOX
]);

// 本番用
$client = new \Square\SquareClient([
    'accessToken' => 'あなたの本番用アクセストークン',
    'environment' => \Square\Environment::PRODUCTION
]);