vue-square.html

<template>
<div>
  <div id="sq-ccbox">
    <!--
      You should replace the action attribute of the form with the path of
      the URL you want to POST the nonce to (for example, "/process-card")
    -->
    <form id="nonce-form" novalidate action="path/to/payment/processing/page" method="post">
      <div class="errorbox">
        <div class="error" v-for="error in errors">
          {{error}}
        </div>
      </div>
      <div id="card-tainer">
        <div class="cardfields card-number" :id="id+'-sq-card-number'">o</div>
        <div class="cardfields expiration-date" :id="id+'-sq-expiration-date'">e</div>
        <div class="cardfields cvv" :id="id+'-sq-cvv'">e</div>
        <div class="cardfields postal-code" :id="id+'-sq-postal-code'">e</div>
      </div>

      <input type="hidden" id="card-nonce" name="nonce">
      <div id="sq-walletbox">
        <div v-show=!applePay class="wallet-not-enabled">Apple Pay for Web not enabled</div>
        <!-- Placeholder for Apple Pay for Web button -->
        <button v-show=applePay :id="id+'-sq-apple-pay'" class="button-apple-pay"></button>

        <div v-show=!masterpass class="wallet-not-enabled">Masterpass not enabled</div>
        <!-- Placeholder for Masterpass button -->
        <button v-show=masterpass :id="id+'-sq-masterpass'" class="button-masterpass"></button>
      </div>
    </form>
  </div>
  <button @click="requestCardNonce( $event)" class='productPurchase payButton'>Pay</button>
</div>
</template>