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

環境

  • vuejs
  • nuxtjs
  • omisejapan ペイメント

目的

  • omisejapan ペイメントでクレジットカード決済を行う

# omisejapan とは

omisejapan (opens new window)とは、初期費用無料、月額費用無料、最低売上条件なし、決済手数料 2.95%からの決済ペイメントです。

以前会社の都合で GMO ペイメントを使っていましたが、今回は omise を使ってみたいと思います。

# omise のメリット&選んだ理由

omise を選んだ理由

  • 初期費用無料
  • 月額固定費ゼロ
  • 決済手数料は低レベル
  • api ドキュメントが優しい
  • 管理画面がわかりやすい
  • 99.99%の稼働率
  • 振り込みタイミング自由

# クレカ決済代行の費用比較

会社 初期費用 月額費用 手数料 決済処理料
GMO 50,000 円〜 0 円〜 2.7%〜 5〜10 円
omise 0 円 0 円 2.95% | 3.6% 0 円
ペイジェント 個別対応 個別対応 個別対応 個別対応
イプシロン 0 円 0 円 3.6%〜 0 円
ルミーズ 0 円〜 0 円〜 3.0%~ 5 円~
ソフトバンクペイメント 30,000 ~ 50,000 円 10,000 ~ 20,000 円 3.0 ~ 3.5% 0 円
PayPal 0 円 0 円 3.6% 40 円
Square 0 円 0 円 3.25% 0 円

# omise vuejs クレジットカード決済フォーム

とりあえず omise に決まったので、vuejs でやってみます。
フレームワークの nuxtjs 使っているので、header に omisejs 追加するのも head API 使えば作業がシンプルになります。

関連ライブラリ

  • nuxt
  • @nuxtjs/dotenv
  • bootstrap
  • bootstrap-vue
  • node-sass
  • sass-loader
<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>

# omise エラーコード一覧

エラーコード 説明
confirmed_amount_mismatch 最終的な支払い金額が元の請求額と一致しない
failed_fraud_check カードが不正
failed_processing トランザクション処理のプロセスが失敗システムエラー
insufficient_balance/insufficient_fund 与信限度枠を超え
invalid_account_number/invalid_account 利用できないカード番号
invalid_security_code セキュリティコードが無効
payment_cancelled ユーザーによるキャンセル
payment_rejected 何らかの理由で、課金が拒否
stolen_or_lost_card 盗難紛失カード
timeout 作業タイムアウト

# omise テストカード

成功課金テストカード

カード番号 ブランド
4242 4242 4242 4242 Visa
4111 1111 1111 1111 Visa
5555 5555 5555 4444 Mastercard
5454 5454 5454 5454 Mastercard
3530 1113 3330 0000 JCB
3566 1111 1111 1113 JCB

エラー発生テストカード

カード番号 ブランド エラーコード 説明
4111 1111 1114 0011 Visa insufficient_fund 与信限度枠を超え
5555 5511 1111 0011 Mastercard insufficient_fund 与信限度枠を超え
3530 1111 1119 0011 JCB insufficient_fund 与信限度枠を超え
4111 1111 1113 0012 Visa stolen_or_lost_card 盗難紛失カード
5555 5511 1110 0012 Mastercard stolen_or_lost_card 盗難紛失カード
3530 1111 1118 0012 JCB stolen_or_lost_card 盗難紛失カード
4111 1111 1112 0013 Visa failed_processing システムエラー
5555 5511 1119 0013 Mastercard failed_processing システムエラー
3530 1111 1117 0013 JCB failed_processing システムエラー
4111 1111 1111 0014 Visa payment_rejected 課金が拒否
5555 5511 1118 0014 Mastercard payment_rejected 課金が拒否
3530 1111 1116 0014 JCB payment_rejected 課金が拒否
4111 1111 1119 0016 Visa failed_fraud_check カードが不正
5555 5511 1116 0016 Mastercard failed_fraud_check カードが不正
3530 1111 1114 0016 JCB failed_fraud_check カードが不正
4111 1111 1118 0017 Visa invalid_account_number 利用できないカード番号
5555 5511 1115 0017 Mastercard invalid_account_number 利用できないカード番号
3530 1111 1113 0017 JCB invalid_account_number 利用できないカード番号
4111 1111 1116 0001 Visa invalid_security_code セキュリティコードが無効
5555 5511 1113 0001 Mastercard invalid_security_code セキュリティコードが無効
3530 1111 1111 0001 JCB invalid_security_code セキュリティコードが無効
4111 1111 1115 0002 Visa payment_rejected Enrollment 3D セキュアエラー
5555 5511 1112 0002 Mastercard payment_rejected Enrollment 3D セキュアエラー
3530 1111 1110 0002 JCB payment_rejected Enrollment 3D セキュアエラー
4111 1111 1114 0003 Visa payment_rejected Validation 3D セキュアエラー
5555 5511 1111 0003 Mastercard payment_rejected Validation 3D セキュアエラー
3530 1111 1119 0003 JCB payment_rejected Validation 3D セキュアエラー
2020-06-18
  • vuejs
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