fincode

Product Blog

リダイレクト型画面のUIを変更しました

fincode開発チームです! 先日、リダイレクト型決済画面のUI変更を行いましたので紹介します! 目的 お客様のご意見で、「リダイレクト型のデザインがイマイチ」とのお声があり、 より良いデザインを目指し、デザインを一新しました。 リダイレクト型とは 加盟店様で決済画面を構築することなく、購入者にfincodeが提供する決済画面にリダイレクトさせるだけで決済を完了できる機能です。 詳しくはこちら https://docs.fincode.jp/payment/redirect_type 新デザイン決済画面のイメージはこちらです! ■新デザイン ■旧デザイン 変更ポイント 色のパターンをシンプルにしました。 モバイルファーストを意識して、縦画面1本に変更。 お支払い情報確認~お支払い までの目線の負荷を減らしました。 ■新デザイン ■旧デザイン カーソルを当て直さなくても、有効期限MMを入力すれば、YYに自動で遷移するようにしました。 プレースホルダーの冗長な説明をシンプルなものに変更しました。 直感的に入力すべき内容が伝わる(はず)なので、余計な情報は削除して見やすさを重視しました。 ■新デザイン ■旧デザイン 今後もお客様のご意見ヒアリング(&エゴサ)を続け、より良い物にしていきたいと思います。

開発チーム
リダイレクト型画面のUIを変更しました

新機能追加のお知らせ:メールリンクがリリースされました

平素より「fincode byGMO」をご利用いただきありがとうございます。 fincodeに新たな機能「メールリンク」が追加されましたので、お知らせいたします。  メールリンクについて お客様にカード情報入力画面のURLをご案内するメールを、管理画面上の操作のみで簡単に作成・送信できます。 お客様に1回限りの決済をご案内したい場面や、カード情報の登録をご案内したい場面でご活用いただけます。 この機能はAPIでもご利用可能です。 利用用途イメージ ・都度お見積りが必要な商材をお取り扱いの場合 ・自社Webサイトに決済機能はないが、オンライン販売をしたい場合 Docs メールリンク(カード登録):https://docs.fincode.jp/payment/redirect_type/card メールリンク(決済):https://docs.fincode.jp/payment/redirect_type メールリンク:決済の流れイメージ 実際のお客様のカード登録画面 実際のお客様が受け取るメール 〈メールリンク:決済〉 〈メールリンク:カード登録〉 実際の管理画面設定操作流れ 実際にfincodeチームがメールリンク機能を使って、以下2点を作成してみました。 メールリンク:カード登録 メールリンク:決済   メールリンク:カード登録(利用イメージ:新規カード情報登録依頼) *作成時間:1分~2分ほど 手順1. 管理画面ログイン後、左タブ「メールリンク」をクリックし、「カード登録」ボタンをクリック。 手順2. カード登録画面表示、「メールアドレスを直接入力して送信する」を選択後、画面に沿って各項目を入力。 「送信ボタン」をクリックすると、即時で指定したアドレスへメールが送信されます。 ※成功URL、キャンセルURLはPOSTでリダイレクトします 手順3. 作成されたメールリンク詳細情報が表示されます。   メールリンク:決済(利用用途イメージ:1回限りの決済など) *作成時間:1分~2分ほど 手順1.メールリンクのTOPから「決済作成」ボタンをクリック。 手順2. メールリンク:決済作成画面へ遷移。お好きな送信方法を選択。 *今回は「顧客情報に登録済みのメールアドレスを利用して送信する」を選択したVer.で手順を説明 手順3. 顧客選択画面が表示されるため、決済情報を送信したい顧客を選択し、「顧客を選択」をクリック。 手順4. 顧客選択後、再度メールリンク:決済画面へ戻るため、画面に沿って各項目を入力。 「確認」ボタンをクリックすると、即時で指定したアドレスへメールが送信されます。 手順5. 決済のメールリンク作成内容が表示されます。これでメールリンク決済の作成は終了です。   カード登録・決済情報を作成後のメールリンクTOP画面 リンクID、リンク種別ごとに一覧でステータス、有効期限、作成日時、更新日時が確認できます。 メールリンクの作成はかなり簡単で、素早く設定することができました! ぜひ皆さまも一度、テストアカウントで試してみてください!

マーケティングチーム
新機能追加のお知らせ:メールリンクがリリースされました

Developers Nightでfincodeを紹介しました

