API

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

平素より「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、リンク種別ごとに一覧でステータス、有効期限、作成日時、更新日時が確認できます。 メールリンクの作成はかなり簡単で、素早く設定することができました! ぜひ皆さまも一度、テストアカウントで試してみてください!

マーケティングチーム

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の決済APIの利用する仕組みと方法

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

開発チーム