Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@goofmint(中津川 篤司)

PHPでSquare Eコマース決済を試す

Posted at

世の中のインターネット向けサービスの多くでPHPが使われています（2017年12月現在、83.1%がPHPとされています）。WordPressは世界中の約30%のサイトで動いているなんてレポートもあります（via W3Techs - extensive and reliable web technology surveys）。

そうしたサイトの中に決済機能を持たせたいと思ったらぜひSquare EコマースAPIを使ってみてください。今回はその使い方を紹介します。

コードは goofmint/SquareCommercePHPDemo: SquareのEコマースAPIをPHPで行うデモです。 にて公開しています。

処理の流れ

基本的な処理の流れです。Squareでは開発者がクレジットカード番号に触れないで済む仕組みを提供しています。注文処理を開始する際にまずクレジットカード情報をSquareに送信し、トークン化します（nonceと呼びます）。そのnonceと決済額を合わせて課金処理を行います。

トークン化はWebブラウザ（JavaScript）で行います。PHP側ではnonceを受け取り、課金処理を行うだけです。

nonce生成

まずnonce生成について紹介します。HTMLは次のような形になります。 #card-nonce に取得したnonceが入ります。フォームの送信先は process-card.php になっていますが、ボタンを押した時にまず requestCardNonce(event) が実行されます。

このフォームの時点ではクレジットカード情報を入力する input タグがありません。後述するJavaScriptによって生成されます。

<form id="nonce-form" novalidate action="/process-card.php" method="post">
  カードで支払います
  <table><tbody>
    <tr>
      <td>カード番号:</td>
      <td><div id="sq-card-number"></div></td>
    </tr>
    <tr>
      <td>CVV:</td>
      <td><div id="sq-cvv"></div></td>
    </tr>
    <tr>
      <td>有効期限:</td>
      <td><div id="sq-expiration-date"></div></td>
    </tr>
    <tr>
      <td>郵便番号:</td>
      <td><div id="sq-postal-code"></div></td>
    </tr>
    <tr>
      <td colspan="2">
        <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">
          カードで支払う
        </button>
      </td>
    </tr>
  </tbody></table>
  <input type="hidden" id="card-nonce" name="nonce">
</form>

もし、MasterpassやApple Payを使う場合には、さらに次のように記述しておきます。

<div id="sq-walletbox">
  デジタル通貨で支払う
  <div id="sq-apple-pay-label" class="wallet-not-enabled">Apple Pay for Web が有効ではありません</div>
  <button id="sq-apple-pay" class="button-apple-pay"></button>

  <div id="sq-masterpass-label" class="wallet-not-enabled">Masterpassが有効ではありません</div>
  <button id="sq-masterpass" class="button-masterpass"></button>
</div>

Square決済フォームの表示

Squareの決済フォームを表示するには、まずスクリプトタグで以下のJavaScriptを読み込みます。

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

次にJavaScriptファイルを作成し、それを読み込みます。

<script type="text/javascript" src="/sqpaymentform.js"></script>

sqpaymentform.js の内容は次のようになります。詳細はコメントを参照してください。二箇所 REPLACE_ME となっている部分があるので、それは Square Developer Portal で取得できるものと置き換えてください。

var applicationId = "REPLACE_ME"; // アプリケーションIDと置き換えます
var locationId = "REPLACE_ME";    // 店舗IDと置き換えます

// ボタンを押したタイミングで実行される関数
function requestCardNonce(event) {
  event.preventDefault();
  paymentForm.requestCardNonce();
}

var paymentForm = new SqPaymentForm({
  // 以下は初期設定です
  applicationId: applicationId,
  locationId: locationId,
  inputClass: 'sq-input',
  inputStyles: [{
      fontSize: '.9em'
  }],

  // Apple Pay用
  applePay: {
    elementId: 'sq-apple-pay'
  },

  // MasterPass用
  masterpass: {
    elementId: 'sq-masterpass'
  },

  // クレジットカード情報のプレイスホルダー
  cardNumber: {
    elementId: 'sq-card-number',
    placeholder: '•••• •••• •••• ••••'
  },
  cvv: {
    elementId: 'sq-cvv',
    placeholder: 'CVV'
  },
  expirationDate: {
    elementId: 'sq-expiration-date',
    placeholder: 'MM/YY'
  },
  postalCode: {
    elementId: 'sq-postal-code'
  },

  // 各種コールバック
  callbacks: {
    
    // Apple Pay / MasterPassの有効/無効チェック
    methodsSupported: function (methods) {
      var applePayBtn = document.getElementById('sq-apple-pay');
      var applePayLabel = document.getElementById('sq-apple-pay-label');
      var masterpassBtn = document.getElementById('sq-masterpass');
      var masterpassLabel = document.getElementById('sq-masterpass-label');
      // Apple Payが有効だったら表示する
      if (methods.applePay === true) {
        applePayBtn.style.display = 'inline-block';
        applePayLabel.style.display = 'none' ;
      }
      // Masterpassが有効だったら表示する
      if (methods.masterpass === true) {
        masterpassBtn.style.display = 'inline-block';
        masterpassLabel.style.display = 'none';
      }
    },

    createPaymentRequest: function () {
    },
    // nonce 生成後に呼ばれるメソッド
    cardNonceResponseReceived: function(errors, nonce, cardData) {
      if (errors) {
        // エラーがあった場合
        console.log("エラーが発生しました。:");
        errors.forEach(function(error) {
          console.log('  ' + error.message);
        });
        return;
      }
      // nonceの値をhiddenの中に入れます
      document.getElementById('card-nonce').value = nonce;
      // 本来のフォームを送信します
      document.getElementById('nonce-form').submit();
    },
    // サポート外のぶらず艶アクセ視した場合
    unsupportedBrowserDetected: function() {
    },
    // イベントハンドリング
    inputEventReceived: function(inputEvent) {
    },
    // フォームを読み込んだ後のコールバック
    paymentFormLoaded: function() {
    }
  }
});

