# 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 4年前

vuejs javascript

同じタグを持つ記事をピックアップしました。

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

# omisejapan とは

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

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

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

# omise エラーコード一覧

# omise テストカード

関連記事

Nuxtjs 3 に Ant design Vue を使う

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Javascript 非同期処理 async と await のメモ

LaravelとNext.jsでBlobファイルの作成と取扱い

大きいファイルをスライス分割してアップロード

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー

Cookie localStorage sessionStorage の違い

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

Javascript DataTables で excel 風 table 作る

もっと Docker 使おうよ！Node.js を Docker から引っ張ろうよ

国際化 i18n と地域化 L10N

javascript 配列 重複排除

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

DeprecationWarning: Passing invalid argument types to fs.existsSync is deprecated

Jest を使った JavaScript テストの書き方

Jsconfig と Tsconfig

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

polyfill という宝物で開発時の ie11 対応した時のメモ

キーコード取得 ＆ キーコード一覧

ReferenceError: location is not defined

moment.js 使って日本語曜日対応

nodejs 使う時のエラーたち

npm i と npm ci の違いと使い分け

nuxt cordova web ハイブリッドアプリ作成した時のメモ

Nuxtjs 動的なルーティング静的ページ自動生成

javascript password generator ランダム文字列パスワード作成

javascript で作る html から PDF 変換 pdfmake の日本語対応

Javascript 電話番号フォーマット

react 強制的にレンダリングする方法

正規表現一覧 よく使う検索・置換のパターン

javascript reduce 連想配列の合計計算覚えよう

Supabase CLIの使い方

javascript 指定場所にスムーズにスクロールする方法

Supabaseの使い方

Sweet Alert swal に複数 content

javascript 開発で出会った TypeError

Ubuntu に nodebrew をインストールする方法

vuejs back to top button component 作成

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

vue hook 使って vuejs コンポーネントライフサイクル監視

Javascript var let const 変数宣言の違い

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

nuxtjs vue router params query ルートから取得できるもの

vuejs スクロールでナビバー表示非表示

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejs 開発時に遭遇したエラーリスト

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejs v-if と v-show の違い

VuePress SEO改善ガイド

nuxtjs と codeigniter で jwt システム構築

開発におけるコーディングルール・規約

laravel に vuejs 使うための初期設定

開発時によく使うゼロ埋めパディング作業まとめ

スクレイピング：各言語の比較

javascript 配列重複排除

キーコード取得＆キーコード一覧

正規表現一覧よく使う検索・置換のパターン

javascript 　指定場所にスムーズにスクロールする方法

vuejs-datepicker 使ってカレンダー表示日本語多言語対応