# 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ
Nuxtjs 動的なルーティング静的ページ自動生成
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs v-if と v-show の違い
nuxtjs vue router params query ルートから取得できるもの
vuejs スクロールでナビバー表示非表示
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs 開発時に遭遇したエラーリスト
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel に vuejs 使うための初期設定