Omise.jsのインストール

Webアプリケーションにクライアント側で安全な決済トークン化を実現するためにOmise.jsを追加し、設定する方法を学びます。

インストール方法

Omise.jsは2つの方法でインストールできます:

1. CDN（推奨）

最も簡単な方法です。このスクリプトタグをHTMLに追加します:

<!DOCTYPE html>
<html>
<head>
    <title>My Store</title>
</head>
<body>
    <!-- Your page content -->

    <!-- Add Omise.js before closing body tag -->
    <script src="https://cdn.omise.co/omise.js"></script>
    <script>
        // Initialize Omise.js
        Omise.setPublicKey("pkey_test_YOUR_PUBLIC_KEY");
    </script>
</body>
</html>

利点:

✅ ビルドステップ不要
✅ 常に最新
✅ ブラウザにキャッシュされる
✅ あらゆるフレームワークで動作

CDN URL:

本番環境: https://cdn.omise.co/omise.js
特定バージョン: https://cdn.omise.co/omise.js@4.0.0
ベータ版: https://cdn.omise.co/omise-next.js

バージョニング

自動的に更新を受け取るために、バージョンなしのURLを使用することをお勧めします。互換性のために特定のバージョンが必要な場合は、バージョン番号を指定してください。

2. NPMパッケージ

モダンなビルドツールとバンドラー用:

# Install via npm
npm install omise-js

# Or via yarn
yarn add omise-js

# Or via pnpm
pnpm add omise-js

JavaScriptでインポートします:

import Omise from 'omise-js';

// 初期化
Omise.setPublicKey('pkey_test_YOUR_PUBLIC_KEY');

設定

基本セットアップ

// 公開鍵を設定
Omise.setPublicKey("pkey_test_YOUR_PUBLIC_KEY");

// 設定を確認
console.log('Omise.js読み込み済み:', typeof Omise !== 'undefined');

フレームワーク固有のセットアップ

React

// src/App.jsx
import { useEffect } from 'react';

