俺
ログイン 新規登録

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

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

ore_pay SDK を使えば、たった3ステップで決済機能を実装できます。

📋 前提条件（必ず確認！）

  1. Stripe Connect 登録済み（最重要！）
  2. 俺のあぷりダッシュボードから Stripe Connect に登録
  3. 登録URL: https://www.oreapp.life/dashboard/stripe-connect/

  4. 本人確認・口座情報登録が必要

  5. 公開鍵（API Key）を取得済み

  6. ダッシュボードから取得: https://www.oreapp.life/dashboard/

  7. pk_live_xxxxx 形式の公開鍵をコピー

  8. HTMLを編集できる環境

  9. あなたのWebアプリ・PWAのHTMLファイル

🔧 実装手順

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

HTMLの </body> タグの直前に以下を追加：

<script src="https://www.oreapp.life/static/js/orepay-sdk.js"></script>

ステップ2: 決済ボタンを作成

<button id="purchase-btn" class="btn btn-primary">
  プレミアム機能を購入（1,000円）
</button>

<script>
  // ore_pay 初期化
  const orePay = new OrePay({
    apiKey: 'pk_live_あなたの公開鍵',  // ダッシュボードから取得
    environment: 'production'
  });

  // ボタンに決済機能を追加
  orePay.attachToButton('#purchase-btn', {
    amount: 1000,
    productName: 'プレミアム機能',
    description: '広告非表示＋限定機能',
    successUrl: 'https://yourapp.com/success',
    cancelUrl: 'https://yourapp.com/cancel'
  });
</script>

ステップ3: 完了！

これだけです！ボタンをクリックすると安全な決済画面（Stripe Checkout）が開きます。

📖 詳細な使い方

OrePay クラスのAPI

初期化

const orePay = new OrePay({
  apiKey: 'pk_live_xxx',      // 必須: ダッシュボードから取得
  environment: 'production'   // オプション: 'production' または 'test'
});

ボタンに決済機能を追加

orePay.attachToButton(selector, params);

パラメータ:

パラメータ 必須 説明 例
selector ✅ ボタンのCSSセレクタ '#purchase-btn'
params.amount ✅ 金額（100円以上） 1000
params.productName ✅ 商品名 'プレミアムプラン'
params.description ❌ 商品説明 '広告非表示'
params.successUrl ✅ 決済成功後のURL 'https://app.com/thanks'
params.cancelUrl ✅ キャンセル時のURL 'https://app.com/pricing'
params.metadata ❌ カスタムデータ { userId: 123 }
params.buyerEmail ❌ 購入者メール 'user@example.com'

💡 実装例

基本的な実装

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <h1>プレミアムプラン</h1>
    <button id="purchase-btn" class="btn btn-primary">
        プレミアムプランを購入（980円/月）
    </button>

    <!-- ore_pay SDK 読み込み -->
    <script src="https://www.oreapp.life/static/js/orepay-sdk.js"></script>

    <script>
        const orePay = new OrePay({
            apiKey: 'pk_live_あなたの公開鍵',
            environment: 'production'
        });

        orePay.attachToButton('#purchase-btn', {
            amount: 980,
            productName: 'プレミアムプラン',
            description: '広告非表示＋限定機能',
            successUrl: 'https://myapp.com/success',
            cancelUrl: 'https://myapp.com/pricing'
        });
    </script>
</body>
</html>

複数の価格プラン

<div class="pricing-table">
    <div class="plan">
        <h3>ベーシック</h3>
        <button id="basic-btn" class="btn">500円で購入</button>
    </div>

    <div class="plan">
        <h3>プロ</h3>
        <button id="pro-btn" class="btn">1,500円で購入</button>
    </div>

    <div class="plan">
        <h3>エンタープライズ</h3>
        <button id="enterprise-btn" class="btn">5,000円で購入</button>
    </div>
</div>

<script src="https://www.oreapp.life/static/js/orepay-sdk.js"></script>
<script>
    const orePay = new OrePay({
        apiKey: 'pk_live_あなたの公開鍵',
        environment: 'production'
    });

    // ベーシックプラン
    orePay.attachToButton('#basic-btn', {
        amount: 500,
        productName: 'ベーシックプラン',
        successUrl: 'https://myapp.com/success',
        cancelUrl: 'https://myapp.com/pricing'
    });

    // プロプラン
    orePay.attachToButton('#pro-btn', {
        amount: 1500,
        productName: 'プロプラン',
        successUrl: 'https://myapp.com/success',
        cancelUrl: 'https://myapp.com/pricing'
    });

    // エンタープライズプラン
    orePay.attachToButton('#enterprise-btn', {
        amount: 5000,
        productName: 'エンタープライズプラン',
        successUrl: 'https://myapp.com/success',
        cancelUrl: 'https://myapp.com/pricing'
    });