fincode開発チームです。 2022年7月14日、GMO INTERNET GROUPで定期的に開催している「Developers Night」というオンラインイベントに登壇し、fincodeの紹介や開発事情などについてお話ししてきました! 本記事では、そのときの感想や反省点などを書きたいと思います。 アーカイブはYouTubeで公開しています。 https://youtu.be/cH1y-qspl3Q 書き起こしはこちら https://developers.gmo.jp/21754/ 発表の目的 弊社の採用に繋げたく、特に熱意をもって楽しそうに開発している(らしい)fincodeのチームの開発事情を話して貰いたいとのことで、発表の機会をいただきました。 発表内容は以下のような感じです。 システム構成 コンセプト 開発秘話 モダンな技術を採用していて学べる環境であることを伝え、次にfincodeというサービスの魅力を伝え、最後にfincodeの開発に興味を持ってもらって採用に繋げようという狙いがありました。 発表の感想 「和気あいあいとしていて雰囲気が良かった」「実体験をベースに楽しく開発できたということが伝わった」のような声を頂けたので、採用目的としては正しく発表できたかなと。 開発の実態も赤裸々に伝えられたのでよかったと思う。「入社してみたら全然違った!」ということはおそらくないと思います! 離脱率がDevelopers Nightの過去配信と比べて少し高かったとのことで、反省。学会発表やLT会などでは基本的には全部聞いてもらえるため、離脱しないように意識して発表資料を作ってはいなかった。 オンラインイベントはリアルイベントより離脱しやすいので、離脱率を強く意識する必要がありそうですね。人気のユーチューバーの動画などを参考に構成を組み立てるとよさそうかなと思いました。 また機会があればチャレンジしたいです。

開発チーム
Developers Nightでfincodeを紹介しました

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が提供する決済画面 ※決済画面デザインは変更になる可能性があります

開発チーム
fincodeの構築方法~リダイレクト型編~

fincodeの構築方法~トークン決済編~

fincode開発チームです! fincodeを使って決済実行してみた 第二弾・トークン決済編をご紹介します! 今回は、fincodeが提供している決済フローのうち、トークンJSを使って構築してみました。 (第一弾・決済JS編はこちら)   トークンJSを使った決済フローは以下になります。 ■決済登録API + トークンJS + 決済実行APIのフロー まず決済登録APIを呼び出し、オーダーIDや取引IDを取得します。 次にフロント側でトークンJSを実行し、カード情報(カード番号・有効期限など)のトークン化を行います。 最後に決済実行APIを呼び出し、オーソリを実行します。 今回もフロントはVue.js、バックエンドはnode.js(+ Express)で実装しました。   実装メモ: ■フロント ・axiosでバックエンドのAPIを呼び出し、決済登録API・決済実行APIのレスポンスを受け取っている ・カード情報を引数に設定してトークンJSを呼び出す ・トークンJSでエラーの場合はエラーコードがリスト形式で複数返る ・APIキーはパブリックキーを使う Vue.js <script src="https://js.fincode.jp/v1/fincode.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> let fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const app = new Vue({ el: '#app', data() { return { card: { card_no: '', expire: '', holder_name: '', security_code: '' }, expire_mm: '', expire_yy: '', amount: "500", id: '', access_id: '', } }, methods: { submit() { this.card.expire = this.expire_yy + this.expire_mm; //axiosでリクエストデータ送信(①fincode決済登録呼び出しAPI) axios.post("http://localhost:3000/payment", { amount: this.amount }) .then((res) => { console.log(res); //決済登録APIのレスポンスを設定 this.id = res.data.id;; this.access_id = res.data.access_id; //トークンJS実行 fincode.tokens(this.card, (status, response) => { if (200 === status) { // トークンJS リクエスト正常時の処理 console.log(response); // 決済実行APIのリクエストパラメータを設定 const transaction = { id: this.id, access_id: this.access_id, token: response.list[0].token, //トークンJSで取得した値 }; //axiosでリクエストデータ送信(②fincode決済実行呼び出しAPI) axios.post("http://localhost:3000/execute", { data: transaction }).then((res) => { // リクエスト正常時の処理 console.log(res); alert("決済が完了しました"); }) .catch((err) => { console.log(err); }); } else { // トークンJS リクエストエラー時の処理 console.log(response); response.errors.forEach(error => { alert(error.error_message + "(" + error.error_code + ")"); }); } }, () => { // トークンJS 通信エラー処理。 alert("通信エラーが発生しました。しばらく経ってから再度お試しください。"); } ); }) .catch((err) => { console.log(err); }); }, } }); </script> ■バックエンド 2つのAPIを作成し、fincodeのAPIを呼び出す。 ①決済登録呼び出しAPI ・requestモジュールでfincode(決済登録API)にPOST通信 ・決済登録APIのレスポンスをフロントに渡す   ②決済実行呼び出しAPI ・requestモジュールでfincode(決済実行API)にPUT通信 ・決済実行APIのレスポンスをフロントに渡す ※①②とも、fincodeと通信する際のAPIキーはシークレットキーを使う。 node.js(①決済登録呼び出しAPI) var express = require('express'); var router = express.Router(); /* ①fincode決済登録呼び出しAPI * http://localhost:3000/payment にPOSTを投げると、 * 決済登録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/payments"; const DATA = { pay_type: "Card", job_code: "CAPTURE", 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() { 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; node.js(②決済実行呼び出しAPI) var express = require('express'); var router = express.Router(); /* ②fincode決済実行呼び出しAPI * http://localhost:3000/execute にPOSTを投げると、 * 決済実行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 ID = req.body.data.id; const DATA = { pay_type: "Card", access_id: req.body.data.access_id, token: req.body.data.token, method: "1", }; console.log(DATA); main(); function main() { var endpoint = "/v1/payments/{id}".replace("{id}", ID); request.put( { url: BASE_URL + endpoint, proxy: PROXY_URL, headers: { "Content-Type": "application/json; charset=utf-8", Authorization: API_KEY, }, json: DATA, }, (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; 上記を実行した結果、ダッシュボードから決済成功したことを確認できました。 (参考)決済実行APIからのレスポンス SUCCESS { acs: '0', shop_id: 's_21121014979', id: 'o_0TiOWd3DT5uWD-0nCOiZ4g', pay_type: 'Card', status: 'CAPTURED', access_id: 'a_Jou6XFKoT6KUjHNpG6XXKw', process_date: '2022/04/25 10:16:23.681', job_code: 'CAPTURE', item_code: '0000990', amount: 500, tax: 0, total_amount: 500, customer_group_id: null, customer_id: null, card_no: '************1234', card_id: null, expire: '2411', holder_name: 'Test', card_no_hash: '0e4802a01114169feded374beed5f7d810be72c4aed0118285169b2b57fd55ec', method: '1', pay_times: null, forward: '15250', issuer: '9999999', transaction_id: '2204251016602250501600919723', approve: ' 067736', auth_max_date: null, client_field_1: null, client_field_2: null, client_field_3: null, tds_type: '0', tds2_type: null, tds2_ret_url: null, tds2_status: null, merchant_name: null, send_url: null, subscription_id: null, error_code: null, created: '2022/04/25 10:16:22.771', updated: '2022/04/25 10:16:23.681' }

