fincode

Product Blog

システム構築無し!メールリンクを用いてサブスクリプションを開始する方法

みなさん、こんにちは!finocde byGMOのマーケティングチームです。 本日はシステム構築無し、fincodeの管理画面機能とメールリンクを用いてサブスクリプションを設定する方法をご案内いたします。 管理画面の操作手順としては ①プラン作成→②顧客作成→③カード登録→④サブスクリプション登録となります。 ▼サブスクリプション設定のDocsはこちら https://docs.fincode.jp/payment/subscription    ①プラン作成 手順1:まずは管理画面にログインし、左メニュー「サブスクリプション」を選択、「プラン管理」をクリック。 手順2:「新規プラン」をクリック。 手順3:サブスクリプションのプランID、プラン名、金額、支払間隔の設定をし「保存」をクリック。 手順4:設定された内容が表示されるので、サブスクリプションの内容と相違がないか最終チェック。 変更があれば右上ボタン「編集」、削除する場合は「削除」をクリック。 これでプランの作成は完了です。次は「②顧客作成」になります。 ②顧客作成 手順1:左メニュー「顧客」を選択し、「新規顧客」ボタンをクリック。 手順2:顧客情報の必要情報を入力し、「作成」をクリック。 手順3:登録した顧客情報が表示されるので、内容に相違がないか確認してください。 顧客情報の登録は完了です。次は「③カード登録」になります。 ③カード登録 手順1:顧客詳細ページ>支払い情報の「メールリンク(カード登録)」ボタンをクリック。 手順2:必要な情報を入力し「確認」ボタンをクリック。 手順3:内容確認のポップアップが表示されますので、変更がなければ「OK」をクリック。 手順4:作成したカード登録に関するメールリンク詳細情報が表示されます。 こちらでカード登録に関するメールリンク作成は完了です。 ※ユーザー様へメールにてカード登録手続き用のURLが送信されますので、カード登録を行っていただくようご案内ください。 ユーザー様がカード登録を完了されると、ステータスが「カード登録完了」へ更新されます。 作成したメールリンクの情報は左メニュー「メールリンク」より ステータス、有効期限等を確認することができます。 次は最後のステップ「④サブスクリプション登録」になります!   ④サブスク登録 手順1:左メニュー「サブスクリプション」から「新規サブスクリプション」をクリック。 手順2:サブスクリプションの情報入力画面が表示されます。 まずは「顧客の選択」をクリックします。 手順3:サブスクリプション登録をしたい顧客情報を選択。 ※今回は「②顧客作成」で事前に登録していた顧客情報を選択します。 手順4:カード決済選択画面が表示されるので、サブスクリプションで課金を行う先のカード情報を選び「選択」をクリック。 手順5:次に「プラン選択」をクリック。 手順6:「①プラン作成」で作成したプランを選択。 手順7:初回利用金額、初回税送料は任意設定になります。 課金タイミング、課金開始日、課金停止日を設定し「サブスクリプションを開始」をクリック。 ※初回の課金日のみ異なる金額を請求したい場合は、初回利用金額・初回税送料をご設定ください。 ※サブスクリプションの課金開始日を当日にした場合、即時にプランで登録した金額でオーソリ処理が行われ、成功した場合、売上確定の決済が作成されます。 ※停止、失敗のサブスクリプションは再度有効に変更出来ません。 新規のサブスクリプションを登録しなおしてください。 ※課金日が対象月に存在しない場合、課金日を対象月の最終日に処理を実施します。 例)課金日が30日の場合、2月は2月28日に課金が行われます。 手順8:確認のポップアップが表示されるので「OK」をクリック。 手順9:サブスクリプションの設定した内容が表示されます。 こちらでサブスクリプションの設定は完了です。 サブスクリプションの設定内容に応じて、ユーザー様のクレジットカードへ課金開始となります。 いかがでしたでしょうか? システム構築無しでサブスクリプションが設定できる方法もぜひテスト環境でお試しください! ご不明点などございましたら、問い合わせフォームまでお問合せください。   ▼テスト環境登録ページ https://dashboard.test.fincode.jp/sign_up ▼お問合せフォーム https://dashboard.fincode.jp/contact/

マーケティングチーム
システム構築無し!メールリンクを用いてサブスクリプションを開始する方法

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

開発チーム
fincodeの構築方法~UIコンポーネント編~

年末年始営業日のお知らせ

平素より「fincode byGMO」をご利用いただきありがとうございます。 年末年始の営業につきまして、以下の通りとさせていただきます。 年内の営業 2022年12月28日(水)まで 年始の営業 2023年1月4日(水)から 年末年始休業 2022年12月29日(木)~2023年1月3日(火) 休業期間中、問い合わせ対応及び審査関連業務は営業しておりません。 営業再開後より、順次対応させていただきます。 なお、決済サービス・管理画面機能につきましては通常通りご利用いただけます。

マーケティングチーム
年末年始営業日のお知らせ

サブスクリプション機能を拡張しました

fincode開発チームです。 ここ数回のリリースで、サブスクリプションの機能を追加したのでいくつか紹介します。 年払い、2/3/6か月ごと払いに対応しました。 今まで、1か月ごとのみでしたが、支払いパターンを拡張しています。 自由項目パラメータを追加しました。 サブスクリプションAPIに自由項目を追加しました。商品名やユニークIDをセットする等、、ご自由にお使いください。 (ちなみに、決済APIにも自由項目があります。) 例) サブスクの休止や金額変更により、サブスクIDが変わってしまう場合も、自由項目にユニークなIDをセットいただくことで、 同じサブスクリプションとして、加盟店様にて紐づけが可能です。 初期費用が発生するプラン/初月のみ日割や割引が発生するプランが作成できるようになりました。 初回の金額にプランに紐づかない金額をセットできるようになりました。 ・初期費用が発生するプランを作りたい。 ・初月は日割りの金額でサブスクを始めたい。 ・クーポンを適用した金額でサブスクを始めたい。 など、ご要望があったため、対応しました。 詳しくは、ドキュメントをご参照ください。 https://docs.fincode.jp 今後もアップデートあれば随時展開予定です!

開発チーム
サブスクリプション機能を拡張しました

リダイレクト型画面の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の構築方法~リダイレクト型編~