Square決済触ってみる 2 ~ Web Payments SDKサンプル

Square決済を導入するにあたり

いろいろ試しているが Quick Pay Checkout はなんだか出来た。

だが、なんか違うので Web Payments SDK というのを試そうと思った。

こちらにサンプルプロジェクトがおいてあったのでまずはそちらを動作させてみようと思う。

square/web-payments-quickstart: Quickstart for using Square's Web Payments SDK

とりあえず進めていく

「Web Payments Quickstart」という項目があるのでそこに沿って進めていく。

開発環境をWindowsに変えたばかりでまだ node.js も導入していなかった(笑)

そこから。

.env.example をコピーし .env.sandbox を作る。

中に

SQUARE_ACCESS_TOKEN=

とだけ書いてあるのでそこを開発モードのダッシュボードから application 先日作った sandbox を選択し次のページにある Access token をコピーして入力する。※Show リンクを押すと出ます。

SQUARE_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

という感じにして

もういいのかな?

GitHub の解説にあったとおりコマンドでテストサーバー起動する。

おお、なんか起動した。これで動けば簡単すぎるね(笑)

アクセスしたらこんな感じ。なんか関係ありそうなやつをクリックしてみる。

まあ普通に「Card Payment」かな。

それっぽい画面が出た。

出たは出たが、なんだこの×は?

applicationId and/or locationId is incorrect

どゆことw

先ほど設定したアクセストークン以外にも設定が必要そうだった。

確認したら、まぁそりゃそうなんだけど、サンプルの html がこんな記述になっていた。

<!doctype html>
<html>
  <head>
    <link href="/app.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="https://sandbox.web.squarecdn.com/v1/square.js"
    ></script>
    <script>
      const appId = '{APPLICATION_ID}';
      const locationId = '{LOCATION_ID}';

この各サンプルのhtmlにあるこの部分 {APPLICATION_ID} と {LOCATION_ID} は変える必要があるっぽい。

まあサンプルコードだしね。本番はそこは何かから引っ張ってくるわけだから。

まあ問題ない。変更しました。

APPLICATION_ID と LOCATION_ID はこちらの記事でどこにあるか書きました。

書き換えたらリロードしてみる。テストサーバーはなにかが書き換わったら自動的に更新されるっぽい。便利。

おお。なんか出た。

これでカード番号入れてみる。

いつもの 4242 4242 4242 4242 を入れてみたがダメだったw

SquareにはSquare用のテストカード番号があるらしい。

Sandbox Payments ここに書いてあった。

とりあえず普通に通りそうなこれをやってみる。

BrandNumberCVV
Visa4111 1111 1111 1111111
Sandbox Payments より抜粋

あれ? Payment failed って。なによwなんなのよw

ダッシュボードでログを確認してみる。

Squareダッシュボードの API Log にアクセスしたらエラー(2回)発見。

その以前の Payment Links で成功しているのも確認できた。

最新のものをクリックしてみる。

この上に application_id やら location_id やら access_token やらあるんですが、その下だけ抜粋。

Error code が BAD_REQUEST なのはわかるけど…

上記は Summary でそのほか Request と Response のタブがあるので Response を確認した。

あれ? location_id がダメ?っていうことらしい。

ちょっとユーザー変えてみた Default Test User のものを使ってみる。

するとエラーが変わった。(なぜ変わったかはちょっと置いておく)

"errors": [
    {
      "code": "INVALID_VALUE",
      "detail": "This merchant can only process payments in JPY, but amount was provided in USD.",
      "field": "amount_money.currency",
      "category": "INVALID_REQUEST_ERROR"
    }
  ]

このユーザーでは日本円しか使えないのに米ドルで払おうとしてるじゃん!ってこと?

またも html の修正して 円にしてみる。

具体的には server.js にあった ‘USD’ を ‘JPY’ にそれと金額も 1.00 から 300 に

        amountMoney: {
          // the expected amount is in cents, meaning this is $1.00.
          amount: '300', // '1.00' から '300'
          // If you are a non-US account, you must change the currency to match the country in which
          // you are accepting the payment.
          currency: 'JPY', // 'USD'から'JPY'
        },

