# 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>