Product Blog

みなさん、こんにちは！fincodeプロダクトのマーケティングチームです。 本日はfincodeに新たな決済手段「PayPay」が追加されたため、ご紹介いたします！ PayPay追加の背景と概要 「PayPay」は 5,500 万人以上の登録ユーザー数（※1）を誇るキャッシュレス決済サービスです。 クレジット カードを使わないユーザーでも注文と同時に決済を完了することができ、利便性良く利用できます。 なお、クレジットカード決済、コンビニ決済と統合された API のため、「fincode byGMO」導入事業者は実装・学習コストを抑えて、自社の Web アプリ・スマホアプリ等において「PayPay」による決済の受付が可能となります。 購入者は、「PayPay」のアプリ上で支払を承認する、もしくはブラウザ上で「PayPay」にログインすることで「PayPay 残高」または「PayPay あと払い」での支払いが可能となります（※2）。 ※1 「PayPay」のアカウント登録済みのユーザー数。2023年2月時点。PayPay株式会社調べ。 ※2 「PayPay」で利用可能な支払方法はユーザーごとのご利用状況や利用事業者ごとの審査結果によって異なります。 インテグレーション fincodeの決済APIを利用してPayPayでの決済を呼び出すことができます。 決済APIのレスポンスに含まれるURLへユーザーを遷移させ、PayPayサイトもしくはアプリ上で決済を行います。 APIで決済を呼び出すほか、構築済みのリダイレクト決済ページを利用して少ないコーディングでPayPayでの決済を提供することも可能です。 PayPayのDocsはこちら　https://docs.fincode.jp/payment/paypay fincodeではテスト環境もご用意しており、すぐに使えてすべての機能をお試しいただけます。 この機会にぜひお試しください！ ※本番環境では、カード決済のご利用開始後に管理画面より追加申込いただけます。 ※（プラットフォームタイプご利用の方へ）テナント様にカード決済以外の決済手段をご提供されたい場合、テナント様の審査をスムーズに進めるために事前に決済会社との調整が必要になりますので、お問い合わせフォームよりお問い合わせください。

• お知らせ

みなさん、こんにちは！プロダクトのマーケティングチームです。 リダイレクト型決済でもコンビニ決済をご利用いただけるようになりました！ 本記事では、メールリンク機能を用いてコンビニ決済をご利用いただくための方法をご紹介いたします。   なお、WEBサイトなどの貴サービスへfincodeの決済機能を組み込んで決済処理を実行される方はシステム仕様など詳細について下記ページをご参照ください。 ▼fincode Docs https://docs.fincode.jp/ ▼API reference https://docs.fincode.jp/api ▼Product Blog「fincodeの決済APIの利用する仕組みと方法」 https://blog.fincode.jp/product_blog/244-2/    メールリンクの送信方法 ①ログイン後、左メニュー＞メールリンクをクリックし、「決済作成」ボタンをクリック ②クリック後、以下の画面が表示されるので、「金額」まで項目に沿って入力 ※今回は「メールアドレスを直接入力して送信する」送信方法でご紹介いたします。 ③「決済手段（最低１つ選択）」にて、「コンビニ決済」を選択。その他、必要項目を入力し「確認」をクリック ※カード決済、コンビニ決済を2種類選んだ際は、購入者の画面で決済手段が選べるようになります。今回はコンビニ決済のみ選択します。 ※成功URLおよびキャンセルURLの指定がない場合は、fincodeのデフォルトの画面が表示されます ④メールリンクの設定詳細画面が表示されます。こちらでコンビニ決済のメールリンク作成は完了です。 お客様の実際のお支払い画面 ①指定したメールアドレスに支払い依頼のメールが届きます。「お支払いページに進む」をクリックします。 ②支払い画面が表示されます。「お支払い」ボタンをクリックします。 ③指定のメールアドレスへお支払い用バーコードのご案内メールが別途送信されます。 メールまたは支払い画面の「今すぐバーコードを表示して支払う」からバーコードを確認します。 ▼メールでのご案内 「お支払いへ進む」ボタンをクリック ④内容確認画面が表示されるので、「バーコードを表示」をクリック ⑤支払い用のバーコードが表示されるので、コンビニのレジで提示し、支払い完了となります。 いかがでしたでしょうか？ コンビニ決済の支払いもシステム構築なし、管理画面上の操作のみで簡単に作成・送信できました。 こちらの機能についてはテスト環境でも実際に触ることができるので、一度お試しくださいませ！  

