メインコンテンツまでスキップ

Browser SDK

決済手段を自社サイトに組み込む際のSDKを提供しております。

クイックスタート​

Jamm決済ボタンを組み込むためのcode snippetは以下になります。

// initialize SDK with your merchant ID / token
Jamm.init({
  merchantId: 'YOUR_MERCHANT_ID',
});
// add a payment button
Jamm.setupPayment({
  mode: 'default',
  containerId: 'jamm-button-container',
  // what the new container will be called (where the button will be rendered)
  getRedirectUrl: async () => {
    // please call your server to prepare payment
    const response = await fetch('/api/prepare-payment');
    const data = await response.json();
    return data.redirectUrl;
  },
});

インストール​

Script Tag​

以下のスクリプトでJamm SDKをフロントエンドに組み込んでください。

NPM / Yarn / Deno Package​

npmをご利用の場合や、TypeScriptをご利用の方は以下のモジュールをご利用ください。

npm install @jamm/payment-sdk

or

yarn add @jamm/payment-sdk

or

pnpm/bun/deno

そして以下をインポートください

// TypeScript
import { Jamm } from '@jamm/payment-sdk';

セットアップ​

Merchant Credentialでinitializationを行ってください。

// Example
Jamm.init({
  merchantId: "YOUR_MERCHANT_ID", // Required  language: 'en', 
  // Optional: 'en' or 'ja' (defaults to 'en')
});

決済ボタン​

いくつかのJamm決済ボタンをご用意しております。

Pre-set Button​

// Example
Jamm.setupPayment({
  mode: "default",
  containerId: "jamm-button",
  style: "default", // 'default', 'text-only', 'icon-only', or 'text-with-icon'  size: 'medium', // 'small', 'medium', or 'large'
  getRedirectUrl: async () => {
    // call your server here to prepare payment
  },
});

Buttonスタイル

  • default: Standard button with text (推奨)
  • text-only: Text-only button, good for integration
  • icon-only: Icon-only button, good if you’re space constrained
  • text-with-icon: Text with Jamm icon (推奨)

Buttonサイズ

  • small: 32px height
  • medium: 40px height (推奨)
  • large: 48px height

Custom Button​

以下の形でカスタムボタンを設定ください。

  // Example
  Jamm.setupPayment({
     mode: 'custom',
     elementSelector: '#custom-button', // what your custom element (to trigger the payment) is called
     getRedirectUrl: async () => {
       // Your server call here
        },
  });

決済フロー​

  • getRedirectUrl

このコードでサーバー・バックエンドに決済指示を飛ばします。

// Example
async function getRedirectUrl() {
  try {
    const response = await fetch("/api/prepare-payment", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        amount: 1000,
        currency: "JPY", // add any other payment details, but make sure to verify this in your backend for security
      }),
    });

    if (!response.ok) {
      throw new Error("Failed to prepare payment");
    }
    const data = await response.json();
    return data.redirectUrl;
  } catch (error) {
    console.error("Payment preparation failed:", error);
    throw error;
  }
}

Payment Window​

JammはデフォルトでPopupウィンドウにて開きます。 Popupがブロックされている場合、以下の挙動になります。

  1. モーダル発火
  2. フルページリダイレクト実行

この挙動は以下のように制御できます。

// Prefer modal
Jamm.setFallbackMode('modal'); // or 'redirect'

##Events & Callbacks

以下の形でPayment eventを確認して、UIを更新します。

// Payment started
Jamm.on("paymentStart", (data) => {
  console.log("Payment started:", data); // Example: Show loading indicator
});
// Payment window closed
Jamm.on("popupClosed", (data) => {
  console.log("Window closed:", data); // Example: Check payment status
});
// Handle errors (WIP - Not yet implemented)
Jamm.setupPayment({
  // ... other options ...
  onError: (error) => {
    console.error("Something went wrong", error);
    // Example: Show error message to user, etc
    // This is not yet implemented
  },
});

イベントの種類

  • paymentStart: Payment開始時
  • popupClosed: Window/popupが閉じられた時
  • popupBlocked: Window/popupがブロックされた時

Localization​

英語・日本語へのlocalizationを提供しています。

// Japanese
Jamm.init({
  merchantId: "YOUR_MERCHANT_ID",
  language: "ja", // All UI text will be in Japanese
});

Mobile Support​

Browser SDKは全てmobile friendlyに設計されています。

  • ボタンサイズは全てレスポンシブ対応
  • ボタンはタッチ・ジェスチャー対応
  • Popup失敗時の自動対応
  • モバイルでのBottom sheet modals
  • iOS safe area対応

Security​

必ず以下をご確認ください。

  1. Payment preparationは必ずserver-sideで行う
  2. API Token等の重要な情報はclient sideにexposeしない
  3. Server responseは必ずvalidationを行う
  4. EndpointにHTTPSを必ず使う
  5. Merchant Credentialを公開・紛失しない

Troubleshooting​

  • Buttonが表示されない
    • Check if containerId matches your HTML element
    • Ensure SDK is initialized before setupPayment (important)
    • Check browser console for errors
  • Popupがブロックされた
    • Our SDK will attempt to handle this with fallbacks
    • No action needed from you
    • Users get seamless alternative (modal/redirect) - redirect is foolproof and will always work
  • Payment Preparationが失敗
    • Verify your server endpoint is responding and configured
    • Check getRedirectUrl implementation
    • Ensure proper error handling
  • その他