俺
ログイン 新規登録

俺のあぷり 決済導入ガイド

🚀 5分で実装！超簡単決済システム

ore_appの決済システムは、たった3ステップで実装できます。

📋 前提条件

  1. ore_appにアプリを登録済み
  2. アプリIDを取得済み（アプリ詳細ページで確認可能）
  3. HTMLを編集できる環境

🔧 実装手順

ステップ1: SDKを読み込む

HTMLの<head>タグ内、または</body>タグの直前に以下を追加：

<script src="https://ore-app.com/sdk/v1/payment.js" data-app-id="あなたのアプリID"></script>

ステップ2: 決済ボタンを設置

決済ボタンを設置したい場所に以下のHTMLを追加：

<button class="ore-app-pay" data-item="プレミアム機能" data-price="500">
    プレミアム機能を購入（500円）
</button>

ステップ3: 完了！

これだけです！ボタンをクリックすると決済画面が開きます。

📖 詳細な使い方

ボタンの属性

属性 必須 説明 例
class ✅ ore-app-payを指定 class="ore-app-pay"
data-item ❌ 購入アイテム名（省略時は「アイテム」） data-item="広告削除"
data-price ✅ 金額（100円以上） data-price="1000"
data-success-url ❌ 決済成功後のURL data-success-url="https://app.com/thanks"
data-cancel-url ❌ キャンセル時のURL data-cancel-url="https://app.com/pricing"
data-no-style ❌ デフォルトスタイルを無効化 data-no-style

実装例

基本的な実装

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="https://ore-app.com/sdk/v1/payment.js" data-app-id="app_123456"></script>
</head>
<body>
    <h1>プレミアムプラン</h1>
    <button class="ore-app-pay" data-item="プレミアムプラン" data-price="980">
        プレミアムプランを購入（980円/月）
    </button>
</body>
</html>

複数の価格プラン

<div class="pricing-table">
    <div class="plan">
        <h3>ベーシック</h3>
        <button class="ore-app-pay" data-item="ベーシックプラン" data-price="500">
            500円で購入
        </button>
    </div>

    <div class="plan">
        <h3>プロ</h3>
        <button class="ore-app-pay" data-item="プロプラン" data-price="1500">
            1,500円で購入
        </button>
    </div>

    <div class="plan">
        <h3>エンタープライズ</h3>
        <button class="ore-app-pay" data-item="エンタープライズプラン" data-price="5000">
            5,000円で購入
        </button>
    </div>
</div>

カスタムスタイル

<style>
.my-payment-button {
    background: linear-gradient(to right, #667eea, #764ba2);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
</style>

<button class="ore-app-pay my-payment-button" 
        data-item="特別オファー" 
        data-price="2000"
        data-no-style>
    🎁 特別オファー 2,000円
</button>

🔒 セキュリティ

  • 決済処理は全てStripeの安全なサーバーで実行されます
  • カード情報はあなたのサーバーを経由しません
  • PCI DSS準拠の最高レベルのセキュリティ

💰 手数料

  • プラットフォーム手数料: 10%
  • Stripe決済手数料: 3.6%
  • 合計: 13.6%

例：1,000円の商品を販売した場合 - 購入者の支払い: 1,000円 - Stripe手数料: 36円 - ore_app手数料: 100円 - あなたの収益: 864円

📊 売上の確認

売上はore_appの開発者ダッシュボードで確認できます。

  1. ore_appにログイン
  2. 「売上ダッシュボード」をクリック
  3. 売上履歴・振込状況を確認

💸 振込について

自動振込（Stripe Connect利用時）

  • 最低振込金額: なし
  • 振込タイミング: 売上発生から2営業日後
  • 振込手数料: 無料

振込先の設定

  1. ore_appにログイン
  2. 「振込先設定」をクリック
  3. Stripe Connectの案内に従って口座情報を入力
  4. 審査完了後、自動振込開始

❓ よくある質問

Q: テスト環境で試せますか？

A: はい。開発中はStripeのテストモードで動作確認できます。

Q: PWAでも使えますか？

A: はい。PWAでも通常のWebアプリと同様に使用できます。

Q: 返金処理はどうなりますか？

A: ore_appの管理画面から返金申請を行えます。

Q: 月額課金（サブスクリプション）は対応していますか？

A: 現在は単発決済のみ対応しています。サブスクリプション機能は開発中です。

🆘 サポート

導入に関する質問は以下までお問い合わせください：

  • メール: support@ore-app.com
  • Discord: ore_app開発者コミュニティ
  • Twitter: @ore_app_support

📝 実装チェックリスト

  • [ ] ore_appにアプリ登録済み
  • [ ] アプリIDを取得
  • [ ] SDKスクリプトを追加
  • [ ] 決済ボタンを設置
  • [ ] テスト決済を実行
  • [ ] 振込先を設定
  • [ ] 本番環境で公開

以上で決済機能の実装は完了です！🎉

← 開発者ガイドに戻る