• お知らせ
• 構築Tips

fincode開発チームです！ UIコンポーネントの「コーディングを始める」というページを作成したのでそのご紹介です。 https://docs.fincode.jp/payment/ui_component/demo fincodeでは、UIコンポーネントというWebサイトに埋め込めるカード情報入力フォームを提供しています。 詳しくはこちら UIコンポーネントは利用者が自由にカスタマイズできるようになっていて、 文字色や背景、ラベルの内容...などを任意の値に指定できるようにしています。 今回はdocs上に実際にUIコンポーネントのカスタマイズを試してどんなUIになるのか？をインタラクティブに試せるページを作成しました。 1.初期表示 ページを開くとこの画面が表示されます。 2.各パラメータを変更 今回はテキストを変えてみようと思います。 ラベルテキストの各項目を英語にし、 プレースホルダーテキストのカード名義人を変更し、「更新」を選択します。 すると... 3.更新後画面 UIコンポーネントが更新され、変更したパラメータ通りの表示になっていますね！ また、左に記載されているコードブロックはUIコンポーネントのサンプルコードです。 このページでお好みの文字や色に調整したあと、コードをコピーすればローカルでも利用できます！ 今回はdocsに追加したUIコンポーネントの「コーディングを始める」ページの紹介でした。

• 構築Tips

みなさん、こんにちは！fincodeプロダクトのマーケティングチームです。 本日はfincodeにスマホで支払える「コンビニ決済」が追加されたので購入者の利用イメージと導入方法についてご紹介いたします。 fincode byGMOのスマホで支払える「コンビニ決済」とは？ スマートフォンの画面上に表示される電子バーコードを対象コンビニのレジで提示して支払う方式を採用しており、コンビニ内の端末を操作する必要がないため、ショップ様は購入者へ決済完了までのステップが少ないコンビニ決済の提供が可能です。 ※コンビニ店頭でのお支払いには現金のみご利用いただけます。 導入メリット コンビニ決済は以下のような3つのメリットがあります。 ①ECサイト、オンラインサービスの新しい決済手段としてコンビニ決済を購入者に提供できる ②購入者は、コンビニでの端末操作や電子バーコード発行用のアプリを事前ダウンロードをすることなく、スムーズにコンビニでのお支払いができる ③サブスクリプションサービスにおいてカード決済がエラーになった場合の代替支払い手段としてもコンビニ決済の利用ができる 購入者の利用イメージ 購入者の利用までの流れは以下になります。 ①決済選択画面にてコンビニ支払いを選択 ②支払い画面を表示 ③コンビニのレジにてバーコードをスキャンし、お支払いへ ※現状ではAPI型のみのご提供となりますので、レギュレーションに従って加盟店様で画面を構築していただく必要があります。 ※リダイレクト型を利用したコンビニ決済は2023年2月下旬に公開予定です。 導入方法について 実際にコンビニ決済を導入するには、本番環境の管理画面「設定」メニューから「コンビニ決済」の利用申請をお願いいたします。 ※コンビニ決済は、カード決済のいずれかのブランドのご利用開始後に、利用申請が可能になります。 ※カード決済の利用申請は、fincodeの本番環境を申請すると自動的に開始されます。カード決済のご利用予定がなく、コンビニ決済のみご利用されたいショップ様も、カード決済の利用手続きは完了まで進めていただく必要がございます。 システムの導入および設定についてはDocsをご覧くださいませ。 https://docs.fincode.jp/payment/konbini いかがでしたでしょうか？ テスト環境では、コンビニ決済の機能をすぐにご利用いただけます。 ぜひこの機会にお試しください！

• お知らせ

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

• 構築Tips

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

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

• お知らせ

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

• お知らせ