<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step-->
<!-- 新規 -->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!-- END step#result -->

<!-- END_MODULE ShoppingForm -->

<h3 class="form-table-title">追加手数料</h3>
<table class="form-table">
  <!-- BEGIN additionGroup:loop -->
  <tr>
    <th></th>
    <td>
      {additionId} {additionName}（¥{additionFee}[number_format])
    </td>
  </tr>
  <!-- END additionGroup:loop -->
</table>

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Confirm"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Submit"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="result" />
  <input type="hidden" name="error" value="confirm" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

        <!-- BEGIN_MODULE Payment_Select -->
        <ul>
          <!-- BEGIN payment:loop -->
          <li>
            <div
              class="acms-form-radio"
            >
              <input
                id="input-radio-payment-method-{block}"
                type="radio"
                name="payment-method"
                value="{block}"
                \{payment-method:checked#{block}\}
                <!-- BEGIN_IF [\{payment-method\}/em/_and_/{payment.i}/eq/1] -->
                checked="checked"
                <!-- END_IF -->
                data-validator="payment-method"
              />
              <label for="input-radio-payment-method-{block}">
                <i class="acms-ico-radio"></i>{name}<!-- BEGIN_IF [{commissionPaid}/gt/0] -->：手数料 ¥{commissionPaid}[number_format]<!-- END_IF -->
              </label>
              <!-- BEGIN description:veil -->
              <div>
                <!-- BEGIN_IF [{description}[delnl]/nem] -->
                <div>{description}[nl2br]</div>
                <!-- END_IF -->
                <!-- BEGIN_IF [{image@path}/nem] -->
                <img
                  src="%{MEDIA_ARCHIVES_DIR}{image@path}"
                  class="acms-img-responsive"
                  alt="{image@alt}"
                  width="{image@width}"
                  height="{image@height}"
                >
                <!-- END_IF -->
              </div>
              <!-- END description:veil -->
            </div>
          </li>
          <!-- END payment:loop -->
        </ul>
        <!-- END_MODULE Payment_Select -->
        <input type="hidden" name="field[]" value="payment-method" />
        <input type="hidden" name="payment-method:v#required" id="payment-method-v-required" />
        <div role="alert" aria-live="assertive">
          <div data-validator-label="payment-method-v-required" class="validator-result-\{payment-method:v#required\}">
            <p class="form-error-text">決済方法を選択してください</p>
          </div>
        </div>

<!-- BEGIN_MODULE Addition_Select -->
<!-- BEGIN addition:veil -->
<h3>追加手数料</h3>
<table>
  <tbody>
    <tr>
      <th></th>
      <td>
        <ul>
          <!-- BEGIN addition:loop -->
          <li>
            <div class="acms-form-checkbox">
              <input type="checkbox" name="addition[]" value="{id}" \{addition:checked#{id}\} id="input-checkbox-addition-{id}" />
              <label for="input-checkbox-addition-{id}">
                <i class="acms-ico-checkbox"></i>{name}（¥{fee}[number_format]）</label>
            </div>
          </li>
          <!-- END addition:loop -->
        </ul>
        <input type="hidden" name="field[]" value="addition" />
      </td>
    </tr>
  </tbody>
</table>
<!-- END addition:veil -->
<!-- END_MODULE Addition_Select -->

<input
  type="hidden"
  name="deliver-area"
  value="{deliver-pref}"
/>
<input type="hidden" name="field[]" value="deliver-area" />

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step#shoppingError -->
<section>
  <h2>購入エラーが発生しました。</h2>
  <p class="message">購入手続き中の商品に問題がある可能性があります。お手数ですが、はじめからやり直して下さい。</p>
  <div class="form-btn-wrap">
    <a href="%{BASE_URL}cart/" class="btn">購入フォームに戻る</a>
  </div>
</section>
<!-- END step#shoppingError -->

<!-- END_MODULE ShoppingForm -->

<!-- BEGIN_MODULE Admin_InjectTemplate id="%{PAYMENT_SERVICE}-js" -->
<!-- END_MODULE Admin_InjectTemplate -->

<div
  id="js-sq-card-container"
  data-square-three-d-secure="true"
  data-square-amount="3000"
  data-square-currency-code="JPY"
  data-square-intent="CHARGE"
  data-square-seller-keyed-in="false"
  data-square-customer-initiated="true"
  data-square-billing-contact-given-name="太郎"
  data-square-billing-contact-family-name="山田"
  data-square-billing-contact-email="info@example.com"
  data-square-billing-contact-phone="090-0123-4567"
  data-square-billing-contact-country-code="JP"
  data-square-billing-contact-postal-code="4500002"
  data-square-billing-contact-state="愛知県"
  data-square-billing-contact-city="名古屋市中村区"
  data-square-billing-contact-address-line1="モンマートビル5階"
  data-square-billing-contact-address-line2="名駅3丁目18-5"
>
  <!-- Squareのカード入力用コンポーネントが表示されます -->
</div>

3Dセキュア機能を有効にするため、 data-square-three-d-secure 属性の値に true を設定し、決済情報及び決済者情報を設定してください。決済者情報は必須ではありませんが、セキュリティのため、できるだけ多くの情報を設定してください。

data 属性についての説明は以下になります。

<script>  
  window.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('#js-sq-card-container')) {
      acmsSquare.creditCard('#js-sq-card-container');
    }
  });
