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

vuejs
javascript

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

javascript async await 使って非同期処理のいろいろ...

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

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

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

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

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

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

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

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

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

Javascript var let const 変数宣言の違い

javascript varとlet 違いこれからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話携帯電話フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

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

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

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

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

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

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

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

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

javascriptで Tabキー無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

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

momentjsの日本語表示、曜日の日本語表示と略称表示について...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説よく使われる v-if と v-show の...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

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

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

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

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

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

フロントのブラウザー側で動くjs cookieについて...

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

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

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

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

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

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

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

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

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

vuejsで円マークカンマ区切りのフィルター作りました。...

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

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

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

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

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

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

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

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

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

vuejsのhook使って開発を便利にしていこう...

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

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

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

よく使う正規表現、文字検索・置換をまとめてみました。...

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

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

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

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

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

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

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

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

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

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

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

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