Engineering 2022.05.16 開発チーム

fincodeの決済APIの利用する仕組みと方法

index

fincode開発チームです！

本日は「fincodeの決済APIの利用する仕組みと方法」について話したいと思います。

fincodeの決済APIを利用してクレジットカード決済をする場合、様々な方法が用意されています。

決済を行う方法について大きく分けて3つに分かれているので、自分の使用感などを整理してみました。

方法	説明
リダイレクト型	fincodeが用意している決済画面に遷移して決済処理を行える方法です。カード情報を入力させる画面を用意する必要ないのが楽です○
決済実行(トークンJS)	カード情報をトークン化して決済処理を行う方法です。
決済実行(決済実行JS)	fincodeが公開しているJavaScriptライブラリのfincodeJSを使ってブラウザ上で決済処理を行う方法です。自前で画面を用意してカスタマイズできます。また、APIを実行する部分はライブラリを利用できるので便利です。

大雑把にまとめるとこのような感じですね。

お手軽さを求めるならリダイレクト型、

ECサイトの中に支払い画面を組み込みたい場合や、デザイン性を高く求める場合は決済実行(決済実行JS)を使うのがベターです。

決済を行う方法ごとのフロー

今までに挙げた方法ごとのフローが下記になります。

リダイレクト型

決済実行（決済実行JS）

決済実行（トークンJS）

決済を行う方法の種類と比較

機能に分けて比較してみましたので、決済方法の選定の参考にしてみてください。

	リダイレクト型	決済実行（決済実行JS）	決済実行（トークンJS）
顧客IDの利用	×	〇	〇
開発コスト	◎	◎	△
カスタマイズ性	△	◎	◎
セキュリティ	◎	◎	◎

終わりに

本日はfincodeの決済APIを利用する仕組みや方法について紹介しました。

どの方法がベストプラクティスであるかは、ユーザーごとに違うと思いますが、今回まとめたものが少しでも役に立てば幸いです。

この記事をShareする

テスト環境で今すぐお試し

fincode byGMOはスタートアップが成功するために設計されたオンライン決済インフラです。直感的なAPIやローコードコンポーネントで工数少なく実装可能です。

2022.05.16

開発チーム

fincode開発チームです！ fincodeの仕組みや構築方法のTipsを紹介していきます。

関連事例

Engineering

UIコンポーネントのデモページを作成しました

fincode開発チームです！ UIコンポーネントの「コーディングを始める」というページを作成したのでそのご紹介です。 https://docs.fincode.jp/payment/ui_component/demo fincodeでは、UIコンポーネントというWebサイトに埋め込めるカード情報入力フォームを提供しています。詳しくはこちら UIコンポーネントは利用者が自由にカスタマイズできるようになっていて、文字色や背景、ラベルの内容...などを任意の値に指定できるようにしています。今回はdocs上に実際にUIコンポーネントのカスタマイズを試してどんなUIになるのか？をインタラクティブに試せるページを作成しました。 1.初期表示ページを開くとこの画面が表示されます。 2.各パラメータを変更今回はテキストを変えてみようと思います。ラベルテキストの各項目を英語にし、プレースホルダーテキストのカード名義人を変更し、「更新」を選択します。すると... 3.更新後画面 UIコンポーネントが更新され、変更したパラメータ通りの表示になっていますね！また、左に記載されているコードブロックはUIコンポーネントのサンプルコードです。このページでお好みの文字や色に調整したあと、コードをコピーすればローカルでも利用できます！今回はdocsに追加したUIコンポーネントの「コーディングを始める」ページの紹介でした。

構築Tips

2023.03.24開発チーム

Engineering

fincodeの構築方法~UIコンポーネント編~

fincode開発チームです！ fincodeを使ってみた第四弾・UIコンポーネント編をご紹介します！今回は、UIコンポーネントを使って決済画面を構築してみました。 htmlにformを埋め込み、fincodeJSを使ったコードを書くだけで簡単にカード入力フォームを配置することができたので、ぜひ使ってみてください！ UIコンポーネントを使った決済フローは以下になります。まず、[UI初期化]・[入力フォーム作成]・[UIマウント]を行うことで決済画面にカード入力フォームを配置します。その後ユーザーが入力したカード情報を[入力フォーム情報取得]で取得します。取得したカード情報と決済実行APIのレスポンスをもとに、[決済実行JS]を呼び出し決済を実行します。以下で画面にカード入力フォームを埋め込んだコードを掲載します。フロントはVue.jsで実装しました。実装メモ：・htmlにformを挿入・fincodeJSの[UI初期化]・[入力フォーム作成]・[UIマウント]を実行 htmlタグ <form id="fincode-form"> <div id="fincode"> </div> <button v-on:click="payment" class="fincode-button"> <span>お支払い</span> </button> </form> JS <script src="https://js.test.fincode.jp/v1/fincode.js"></script> <script> const app = new Vue({ el: '#app', mounted() { setUiComponent() { const fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const appearance = { layout: "vertical", hideLabel: false, hideHolderName: false, hidePayTimes: true, labelCardNo: "カード番号", labelExpire: "有効期限", labelCvc: "セキュリティコード", labelHolderName: "カード名義人", cardNo: "1234 5678 9012 3456", expireMonth: "01", expireYear: "25", cvc: "001", holderName: "TARO YAMADA", colorBackground: "f7f6e7", colorBackgroundInput: "ecebd9", colorText: "333", colorPlaceHolder: "9a9a9a", colorLabelText: "314e52", colorBorder: "314e52", colorError: "990c02", colorCheck: "000054", } const ui = fincode.ui(appearance) ui.create("payments", appearance) ui.mount("fincode", "400") }, }, }); </script> 上記実装で構築した決済画面はこちらです↓ フォームのデザインを考える際にはDocsの[コーディングを始める]ページを使うのがおすすめです！ UIコンポーネントのDocs 好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。皆さんも是非試してみてください！

2022.12.13開発チーム