フォームを読み込む

後は最低限のデザインを整えるCSSを読み込みます。

/* Define how SqPaymentForm iframes should look */
.sq-input {
  border: 1px solid rgb(223, 223, 223);
  outline-offset: -2px;
  margin-bottom: 5px;
  display: inline-block;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
  outline: 5px auto rgb(59, 153, 252);
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  outline: 5px auto rgb(255, 97, 97);
}

/* Customize the "Pay with Credit Card" button */
.button-credit-card {
  min-width: 200px;
  min-height: 20px;
  padding: 0;
  margin: 5px;
  line-height: 20px;
  box-shadow: 2px 2px 1px rgb(200, 200, 200);
  background: rgb(255, 255, 255);
  border-radius: 5px;
  border: 1px solid rgb(200, 200, 200);
  font-weight: bold;
  cursor:pointer;
}


/* Customize the "{{Wallet}} not enabled" message */
.wallet-not-enabled {
  min-width: 200px;
  min-height: 40px;
  max-height: 64px;
  padding: 0;
  margin: 10px;
  line-height: 40px;
  background: #eee;
  border-radius: 5px;
  font-weight: lighter;
  font-style: italic;
  font-family: inherit;
  display: block;
}

/* Customize the Apple Pay on the Web button */
.button-apple-pay {
  min-width: 200px;
  min-height: 40px;
  max-height: 64px;
  padding: 0;
  margin: 10px;
  background-image: -webkit-named-image(apple-pay-logo-white);
  background-color: black;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 5px;
  cursor:pointer;
  display: none;
}

/* Customize the Masterpass button */
.button-masterpass {
  min-width: 200px;
  min-height: 40px;
  max-height: 40px;
  padding: 0;
  margin: 10px;
  background-image: url(https://static.masterpass.com/dyn/img/btn/global/mp_chk_btn_147x034px.svg);
  background-color: black;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 5px;
  border-color: rgb(255, 255, 255);
  cursor:pointer;
  display: none;
}

#sq-walletbox {
  float:left;
  margin:5px;
  padding:10px;
  text-align: center;
  vertical-align: top;
  font-weight: bold;
}

#sq-ccbox {
  float:left;
  margin:5px;
  padding:10px;
  text-align: center;
  vertical-align: top;
  font-weight: bold;
}

これで画面が完成です。

process-card.php の修正

実際に決済処理を行う process-card.php では以下の行を修正します。これは Square Developer Portal で取得できるアクセストークンと置き換えるだけです。本番であれば Personal Access Token の値を、開発環境であればサンドボックスのアクセストークン Sandbox Access Token を使います。

// 元
$access_token = 'REPLACE_ME';
// 修正後
$access_token = 'sandbox-sq0...ZBQ';

実際の決済処理は以下のコードで行われています。

$transactions_api = new \SquareConnect\Api\TransactionsApi();

$request_body = array (
  "card_nonce" => $nonce,
  "amount_money" => array (
    "amount" => 100,
    "currency" => "JPY"
  ),
  "idempotency_key" => uniqid()
);

$result = $transactions_api->charge($location->getId(), $request_body);
echo "<pre>";
print_r($result);
echo "</pre>";

試す

では実際に試してみます。以下のコマンドで簡易的なPHPアプリケーションサーバが http://localhost:8080/ で立ち上がります。

$ php -S localhost:8080

Webブラウザで http://localhost:8080/ を開いて、以下の情報を入力してみましょう。

名前 値
カード番号 4532759734545858
有効期限 12/20
CVV 111
郵便番号 111111

カードで支払うボタンを押すと、まずSquareのサーバにクレジットカード情報が送信されて、代わりに nonce を受け取ります。そして、そのまま nonce をPHPへ送信して決済処理を実行します。

特に問題がなければTransactionオブジェクトのダンプが表示されます。

このような手順でPHP向けのWebアプリケーションに決済処理を追加できます。Webフォームのデザインは自由に設計できますので、既存のサービスに組み込んでも違和感なく使えるはずです。実装例としては、例えばWordPressにEコマース機能を追加する WooCommerce — WordPress プラグイン があります。こちらを使うと簡単にSquareの決済機能が使えるようになります。ぜひ試してみてください。

今回のコードは goofmint/SquareCommercePHPDemo: SquareのEコマースAPIをPHPで行うデモです。 にて公開しています。もし試してみて分からないところがあれば Teratail にて質問してください！

Build with Square

9
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?