card-payment.html の下記部分を適宜

        const verificationDetails = {
          amount: '300', // ここは 1.00 から 300 に
          billingContact: {
            givenName: 'John',
            familyName: 'Doe',
            email: 'john.doe@example.com', // ここもちょっと変えた
            phone: '0123456789', // ここもちょっと変えた
            addressLines: ['123 Main Street', 'Apartment 1'],
            city: 'London',
            state: 'LND',
            countryCode: 'GB',
          },
          currencyCode: 'JPY', // ここを 'JPY' に変更
          intent: 'CHARGE',
        };

ほんとは住所とかも変えたほうがいいんだろうがサンプルなのでこのままいった。

成功した。

…が、なんで Pay $1.00 なんだ?どこかでUSDなんだろうか?と思ったら単純に card-payment.html に書いてあったw

  <body>
    <form id="payment-form">
      <div id="card-container"></div>
      <button id="card-button" type="button">Pay $1.00</button>
    </form>
    <div id="payment-status-container"></div>
  </body>

body これだけw ボタンそのまま書いてあるじゃん。ここも書き換え必要ってことですね。

ログも確認。

{
  "payment": {
    "id": "7Dt5Yj0Me0l0mD37ziDxxxxxxxxxx",
    "created_at": "2024-07-03T02:25:15.608Z",
    "updated_at": "2024-07-03T02:25:15.899Z",
    "amount_money": {
      "amount": 300,
      "currency": "JPY"
    },
    "status": "COMPLETED",
    "delay_duration": "PT168H",
    "source_type": "CARD",
    "card_details": {
      "status": "CAPTURED",
      "card": {
        "card_brand": "VISA",
        "last_4": "1111",
        "exp_month": 5,
        "exp_year": 2029,
        "fingerprint": "sq-1-mBivhIZXTYy8CoVTTaNu3nNLe7szwGz8XMpxn3vJyOCamt4SVT90pD3fxxxxxx_xxx",
        "card_type": "CREDIT",
        "prepaid_type": "NOT_PREPAID",
        "bin": "411111"
      },
      "entry_method": "KEYED",
      "cvv_status": "CVV_ACCEPTED",
      "avs_status": "AVS_ACCEPTED",
      "statement_description": "SQ *DEFAULT TEST ACCOUNT",
      "card_payment_timeline": {
        "authorized_at": "2024-07-03T02:25:15.735Z",
        "captured_at": "2024-07-03T02:25:15.899Z"
      }
    },
    "location_id": "LJX7V0B5MRP17",
    "order_id": "MGI1fVPYaPTq6m2tD9xxxxxxxxxx",
    "risk_evaluation": {
      "created_at": "2024-07-03T02:25:15.735Z",
      "risk_level": "NORMAL"
    },
    "buyer_email_address": "john.doe@example.com",
    "billing_address": {
      "address_line_1": "123 Main Street",
      "address_line_2": "Apartment 1",
      "locality": "London",
      "country": "GB",
      "first_name": "John",
      "last_name": "Doe"
    },
    "total_money": {
      "amount": 300,
      "currency": "JPY"
    },
    "approved_money": {
      "amount": 300,
      "currency": "JPY"
    },
    "receipt_number": "7Dt5",
    "receipt_url": "https://squareupsandbox.com/receipt/preview/7Dt5Yj0Me0l0mD37ziDxxxxxxxxxx",
    "delay_action": "CANCEL",
    "delayed_until": "2024-07-10T02:25:15.608Z",
    "application_details": {
      "square_product": "ECOMMERCE_API",
      "application_id": "sandbox-sq0idb-2uxDU0wjEQiCxxxxxxxxxx"
    },
    "version_token": "Vl61hxOGfoHgEaNmtXzJbsn3TLfazuu7XUxxxxxxxxxx"
  }
}

あとはこれを支払い情報に突っ込んで・・・ まだまだやることあるじゃんw

ちょっと思ったこと

最後のログに関して、実は server.js のほうではなく card-payment.html にあるJavaScript のなかの「amountMoney」の金額 300 は 1.00 でも 100 でも関係なく動いた…。

card-payment.html の中で戻ってきた値とverifyBuyerという関数で照合しているよう。

ここをクリアすると コンソールに Success って出るような…

とりあえず画面上のSuccess は勝ち取れているのでゆくゆく見ていこうと思います。

実装引き続きやっていきます。

この記事が気に入ったら
いいね ! しよう

Twitter で