はじめに

PAY.JPは開発者向けのオンライン決済サービスで、APIを通じてクレジットカード決済を簡単に実装できます。
この記事では、テスト環境を使って最小限の決済フォームを実装する手順を説明します。

1. 環境構築

1.1 アカウント作成とAPIキーの取得

PAY.JPの登録ページでアカウントを作成
ダッシュボードにログイン後、「テストモード」のAPIキーを取得
- 公開キー（pk_test_で始まる）
- 秘密キー（sk_test_で始まる）

1.2 テスト用クレジットカード

テスト環境では以下のカード番号が利用可能です：

正常系テスト: 4242 4242 4242 4242
期限切れ: 4242 4242 4242 4241
セキュリティコードエラー: 4242 4242 4242 4240

2. フロントエンド実装

2.1 基本的なHTML構造

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PAY.JP Sample Payment Form</title>
    <script src="https://js.pay.jp/v2/pay.js"></script>
    <style>
        .form-group { margin-bottom: 15px; }
        .error { color: red; display: none; }
    </style>
</head>
<body>
    <form id="payment-form">
        <div class="form-group">
            <label for="card-number">カード番号</label>
            <div id="card-number"></div>
            <div class="error" id="card-number-error"></div>
        </div>
        
        <div class="form-group">
            <label for="card-expiry">有効期限</label>
            <div id="card-expiry"></div>
            <div class="error" id="expiry-error"></div>
        </div>
        
        <div class="form-group">
            <label for="card-cvc">CVC</label>
            <div id="card-cvc"></div>
            <div class="error" id="cvc-error"></div>
        </div>
        
        <button type="submit">支払う</button>
    </form>
</body>
</html>

2.2 JavaScript実装

// PAY.JPの公開キーを設定
const payjp = Payjp('pk_test_YOUR_PUBLIC_KEY');

// Elements インスタンスを生成
const elements = payjp.elements();

// 各フォームエレメントを生成
const cardNumber = elements.create('cardNumber');
const cardExpiry = elements.create('cardExpiry');
const cardCvc = elements.create('cardCvc');

// DOMに追加
cardNumber.mount('#card-number');
cardExpiry.mount('#card-expiry');
cardCvc.mount('#card-cvc');

// エラーハンドリング
const displayError = (elementId, message) => {
    const errorElement = document.getElementById(elementId);
    errorElement.textContent = message;
    errorElement.style.display = message ? 'block' : 'none';
};

cardNumber.on('change', (event) => {
    displayError('card-number-error', event.error ? event.error.message : '');
});

cardExpiry.on('change', (event) => {
    displayError('expiry-error', event.error ? event.error.message : '');
});

cardCvc.on('change', (event) => {
    displayError('cvc-error', event.error ? event.error.message : '');
});

// フォーム送信時の処理
document.getElementById('payment-form').addEventListener('submit', async (event) => {
    event.preventDefault();
    
    const { token, error } = await payjp.createToken(cardNumber);
    
    if (error) {
        displayError('card-number-error', error.message);
        return;
    }
    
    // トークンをサーバーに送信する処理
    console.log('Generated token:', token.id);
    // ここで実際のサーバーにトークンを送信
});

3. バックエンド実装 (Node.js例)

const express = require('express');
const payjp = require('payjp')('sk_test_YOUR_SECRET_KEY');
const app = express();

app.post('/charge', async (req, res) => {
    try {
        const charge = await payjp.charges.create({
            amount: 1000,
            currency: 'jpy',
            card: req.body.token,
            capture: true,
        });
        
        res.json({ success: true, charge });
    } catch (error) {
        res.status(400).json({
            success: false,
            message: error.message
        });
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

4. 動作確認とテスト

フォームの表示確認
- 各フィールドが正しくレンダリングされていることを確認
- スタイリングが適切に適用されていることを確認
バリデーション確認
- 不正なカード番号入力時のエラー表示
- 期限切れカードでのエラー処理
- CVCの桁数チェック
決済フロー確認
- テストカードでの正常決済
- エラーケースの確認
- 決済完了後の画面遷移

5. 本番環境への移行時の注意点

APIキーの切り替え
- テストモードのキーから本番モードのキーへの切り替え
- 本番環境での再テスト実施
セキュリティ対策
- SSL/TLS対応の確認
- クロスサイトスクリプティング対策
- CSRF対策
エラーハンドリング
- ユーザーフレンドリーなエラーメッセージ
- ログ収集と監視体制の整備

おわりに

この実装例は最小限の機能に絞っていますが、実際のサービスでは以下の機能も検討すると良いでしょう：

カード情報の保存機能
定期課金の実装
決済後のメール通知
管理画面での決済状況確認
売上レポート機能

参考リンク