function App() {
    useEffect(() => {
        // Load Omise.js from CDN
        const script = document.createElement('script');
        script.src = 'https://cdn.omise.co/omise.js';
        script.async = true;
        script.onload = () => {
            window.Omise.setPublicKey(process.env.REACT_APP_OMISE_PUBLIC_KEY);
        };
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return <div>Your app</div>;
}

またはnpmパッケージを使用:

import Omise from 'omise-js';
import { useEffect } from 'react';

function PaymentForm() {
    useEffect(() => {
        Omise.setPublicKey(process.env.REACT_APP_OMISE_PUBLIC_KEY);
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();

        window.Omise.createToken('card', {
            name: cardName,
            number: cardNumber,
            expiration_month: parseInt(expiryMonth),
            expiration_year: parseInt(expiryYear),
            security_code: cvv
        }, (statusCode, response) => {
            if (statusCode === 200) {
                console.log('トークン:', response.id);
            }
        });
    };

    return <form onSubmit={handleSubmit}>{/* フォームフィールド */}</form>;
}

Vue.js

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// Load Omise.js
const script = document.createElement('script');
script.src = 'https://cdn.omise.co/omise.js';
script.onload = () => {
    window.Omise.setPublicKey(import.meta.env.VITE_OMISE_PUBLIC_KEY);
};
document.head.appendChild(script);

createApp(App).mount('#app');

<!-- PaymentForm.vue -->
<template>
    <form @submit.prevent="handleSubmit">
        <!-- form fields -->
    </form>
</template>

<script setup>
const handleSubmit = () => {
    window.Omise.createToken('card', cardData, (statusCode, response) => {
        if (statusCode === 200) {
            console.log('Token:', response.id);
        }
    });
};
</script>

Angular

// app.component.ts
import { Component, OnInit } from '@angular/core';

declare global {
    interface Window {
        Omise: any;
    }
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    ngOnInit() {
        this.loadOmiseScript();
    }

    loadOmiseScript() {
        const script = document.createElement('script');
        script.src = 'https://cdn.omise.co/omise.js';
        script.onload = () => {
            window.Omise.setPublicKey('pkey_test_YOUR_PUBLIC_KEY');
        };
        document.body.appendChild(script);
    }

    handlePayment(cardData: any) {
        window.Omise.createToken('card', cardData, (statusCode: number, response: any) => {
            if (statusCode === 200) {
                console.log('Token:', response.id);
            }
        });
    }
}

Next.js

// pages/_app.js
import { useEffect } from 'react';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Script
                src="https://cdn.omise.co/omise.js"
                onLoad={() => {
                    window.Omise.setPublicKey(process.env.NEXT_PUBLIC_OMISE_PUBLIC_KEY);
                }}
            />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

環境変数

環境変数を使用してAPIキーを安全に保存します:

.envファイル

# .env.local (for Next.js)
NEXT_PUBLIC_OMISE_PUBLIC_KEY=pkey_test_YOUR_KEY

# .env (for React/Vite)
REACT_APP_OMISE_PUBLIC_KEY=pkey_test_YOUR_KEY
VITE_OMISE_PUBLIC_KEY=pkey_test_YOUR_KEY

# .env (for Node.js backend)
OMISE_SECRET_KEY=skey_test_YOUR_SECRET_KEY

シークレットキー

クライアントサイドコードでシークレットキーを絶対に公開しないでください！ブラウザでは公開鍵のみを使用してください。

コードでのアクセス

// React
const publicKey = process.env.REACT_APP_OMISE_PUBLIC_KEY;

// Vite
const publicKey = import.meta.env.VITE_OMISE_PUBLIC_KEY;

// Next.js
const publicKey = process.env.NEXT_PUBLIC_OMISE_PUBLIC_KEY;

// Omise.jsを初期化
Omise.setPublicKey(publicKey);

検証

Omise.jsが正しくインストールされているかテストします:

// Omise.jsが読み込まれているか確認
if (typeof Omise !== 'undefined') {
    console.log('✓ Omise.jsが正常に読み込まれました');
} else {
    console.error('✗ Omise.jsの読み込みに失敗しました');
}

// キーが設定されているか確認
Omise.setPublicKey('pkey_test_YOUR_KEY');

// テストトークン作成で検証
Omise.createToken('card', {
    name: 'Test User',
    number: '4242424242424242',
    expiration_month: 12,
    expiration_year: 2027,
    security_code: '123'
}, function(statusCode, response) {
    if (statusCode === 200) {
        console.log('✓ トークン作成:', response.id);
    } else {
        console.error('✗ トークン作成失敗:', response.message);
    }
});

要件

ブラウザサポート

Omise.jsはすべてのモダンブラウザで動作します:

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 11+
✅ Edge 79+
✅ Opera 47+
✅ iOS Safari 11+
✅ Chrome for Android

HTTPS必須

Omise.jsはHTTPSページでのみ動作します（開発用のlocalhostを除く）。

<!-- ✅ 良い -->
https://yourdomain.com
https://staging.yourdomain.com
http://localhost:3000 (開発のみ)

<!-- ❌ 悪い -->
http://yourdomain.com (動作しません)

コンテンツセキュリティポリシー

CSPヘッダーを使用する場合は、Omiseドメインをホワイトリストに追加します:

<meta http-equiv="Content-Security-Policy"
      content="
        script-src 'self' https://cdn.omise.co;
        connect-src 'self' https://api.omise.co https://vault.omise.co;
        frame-src https://api.omise.co;
      ">

Or in your server configuration:

# Nginx
add_header Content-Security-Policy "script-src 'self' https://cdn.omise.co; connect-src 'self' https://api.omise.co https://vault.omise.co; frame-src https://api.omise.co;";

よくある問題とトラブルシューティング

問題: "Omise is not defined"

原因:

スクリプトがまだ読み込まれていない
広告ブロッカーがスクリプトをブロック
CSPがスクリプトをブロック

解決策:

// スクリプトの読み込みを待つ
window.addEventListener('load', function() {
    if (typeof Omise !== 'undefined') {
        Omise.setPublicKey('pkey_test_YOUR_KEY');
    }
});

// またはスクリプトのonloadイベントを使用
const script = document.createElement('script');
script.src = 'https://cdn.omise.co/omise.js';
script.onload = () => {
    Omise.setPublicKey('pkey_test_YOUR_KEY');
};
document.body.appendChild(script);

問題: "Public key is required"

原因: Omiseメソッドを使用する前にsetPublicKey()を呼び出すのを忘れた

解決策:

// 常に最初にキーを設定
Omise.setPublicKey('pkey_test_YOUR_KEY');

// その後Omiseメソッドを使用
Omise.createToken('card', cardData, callback);

問題: CORSエラー

原因: HTTP（HTTPSではない）でOmise.jsを使用しようとしている

解決策:

本番環境ではHTTPSを使用
開発用にhttp://localhostを使用
またはngrokを使用: ngrok http 3000

問題: ローカルでは動作するが本番環境では動作しない

原因:

本番環境でテストキーを使用
HTTPSが設定されていない
CSPがリクエストをブロック

解決策:

ライブキーを使用: pkey_live_...
HTTPSが有効になっていることを確認
CSPヘッダーを確認
ファイアウォールルールを確認

インストールのテスト

シンプルなテストページを作成:

<!DOCTYPE html>
<html>
<head>
    <title>Omise.js Test</title>
</head>
<body>
    <h1>Omise.js インストール Test</h1>
    <div id="status">Loading...</div>

    <script src="https://cdn.omise.co/omise.js"></script>
    <script>
        const statusEl = document.getElementById('status');

        // Test 1: Check if Omise.js loaded
        if (typeof Omise === 'undefined') {
            statusEl.innerHTML = '❌ Omise.js failed to load';
            statusEl.style.color = 'red';
        } else {
            statusEl.innerHTML = '✅ Omise.js loaded successfully!';
            statusEl.style.color = 'green';

            // Test 2: Set public key
            try {
                Omise.setPublicKey('pkey_test_5xs8t3mho5d4pbbkjz1dk');
                statusEl.innerHTML += '<br>✅ Public key set successfully!';

                // Test 3: Create test token
                Omise.createToken('card', {
                    name: 'Test User',
                    number: '4242424242424242',
                    expiration_month: 12,
                    expiration_year: 2027,
                    security_code: '123'
                }, function(statusCode, response) {
                    if (statusCode === 200) {
                        statusEl.innerHTML += '<br>✅ Test token created: ' + response.id;
                    } else {
                        statusEl.innerHTML += '<br>❌ Token creation failed: ' + response.message;
                        statusEl.style.color = 'orange';
                    }
                });
            } catch (error) {
                statusEl.innerHTML += '<br>❌ Error: ' + error.message;
                statusEl.style.color = 'red';
            }
        }
    </script>
</body>
</html>

よくある質問

サーバーにOmise.jsをインストールする必要がありますか？

いいえ！Omise.jsはブラウザでのみ実行されるクライアントサイドライブラリです。サーバーサイドの操作（チャージの作成、返金など）には、サーバーライブラリを使用してください。

Omise.jsはオフラインで使用できますか？

いいえ、Omise.jsはトークン化のためにOmiseサーバーと通信するためにインターネット接続が必要です。ユーザーとサーバーの両方がインターネットアクセスを必要とします。

どのバージョンを使用すべきですか？

自動的に更新とバグ修正を受け取るために、バージョンなしのCDN URL（https://cdn.omise.co/omise.js）を使用してください。互換性の保証が必要な場合のみ、特定のバージョンに固定してください。

Omise.jsを自己ホストできますか？

技術的には可能ですが、以下の理由から強くお勧めしません:

セキュリティアップデートを受け取れません
PCI準拠に影響する可能性があります
パフォーマンスが遅くなる可能性があります
更新はあなたの責任です

常に公式CDNを使用してください。

Omise.jsはTypeScriptで動作しますか？

はい！型定義をインストールします:

npm install --save-dev @types/omise

型と一緒に使用:

declare global {
    interface Window {
        Omise: any;
    }
}

window.Omise.setPublicKey('pkey_test_YOUR_KEY');

バンドラー互換性はどうですか？

Omise.jsはすべてのモダンバンドラーで動作します:

✅ Webpack
✅ Vite
✅ Rollup
✅ Parcel
✅ esbuild

最高のパフォーマンスのためにCDN経由の読み込みをお勧めしますが、npmパッケージはすべてのバンドラーで動作します。

Omise.jsのインストール

インストール方法

1. CDN（推奨）

2. NPMパッケージ

設定

基本セットアップ

フレームワーク固有のセットアップ

React

Vue.js

Angular

Next.js

環境変数

.envファイル

コードでのアクセス

検証

要件

ブラウザサポート

HTTPS必須

コンテンツセキュリティポリシー

よくある問題とトラブルシューティング

問題: "Omise is not defined"

問題: "Public key is required"

問題: CORSエラー

問題: ローカルでは動作するが本番環境では動作しない

インストールのテスト

よくある質問

関連リソース

次のステップ

インストール方法​

1. CDN（推奨）​

2. NPMパッケージ​

設定​

基本セットアップ​

フレームワーク固有のセットアップ​

React​

Vue.js​

Angular​

Next.js​

環境変数​

.envファイル​

コードでのアクセス​

検証​

要件​

ブラウザサポート​

HTTPS必須​

コンテンツセキュリティポリシー​

よくある問題とトラブルシューティング​

問題: "Omise is not defined"​

問題: "Public key is required"​

問題: CORSエラー​

問題: ローカルでは動作するが本番環境では動作しない​

インストールのテスト​

よくある質問​

関連リソース​

次のステップ​

インストール方法

1. CDN（推奨）

2. NPMパッケージ

設定

基本セットアップ

フレームワーク固有のセットアップ

React

Vue.js

Angular

Next.js

環境変数

.envファイル

コードでのアクセス

検証

要件

ブラウザサポート

HTTPS必須

コンテンツセキュリティポリシー

よくある問題とトラブルシューティング

問題: "Omise is not defined"

問題: "Public key is required"

問題: CORSエラー

問題: ローカルでは動作するが本番環境では動作しない

インストールのテスト

よくある質問

関連リソース

次のステップ