開発チーム
fincodeの構築方法~トークン決済編~

B Dash Camp 2022に協賛しました!

fincode byGMOは、2022年6月1日(水)~3日(金)に開催されたB Dash Camp 2022 Summer in Sapporoにスポンサーとして参加しました。 B Dash Campはスタートアップ業界の第一線で活躍する経営者や、シード/アーリーフェーズの起業家が集結する日本最大規模の招待制カンファレンスです。 企業ブースでは数多くのスタートアップの皆さまに直接fincodeの決済実装方法についてその場でご説明。また、Pitch Arenaではファイナリストの皆様に賞品をご提供させていただきました。 スタートアップの皆さまの熱量に直接触れたことで、チーム一同、プロダクトを一層磨き上げ使いやすいサービスを提供することでスタートアップシーンを盛り上げる一助となりたいという思いを新たにしています。 またリアルの場で多くの方にお会いできることを、心待ちにしています。 fincode byGMOについて気になった方は、こちらからお問い合わせください。 お問い合わせ - fincode-dashboard

マーケティングチーム
B Dash Camp 2022に協賛しました!

fincodeの構築方法~決済JS編~

fincode開発チームです! fincodeを使って決済実行してみたのでご紹介します! fincodeが提供している決済フローのうち、今回は決済登録API + 決済実行JSを使って構築しました。 決済登録API + 決済実行JSのフロー フロントはVue.js、バックエンドはnode.js(+ Express)で実装してみました。 バックエンドでは決済登録APIを呼び出して、取引IDなどのレスポンスを受け取っています。 フロント側では、画面入力されたカード情報(カード番号・有効期限・決済手段)と バックエンド側で登録した決済情報を受け取った後、決済実行JSを呼び出しています。 実装メモ ■フロント ・axiosでバックエンドのAPIを呼び出し、決済登録APIで登録した決済情報を受け取っている ・上記とカード情報を引数に設定して決済実行JSを呼び出す ・決済実行JSでエラーの場合はエラーコードが複数返る ・APIキーはパブリックキーを使う ■バックエンド ・requestモジュールでfincode(決済登録API)にPOST通信 ・レスポンスをフロントに渡す ・APIキーはシークレットキーを使う ■Vue.js <script src="https://js.fincode.jp/v1/fincode.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> let fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const app = new Vue({ el: '#app', data() { return { transaction: { id: "", pay_type: 'Card', access_id: '', card_no: '', expire: '', method: '1' }, expire_mm: '', expire_yy: '', holder_name: '', security_code: '', amount: "500" } }, methods: { submit() { this.transaction.expire = this.expire_yy + this.expire_mm; console.log(this.transaction); //axiosでリクエストデータ送信 axios.post("http://localhost:3000/payment", { amount: this.amount }) .then((res) => { //決済登録APIのレスポンスを設定 console.log(res); this.transaction.id = res.data.id;; this.transaction.shop_id = res.data.shop_id; this.transaction.access_id = res.data.access_id; //決済実行JS呼び出し fincode.payments(this.transaction, function (status, response) { if (status === 200) { console.log(response); // リクエスト正常時の処理 alert("決済が完了しました") } else { // リクエストエラー時の処理 console.log(response); response.errors.forEach(error => { alert(error.error_message + "(" + error.error_code + ")"); }); } }, function () { // 通信エラー処理。 alert("通信エラーが発生しました。しばらく経ってから再度お試しください。"); }); }) .catch((err) => { console.log(err); }); } } }); </script> ■node.js var express = require('express'); var router = express.Router(); /* fincode決済登録呼び出しAPI * http://localhost:3000/payment にPOSTを投げると、 * 決済登録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/payments"; const DATA = { pay_type: "Card", job_code: "CAPTURE", 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() { 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 決済登録APIからのレスポンス SUCCESS { shop_id: 's_21121014979', id: 'o_m7cH7lzNSfKKHUMI5JxWkw', pay_type: 'Card', status: 'UNPROCESSED', access_id: 'a_0HiqJUxnQ9CSYu5Wxzq3IQ', process_date: '2022/03/23 18:14:30.259', job_code: 'CAPTURE', item_code: '0000990', amount: 1000, tax: 0, total_amount: 1000, customer_group_id: null, customer_id: null, card_no: null, card_id: null, expire: null, holder_name: null, card_no_hash: null, method: null, pay_times: null, forward: null, issuer: null, transaction_id: null, approve: null, auth_max_date: null, client_field_1: null, client_field_2: null, client_field_3: null, tds_type: '0', tds2_type: null, tds2_ret_url: null, tds2_status: null, merchant_name: null, send_url: null, subscription_id: null, error_code: null, created: '2022/03/23 18:14:30.259', updated: '2022/03/23 18:14:30.259' } POST /payment 200 3199.975 ms - 797

