# vuejs で omisejapan の決済フォーム作成した時のメモ

<template>
  <div>
    token:{{ token }}
    <b-container>
      <b-card style="max-width:420px;" class="mx-auto">
        <form @submit.prevent="checkout()">
          <b-form-group label="名義人" label-for="name">
            <b-form-input
              id="name"
              v-model="card.name"
              name="name"
              required=""
            ></b-form-input>
          </b-form-group>
          <b-form-group label="カード番号" label-for="number">
            <b-form-input
              id="number"
              v-model="card.number"
              name="number"
              required=""
            ></b-form-input>
          </b-form-group>
          <b-form-group label="有効期限" label-for="expiration_month">
            <b-form inline>
              <b-form-input
                id="expiration_month"
                v-model="card.expiration_month"
                name="expiration_month"
                placeholder="月"
                required=""
                class="mr-2"
                style="max-width: 60px;"
              ></b-form-input>
              <b-form-input
                id="expiration_year"
                v-model="card.expiration_year"
                name="expiration_year"
                placeholder="年"
                required=""
                style="max-width: 80px;"
              ></b-form-input>
            </b-form>
          </b-form-group>
          <b-form-group label="セキュリティコード" label-for="security_code">
            <b-form-input
              id="security_code"
              v-model="card.security_code"
              name="security_code"
              required=""
              style="max-width: 80px;"
            ></b-form-input>
          </b-form-group>

          <b-btn type="submit">支払い</b-btn>
        </form>
      </b-card>
    </b-container>
  </div>
</template>

<script>
export default {
  head () {
    return {
      script: [
        {
          src: 'https://cdn.omise.co/omise.js'
        }
      ]
    }
  },
  mounted () {
    Omise.setPublicKey(process.env.OMS_PKEY)
  },
  data () {
    return {
      token: '',
      card: {
        name: 'OMISE VUEJS',
        number: '4111111111111111',
        expiration_month: '11',
        expiration_year: '29',
        security_code: '110'
      }
    }
  },
  methods: {
    checkout () {
      Omise.createToken('card', this.card, (statusCode, response) => {
        if (response.object == 'error' || !response.card.security_code_check) {
          console.log(response)
          if (response.object == 'error') {
            console.log(response.message)
          }
        } else {
          console.log(response)
          this.token = response.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>