</script>

Square から取得した、クレジットカード識別情報は、「square-nonce」というフィールドに格納されます。このフィールドは JavaScript によって自動で追加されます。

<input type="hidden" name="square-nonce" value="取得したクレジットカード情報">
<input type="hidden" name="field[]" value="square-nonce">

不正なクレジットカード番号で決済が行われた場合など、クレジットカード決済でエラーとなることがあります。決済時にエラーが起きたことを表示できるようにするため、決済フォームでクレジットカード決済が失敗した場合、creditcard というフィールドの auth オプションがエラー判定されるようになっています。

そのため、決済フォームに、creditcard フィールドの auth オプションがエラー判定されたときのコードを書いておくと、クレジットカード決済が失敗した場合のエラーメッセージを表示可能です。以下はサンプルのソースコードです。

<div role="alert" aria-live="assertive">
  <div class="validator-result-{creditcard:v#auth}">
    <p class="form-error-text">クレジットカード認証に失敗しました。</p>
  </div>
</div>

<script>
  acmsSquare.creditCard('#js-sq-card-container', {
    submitterElementOrSelector: '#js-shoppingForm-submit'
    callbacks: {
      cardBrandChanged(event) {
        console.info(event)
      },
      errorClassAdded(event) {
        console.info(event)
      },
      errorClassRemoved(event) {
        console.info(event)
      },
      escape(event) {
        console.info(event)
      },
      focusClassAdded(event) {
        console.info(event)
      },
      focusClassRemoved(event) {
        console.info(event)
      },
      postalCodeChanged(event) {
        console.info(event)
      },
      submit(event) {
        console.info(event)
      },
    },
    focus: 'cardNumber', // or (focus) => { focus('cardNumber') }
    recalculateSize: (recalculateSize) => {
      document
        .querySelector('.js-recalculate-size-trigger')
        .addEventListener('change', () => {
            recalculateSize();
         });
    },
    squareCardOptions: {
      postalCode: '',
      includeInputLabels: true,
      style: {
         "input": {
           "color": "red",
         },
         "@media screen and (max-width: 600px)": {
           "input": {
             "fontSize": "12px",
           }
         }
       }
     },
  });
</script>

Square 用の JavaScriptライブラリ では以下のイベントを用意しています。イベントを活用することで、特定のアクションが発生した時に処理を挟み込めます。

window.addEventListener('acmsSquareTokenizeSuccessed', (event) => {
  // クレジットカード情報の取得に成功したとき
  console.info(event)
})

window.addEventListener('acmsSquareTokenizeFailed', (event) => {
  // クレジットカード情報の取得に失敗したとき
  console.info(event)
})

購入フォームにカスタムフィールドで square-note の値として、任意のメモを送信することで、Square のお取引一覧ページに表示されるメモを任意のテキストにカスタマイズできます。

<input type="hidden" name="square-note" value="ウェブサイト決済" />
<input type="hidden" name="field[]" value="square-note" />