開発チーム
fincodeの構築方法~決済JS編~

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

fincode開発チームです! 本日は「fincodeの決済APIの利用する仕組みと方法」について話したいと思います。 fincodeの決済APIを利用してクレジットカード決済をする場合、様々な方法が用意されています。 決済を行う方法について大きく分けて3つに分かれているので、自分の使用感などを整理してみました。 方法 説明 リダイレクト型 fincodeが用意している決済画面に遷移して決済処理を行える方法です。 カード情報を入力させる画面を用意する必要ないのが楽です○ 決済実行(トークンJS) カード情報をトークン化して決済処理を行う方法です。 決済実行(決済実行JS) fincodeが公開しているJavaScriptライブラリのfincodeJSを使ってブラウザ上で決済処理を行う方法です。 自前で画面を用意してカスタマイズできます。また、APIを実行する部分はライブラリを利用できるので便利です。 大雑把にまとめるとこのような感じですね。 お手軽さを求めるならリダイレクト型、 ECサイトの中に支払い画面を組み込みたい場合や、デザイン性を高く求める場合は決済実行(決済実行JS)を使うのがベターです。 決済を行う方法ごとのフロー 今までに挙げた方法ごとのフローが下記になります。 リダイレクト型 決済実行(決済実行JS) 決済実行(トークンJS) 決済を行う方法の種類と比較 機能に分けて比較してみましたので、決済方法の選定の参考にしてみてください。 リダイレクト型 決済実行(決済実行JS) 決済実行(トークンJS) 顧客IDの利用 × 〇 〇 開発コスト ◎ ◎ △ カスタマイズ性 △ ◎ ◎ セキュリティ ◎ ◎ ◎ 終わりに 本日はfincodeの決済APIを利用する仕組みや方法について紹介しました。 どの方法がベストプラクティスであるかは、ユーザーごとに違うと思いますが、今回まとめたものが少しでも役に立てば幸いです。

開発チーム
fincodeの決済APIの利用する仕組みと方法