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の[コーディングを始める]ページを使うのがおすすめです！
好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。
皆さんも是非試してみてください！
あわせて読みたい開発者におすすめの記事
エンジニアファーストの決済ソリューション–fincodeの強みとは
この記事をShareする
fincode byGMOはスタートアップが成功するために設計されたオンライン決済インフラです。直感的なAPIやローコードコンポーネントで工数少なく実装可能です。
2022.12.13
開発チーム
fincode開発チームです！
fincodeの仕組みや構築方法のTipsを紹介していきます。
