Browser SDK

ブラウザ決済モーダルの実装

対象となるサービス

• React/Next.jsを使用したウェブアプリケーション
• モダンなウェブフロントエンド

本機能によってできること

• ユーザーフレンドリーな決済モーダルをアプリケーションに統合
• Jammの決済フローをシームレスに実装
• レスポンシブデザインで全デバイスに対応

デモ

以下は実際のJamm決済モーダルのデモです。下記のリンクをクリックして、モーダルの動作を確認できます。

モーダル

実装例

PaymentPage.jsx

import { JammModal } from '@jamm/react';

function PaymentPage() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div>
            <a
                href="#"
                onClick={e => {
                    e.preventDefault();
                    setShowModal(true);
                }}
            >
                Jammについて詳しく見る
            </a>

            {showModal && (
                <JammModal 
                    onClose={() => setShowModal(false)}
                />
            )}
        </div>
    );
}