</script>

簡単な1行実装（OrePay.quickButton）

<button id="purchase-btn">プレミアム機能を購入</button>

<script src="https://www.oreapp.life/static/js/orepay-sdk.js"></script>
<script>
    // 1行で完了！
    OrePay.quickButton('#purchase-btn', {
        apiKey: 'pk_live_あなたの公開鍵',
        amount: 1000,
        productName: 'プレミアム機能',
        successUrl: 'https://myapp.com/success',
        cancelUrl: 'https://myapp.com/cancel'
    });
</script>

カスタムスタイル

<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);
    transition: all 0.3s ease;
}

.my-payment-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
</style>

<button id="special-offer-btn" class="my-payment-button">
    🎁 特別オファー 2,000円
</button>

<script src="https://www.oreapp.life/static/js/orepay-sdk.js"></script>
<script>
    const orePay = new OrePay({
        apiKey: 'pk_live_あなたの公開鍵',
        environment: 'production'
    });

    orePay.attachToButton('#special-offer-btn', {
        amount: 2000,
        productName: '特別オファー',
        description: '期間限定！50%OFF',
        successUrl: 'https://myapp.com/thanks',
        cancelUrl: 'https://myapp.com/'
    });
</script>

🔒 セキュリティ

  • 決済処理は全て Stripe の安全なサーバー で実行されます
  • カード情報はあなたのサーバーを経由しません
  • PCI DSS 準拠 の最高レベルのセキュリティ
  • ore_pay SDK は公開鍵（pk_live_xxx）のみ使用、秘密鍵は不要

💰 手数料

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

例：1,000円の商品を販売した場合

  • 購入者の支払い: 1,000円
  • Stripe 手数料: 36円
  • ore_app 手数料: 100円
  • あなたの収益: 864円

📊 売上の確認

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

  1. https://www.oreapp.life/dashboard/ にアクセス
  2. 売上履歴・振込状況を確認
  3. 取引詳細・手数料の内訳を確認

💸 振込について

自動振込（Stripe Connect 利用）

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

振込先の設定

  1. https://www.oreapp.life/dashboard/stripe-connect/ にアクセス
  2. Stripe Connect の案内に従って口座情報を入力
  3. 本人確認書類をアップロード
  4. 審査完了後、自動振込開始

🧪 テスト環境での確認

テストモード公開鍵を使用

const orePay = new OrePay({
    apiKey: 'pk_test_xxxxx',  // テスト用公開鍵
    environment: 'test'
});

Stripe テストカード

決済テストには以下のテストカードを使用：

  • カード番号: 4242 4242 4242 4242
  • 有効期限: 未来の任意の日付（例: 12/34）
  • CVC: 任意の3桁（例: 123）

❓ よくある質問

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

A: はい。pk_test_xxxxx 形式のテスト用公開鍵を使用すれば、Stripe のテストモードで動作確認できます。

Q: PWA でも使えますか？

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

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

A: ore_app の管理画面から返金申請を行えます。Stripe 経由で自動的に返金処理されます。

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

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

Q: 公開鍵（API Key）はどこで取得できますか？

A: https://www.oreapp.life/dashboard/ から取得できます。Stripe Connect 登録完了後に表示されます。

Q: Stripe Connect 登録は必須ですか？

A: はい、必須です。Stripe Connect に登録しないと公開鍵が取得できず、決済機能が使用できません。

🆘 サポート

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

  • メール: support@oreapp.life
  • お問い合わせフォーム: https://www.oreapp.life/contact/

📝 実装チェックリスト

  • [ ] Stripe Connect 登録済み（https://www.oreapp.life/dashboard/stripe-connect/）
  • [ ] 公開鍵（API Key）を取得済み
  • [ ] ore_pay SDK スクリプトを HTML に追加
  • [ ] 決済ボタンを設置
  • [ ] OrePay クラスを初期化
  • [ ] attachToButton で決済機能を追加
  • [ ] テスト決済を実行（テストカード使用）
  • [ ] 本番環境で公開

以上で ore_pay SDK による決済機能の実装は完了です！🎉

← 開発者ガイドに戻る