การติดตั้ง Omise.js

เรียนรู้วิธีเพิ่ม Omise.js ลงในเว็บแอปพลิเคชันของคุณและกำหนดค่าสำหรับการสร้าง token การชำระเงินอย่างปลอดภัย

วิธีการติดตั้ง

Omise.js สามารถติดตั้งได้สองวิธี:

1. CDN (แนะนำ)

วิธีที่ง่ายที่สุดในการเริ่มต้น เพิ่มแท็ก script นี้ลงใน 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>

ประโยชน์:

✅ ไม่ต้องมีขั้นตอนการ build
✅ อัปเดตอยู่เสมอ
✅ แคชโดยเบราว์เซอร์
✅ ใช้งานได้กับทุก framework

CDN URLs:

สำหรับใช้งานจริง: 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

สำหรับเครื่องมือ build และ bundler สมัยใหม่:

# 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');

การกำหนดค่า

การตั้งค่าพื้นฐาน

// ตั้งค่า public key ของคุณ
Omise.setPublicKey("pkey_test_YOUR_PUBLIC_KEY");

// ตรวจสอบการกำหนดค่า
console.log('Omise.js loaded:', typeof Omise !== 'undefined');

การตั้งค่าเฉพาะสำหรับ Framework

React

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

function App() {
    useEffect(() => {
        // โหลด Omise.js จาก 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('Token:', response.id);
            }
        });
    };

    return <form onSubmit={handleSubmit}>{/* form fields */}</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 keys ของคุณอย่างปลอดภัยโดยใช้ตัวแปรสภาพแวดล้อม:

ไฟล์ .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

Secret Keys

อย่าเปิดเผย secret key ของคุณในโค้ดฝั่ง client เด็ดขาด! ใช้เฉพาะ public 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 ติดตั้งอย่างถูกต้อง:

// Check if Omise.js is loaded
if (typeof Omise !== 'undefined') {
    console.log('✓ Omise.js loaded successfully');
} else {
    console.error('✗ Omise.js failed to load');
}

// Check if key is set
Omise.setPublicKey('pkey_test_YOUR_KEY');

