Ko-fiの始め方：受取設定からWebサイトへの設置まで

Ko-fiをWebサイトに導入する最短手順は、公開ページを作り、PayPalまたはStripeを接続し、そのページへのリンクを一つ置くことです。独自の決済APIやサーバー実装は必要ありません。

支援金はKo-fi残高に貯まるのではなく、接続したPayPalまたはStripeへ直接送られます。そのため、本人確認、事業情報、銀行口座、税務情報などの要件は決済事業者側でも確認する必要があります。

完了条件を先に確認する

次の項目がすべて「はい」になれば公開できます。

公開ページをログアウト状態で読める？
PayPalまたはStripeがConnectedになっている？
手数料モードと通貨を確認した？
サイトのリンク先が公開ページになっている？
スマートフォンでボタンが邪魔にならない？
実際の支払い方法が一つ以上表示される？

1. 登録前に用意するもの

• 長期利用するメールアドレス
• クリエイター名、製品名、ブランド名のいずれか
• ko-fi.com/yourname に使うページ名
• PayPalまたはStripeのアカウント、または作成に必要な本人情報
• Webサイトを編集する権限

決済事業者から、氏名、生年月日、住所、電話番号、銀行口座、事業内容、税務情報、本人確認書類を求められることがあります。パスワード、確認コード、身分証番号、カード番号、完全な住所を他人に渡したり、スクリーンショットやGitへ残したりしないでください。

2. 公開しても問題ないKo-fiページを作る

Ko-fiでアカウントを作成し、メール認証を完了します。その後、次を設定します。

1. 長く使えるページ名
2. 本人またはブランドを識別できる画像
3. 制作内容と支援金の用途が分かる短い説明
4. 公式サイトと必要なSNSリンク
5. 実際に使う場合だけ、カバー、目標、紹介動画

シークレットウィンドウで公開ページを開き、仮テキスト、リンク切れ、管理画面URL、個人用の連絡先が残っていないか確認します。

Ko-fiページ自体はすぐ作成できますが、受取可能かどうかはPayPalまたはStripeの接続状況と、そのアカウントの地域・本人確認条件で決まります。

3. Settingsから決済事業者を接続する

Settings → Paymentを開き、PayPal、Stripe、または両方を接続します。

PayPalの確認順

1. PayPalカードのConnectを押す。
2. Ko-fiから開いた公式の認可画面をそのまま進む。
3. 受取先にするPayPalアカウントでログインする。
4. 表示された本人・事業・住所・電話確認を正確に完了する。
5. Ko-fiへ戻り、Connected表示を確認する。

認可URLのドメインやパラメーターを手作業で変更しないでください。Businessアカウント、海外受取、利用通貨の条件は、国・地域とアカウント状態によって異なります。中国本土を含む地域固有のケースでも、古い画面例ではなく、そのアカウントに表示されたPayPalの案内を基準にします。

Ko-fiへ戻らない、またはConnectedにならない場合は、Payment設定からもう一度開始します。解決しなければエラー文、時刻、ブラウザ環境を保存してKo-fiまたはPayPalへ問い合わせます。

Stripeの確認順

1. StripeカードのConnectを押す。
2. Stripeでログインするかアカウントを作成する。
3. Ko-fiに使用する事業主体を選択・作成する。
4. 本人、事業、銀行、税務情報の確認を完了する。
5. Ko-fiへ戻り、Connectedを確認する。

クリエイターがStripeを開設できるかどうかは、対応国・地域と事業主体で決まります。支援者が特定カードを使えることと、クリエイター側がStripeを作れることは別です。

4. 手数料はKo-fiと決済事業者を分けて見る

Ko-fiの現在の公式説明は次の通りです。

モード	1回限りのTip・Goal	月額Tip・Membership・Shop・Commission
Free	Ko-fi手数料 0%	Ko-fi手数料 5%
Standard	5%	5%

どちらも現在は月額利用料がありません。新規クリエイターは全機能を利用できる5%モードで始まる場合があるため、Settings → Paymentで現在の設定を確認し、1回限りのTipを0%にしたい場合はFree側へ切り替えます。

これとは別にPayPal・Stripeの通常処理手数料と、必要に応じて通貨換算費用が発生します。実際の率は国、通貨、アカウント、支払い方法で異なるため、各管理画面を確認してください。

