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

環境

  • vuejs
  • nuxtjs
  • omisejapan ペイメント

目的

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

#omisejapan とは

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

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

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

omise を選んだ理由

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

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

会社初期費用月額費用手数料決済処理料
GMO50,000 円〜0 円〜2.7%〜5〜10 円
omise0 円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 円
PayPal0 円0 円3.6%40 円
Square0 円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 4242Visa
4111 1111 1111 1111Visa
5555 5555 5555 4444Mastercard
5454 5454 5454 5454Mastercard
3530 1113 3330 0000JCB
3566 1111 1111 1113JCB

エラー発生テストカード

カード番号ブランドエラーコード説明
4111 1111 1114 0011Visainsufficient_fund与信限度枠を超え
5555 5511 1111 0011Mastercardinsufficient_fund与信限度枠を超え
3530 1111 1119 0011JCBinsufficient_fund与信限度枠を超え
4111 1111 1113 0012Visastolen_or_lost_card盗難紛失カード
5555 5511 1110 0012Mastercardstolen_or_lost_card盗難紛失カード
3530 1111 1118 0012JCBstolen_or_lost_card盗難紛失カード
4111 1111 1112 0013Visafailed_processingシステムエラー
5555 5511 1119 0013Mastercardfailed_processingシステムエラー
3530 1111 1117 0013JCBfailed_processingシステムエラー
4111 1111 1111 0014Visapayment_rejected課金が拒否
5555 5511 1118 0014Mastercardpayment_rejected課金が拒否
3530 1111 1116 0014JCBpayment_rejected課金が拒否
4111 1111 1119 0016Visafailed_fraud_checkカードが不正
5555 5511 1116 0016Mastercardfailed_fraud_checkカードが不正
3530 1111 1114 0016JCBfailed_fraud_checkカードが不正
4111 1111 1118 0017Visainvalid_account_number利用できないカード番号
5555 5511 1115 0017Mastercardinvalid_account_number利用できないカード番号
3530 1111 1113 0017JCBinvalid_account_number利用できないカード番号
4111 1111 1116 0001Visainvalid_security_codeセキュリティコードが無効
5555 5511 1113 0001Mastercardinvalid_security_codeセキュリティコードが無効
3530 1111 1111 0001JCBinvalid_security_codeセキュリティコードが無効
4111 1111 1115 0002Visapayment_rejected Enrollment3D セキュアエラー
5555 5511 1112 0002Mastercardpayment_rejected Enrollment3D セキュアエラー
3530 1111 1110 0002JCBpayment_rejected Enrollment3D セキュアエラー
4111 1111 1114 0003Visapayment_rejected Validation3D セキュアエラー
5555 5511 1111 0003Mastercardpayment_rejected Validation3D セキュアエラー
3530 1111 1119 0003JCBpayment_rejected Validation3D セキュアエラー
2020-06-18
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定