// Verify with a test token creation
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('✓ Token created:', response.id);
    } else {
        console.error('✗ Token creation failed:', 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 สำหรับการพัฒนา)

<!-- ✅ GOOD -->
https://yourdomain.com
https://staging.yourdomain.com
http://localhost:3000 (development only)

<!-- ❌ BAD -->
http://yourdomain.com (will not work)

Content Security Policy

If you use CSP headers, whitelist Omise domains:

<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;
      ">

หรือในการกำหนดค่าเซิร์ฟเวอร์ของคุณ:

# 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"

สาเหตุ:

Script ยังโหลดไม่เสร็จ
Script ถูกบล็อกโดย ad blocker
CSP บล็อก script

แก้ไข:

// Wait for script to load
window.addEventListener('load', function() {
    if (typeof Omise !== 'undefined') {
        Omise.setPublicKey('pkey_test_YOUR_KEY');
    }
});

// Or use script onload event
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"

สาเหตุ: ลืมเรียก setPublicKey() ก่อนใช้เมธอดของ Omise

แก้ไข:

// Always set key first
Omise.setPublicKey('pkey_test_YOUR_KEY');

// Then use Omise methods
Omise.createToken('card', cardData, callback);

ปัญหา: CORS errors

สาเหตุ: พยายามใช้ Omise.js บน HTTP (ไม่ใช่ HTTPS)

แก้ไข:

ใช้ HTTPS ในการใช้งานจริง
ใช้ http://localhost สำหรับการพัฒนา
หรือใช้ ngrok: ngrok http 3000

ปัญหา: ทำงานได้ในเครื่องแต่ไม่ได้ในการใช้งานจริง

สาเหตุ:

ใช้ test keys ในการใช้งานจริง
ไม่ได้กำหนดค่า HTTPS
CSP บล็อกคำขอ

แก้ไข:

ใช้ live keys: pkey_live_...
ตรวจสอบให้แน่ใจว่าเปิดใช้งาน HTTPS
ตรวจสอบ CSP headers
ตรวจสอบกฎ firewall

การทดสอบการติดตั้ง

สร้างหน้าทดสอบง่ายๆ:

<!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 เป็นไลบรารีฝั่ง client ที่ทำงานในเบราว์เซอร์เท่านั้น สำหรับการดำเนินการฝั่ง server (การสร้าง charges, refunds ฯลฯ) ให้ใช้ server libraries

Omise.js ใช้งานแบบออฟไลน์ได้หรือไม่?

ไม่ได้ Omise.js ต้องการการเชื่อมต่ออินเทอร์เน็ตเพื่อสื่อสารกับเซิร์ฟเวอร์ของ Omise สำหรับการสร้าง token ทั้งผู้ใช้และเซิร์ฟเวอร์ของคุณต้องมีการเชื่อมต่ออินเทอร์เน็ต

ฉันควรใช้เวอร์ชันไหน?

ใช้ CDN URL ที่ไม่มีเวอร์ชัน (https://cdn.omise.co/omise.js) เพื่อรับการอัปเดตและการแก้ไขบั๊กโดยอัตโนมัติ ระบุเวอร์ชันเฉพาะเฉพาะเมื่อคุณต้องการความเข้ากันได้ที่แน่นอน

ฉันสามารถโฮสต์ Omise.js เองได้หรือไม่?

แม้ว่าจะเป็นไปได้ในทางเทคนิค แต่เราไม่แนะนำอย่างยิ่งเพราะ:

คุณจะไม่ได้รับการอัปเดตด้านความปลอดภัย
PCI compliance อาจได้รับผลกระทบ
ประสิทธิภาพอาจช้าลง
คุณต้องรับผิดชอบการอัปเดต

ใช้ CDN อย่างเป็นทางการเสมอ

Omise.js ทำงานกับ TypeScript ได้หรือไม่?

ได้! ติดตั้ง type definitions:

npm install --save-dev @types/omise

จากนั้นใช้งานกับ types:

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

window.Omise.setPublicKey('pkey_test_YOUR_KEY');

เกี่ยวกับความเข้ากันได้กับ bundler ล่ะ?

Omise.js ทำงานได้กับ bundler สมัยใหม่ทั้งหมด:

✅ Webpack
✅ Vite
✅ Rollup
✅ Parcel
✅ esbuild

เราแนะนำให้โหลดผ่าน CDN เพื่อประสิทธิภาพที่ดีที่สุด แต่แพ็คเกจ npm ทำงานได้กับ bundler ทั้งหมด

ทรัพยากรที่เกี่ยวข้อง

การผสานรวมฟอร์มการชำระเงิน - ใช้ฟอร์มการชำระเงินสำเร็จรูป
การผสานรวมแบบกำหนดเอง - สร้าง UI แบบกำหนดเอง
API Reference - เอกสารเมธอดแบบสมบูรณ์
คู่มือการทดสอบ - ทดสอบการผสานรวมของคุณ
แนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด

วิธีการติดตั้ง​

1. CDN (แนะนำ)​

2. แพ็คเกจ NPM​

การกำหนดค่า​

การตั้งค่าพื้นฐาน​

การตั้งค่าเฉพาะสำหรับ Framework​

React​

Vue.js​

Angular​

Next.js​

ตัวแปรสภาพแวดล้อม​

ไฟล์ .env​

การเข้าถึงในโค้ด​

การตรวจสอบ​

ข้อกำหนด​

การรองรับเบราว์เซอร์​

ต้องใช้ HTTPS​

Content Security Policy​

ปัญหาที่พบบ่อยและการแก้ไข​

ปัญหา: "Omise is not defined"​

ปัญหา: "Public key is required"​

ปัญหา: CORS errors​

ปัญหา: ทำงานได้ในเครื่องแต่ไม่ได้ในการใช้งานจริง​

การทดสอบการติดตั้ง​

คำถามที่พบบ่อย​

ทรัพยากรที่เกี่ยวข้อง​

ขั้นตอนถัดไป​

วิธีการติดตั้ง

1. CDN (แนะนำ)

2. แพ็คเกจ NPM

การกำหนดค่า

การตั้งค่าพื้นฐาน

การตั้งค่าเฉพาะสำหรับ Framework

React

Vue.js

Angular

Next.js

ตัวแปรสภาพแวดล้อม

ไฟล์ .env

การเข้าถึงในโค้ด

การตรวจสอบ

ข้อกำหนด

การรองรับเบราว์เซอร์

ต้องใช้ HTTPS

Content Security Policy

ปัญหาที่พบบ่อยและการแก้ไข

ปัญหา: "Omise is not defined"

ปัญหา: "Public key is required"

ปัญหา: CORS errors

ปัญหา: ทำงานได้ในเครื่องแต่ไม่ได้ในการใช้งานจริง

การทดสอบการติดตั้ง

คำถามที่พบบ่อย

ทรัพยากรที่เกี่ยวข้อง

ขั้นตอนถัดไป