換算費用を減らすには、可能であれば主に受け取る決済通貨とKo-fiページの通貨を近づけます。

5. Connectedの後に支援者側を確認する

Payment設定で次を見直します。

• ページ通貨
• Coffee、Tip、Supportなどの表現
• 最低支援金額
• 自動お礼メッセージ
• 月額支援・Membershipの有無
• Ko-fiの手数料モード

支援者に表示される決済方法は、クリエイター設定、支援者の地域、通貨、支払い種類、ブラウザ、端末によって変わります。Stripeを接続しただけで全員にApple Payが出るわけではなく、PayPalの地域別決済も同じ表示にはなりません。

6. Webサイトには最初に直接リンクを置く

<a
  href="https://ko-fi.com/yourname"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Ko-fiで私たちを支援する"
>
  ☕ 支援する
</a>

yournameを実際のページ名へ変更します。直接リンクなら：

• PayPal API、Webhook、秘密鍵、バックエンドが不要
• Ko-fiの第三者スクリプトを読み込まない
• サイトのデザインをそのまま使える
• 支払い処理をKo-fiと決済事業者に任せられる

設置場所は記事末尾、フッター、製品説明の近く、主要ナビゲーションのいずれかで十分です。同じボタンをヘッダー、メニュー、本文、フローティング領域へ重複させる必要はありません。

7. ページ内で展開したい場合だけWidgetを使う

Ko-fiのWidget設定にはFloating ButtonとTip Panelがあります。

Floating Button

クリックするとTip Panelが展開します。セルフホストサイトでは、Ko-fiが生成したコードを終了</body>の直前へ置きます。Next.jsなどのフレームワークでは、全体レイアウトまたは公式のスクリプト読み込み機能から一度だけ追加します。

Tip Panel

常に表示されるため、支援専用ページ、サイドバー、フッターに向いています。カスタムHTMLを許可する場所へ生成コードを貼り付けます。

目的	選択
最短で公開したい	直接リンク
第三者スクリプトを避けたい	直接リンク
デザインを完全に合わせたい	直接リンク
同じページ内で支援パネルを開きたい	Floating Button
支援欄を常時表示したい	Tip Panel

現在の公式資料では、Widgetから1回限りのTipとMembership・月額支援を利用できます。ただし、Widget内ではApple PayとGoogle Payを現在利用できません。ShopとCommissionもWidgetへ埋め込めないため、必要な場合はKo-fiページの/shopまたは/commissionsへ直接リンクします。

8. 公開前チェックリスト

1. Ko-fiからログアウトした状態で自分のサイトを開く。
2. ボタンが管理画面ではなく公開ページを開くことを確認する。
3. 支払い方法が一つ以上表示されることを確認する。
4. PCとスマートフォンで、ボタンが本文や操作を隠さないか確認する。
5. 表示テキストまたは正しいaria-labelを残す。
6. Widgetではスクリプト重複、CSP、コンソールエラーを確認する。
7. Ko-fi側の通貨、手数料モード、Connected状態を再確認する。
8. 最小額の実取引を行うかは決済アカウント本人が判断する。処理手数料は発生し得る。

よくある問題

ページはあるが受け取れない

Settings → Paymentで少なくとも一つがConnectedである必要があります。公開ページの作成だけでは受取設定は完了しません。

PayPalへログイン済みなのに未接続

ログインとKo-fiへの認可は別です。Ko-fiのConnectから開始し、Ko-fi側にConnectedが出るまで認可を完了します。

Ko-fiに出金ボタンがない

支援金はPayPalまたはStripeへ直接入るため、残高、入金処理、出金は各決済事業者で管理します。

公開ページではウォレットが出るのにWidgetでは出ない

現在の仕様です。条件が合えば公開決済ページにApple PayやGoogle Payが表示されることがありますが、Tip Widgetは両方に未対応です。ウォレットが重要なら直接リンクを使います。

ボタンは表示されるが反応しない

直接リンクではhttps://ko-fi.com/yourname全体を確認します。Widgetではスクリプトを一度だけ読み込み、CSPがKo-fiリソースを許可しているか確認します。

公式資料

• Ko-fiを始める
• Ko-fiでの受け取り方法
• Ko-fiで利用できる支払い方法
• Ko-fi Tip Widget
• Ko-fiの手数料