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

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 好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。 皆さんも是非試してみてください！

• Javascript
• 構築Tips

2022.12.13開発チーム

Engineering

fincodeの構築方法~リダイレクト型編~

fincode開発チームです！ fincodeを使って決済実行してみた 第三弾・リダイレクト型決済編をご紹介します！ （第一弾・決済JS編、第二弾・トークンJS編） リダイレクト型決済では、決済JS・トークンJSを用いた決済方法とは異なり fincodeが提供する決済画面を使用して決済が実行されます。 リダイレクト型決済のフローは以下になります。 まず、サーバから決済URL作成APIを実行し、決済URLを取得します。 取得したURLに遷移させることで、fincodeの決済画面での決済が可能となります。 オーソリ後に決済結果画面に遷移して完了です。 今回フロントはVue.js、バックエンドはnode.js（+ Express）で実装しました。 実装メモ： ■フロント ・axiosでバックエンドのAPIを呼び出す。 ・決済URL作成APIで取得したURLに遷移する。 ■バックエンド ・決済URL作成APIを実行する。 ※[success_url]→fincodeの決済画面で[お支払い]ボタン押下後、オーソリ完了時の遷移先を設定 [cancel_url]→fincodeの決済画面で[戻る]ボタン押下時の遷移先を設定 Vue.js <template> 省略 </template> <script> import axios from "axios"; export default { name: "redirectTest", data() { return { amount: "1000", }; }, methods: { redirect() { 　　//axiosでリクエストデータ送信 　 axios.post("http://localhost:3000/redirect", { amount: this.amount, }) .then((res) => { console.log(JSON.stringify(res)); //リダイレクト型リンクに遷移 window.location.href = res.data.link_url; }) .catch((err) => { console.log(err); }); }, }, }; </script> node.js var express = require('express'); var router = express.Router(); /* 決済URL作成呼び出しAPI * http://localhost:3000/redirect にPOSTを投げると、 * 決済URL作成APIのレスポンスをJSON形式で返す。 */ router.post('/', function (req, res, next) { "use strict"; const console = require("console"); const request = require("request"); const API_KEY = "Bearer m_prod_XXXXXXXXXXXXXXXX“”; const BASE_URL = "https://api.fincode.jp"; const endpoint = "/v1/sessions"; const DATA = { success_url: "http://localhost:3000/success", cancel_url: "http://localhost:3000/cancel", transaction: { amount: req.body.amount, }, }; const options = { url: BASE_URL + endpoint, proxy: PROXY_URL, headers: { "Content-Type": "application/json; charset=utf-8", Authorization: API_KEY, }, json: DATA, } main(); function main() { // 決済URL作成API呼び出し request.post(options, (error, response, body) => { if (200 != response.statusCode) { console.log("ERROR"); console.log(body); } else { console.log("SUCCESS"); console.log(body); res.header('Content-Type', 'application/json; charset=utf-8') res.send(body); } } ); } }); module.exports = router; ■画面イメージ 上記を実行するとサンプルの商品選択画面からfincodeの決済画面に遷移させることができました。 ・商品選択画面（サンプル） ↓　[購入画面へ]押下 ・fincodeが提供する決済画面 ※決済画面デザインは変更になる可能性があります

• 構築Tips

2022.08.01開発チーム