メインコンテンツへスキップ

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パッケージはすべてのバンドラーで動作します。

関連リソース

次のステップ

  1. Omise.jsをインストール(現在のページ)
  2. 統合方法を選択
  3. トークン化を実装
  4. テストカードでテスト
  5. サーバーサイドでチャージを追加
  6. 本番稼働