การเก็บรวบรวมข้อมูลบัตร

ใช้ Omise.js เพื่อเก็บรวบรวมรายละเอียดบัตรอย่างปลอดภัยโดยตรงจากเว็บไซต์ของคุณ โดยเก็บข้อมูลที่ละเอียดอ่อนออกจากเซิร์ฟเวอร์ของคุณ

ภาพรวม

Omise.js เป็นไลบรารี JavaScript ฝั่งไคลเอนต์ที่ช่วยให้สามารถทำ tokenization บัตรอย่างปลอดภัยได้โดยตรงจากเว็บไซต์ของคุณ วิธีการนี้ช่วยให้มั่นใจว่าข้อมูลการชำระเงินที่ละเอียดอ่อนจะไม่สัมผัสเซิร์ฟเวอร์ของคุณ ลดภาระการปฏิบัติตาม PCI ของคุณอย่างมาก

วิธีการทำงานของ Tokenization

ประโยชน์หลัก:

• ข้อมูลบัตรไปตรงยังเซิร์ฟเวอร์ที่ได้รับการรับรอง PCI ของ Omise
• เซิร์ฟเวอร์ของคุณรับเพียง token ใช้ครั้งเดียว
• ลดข้อกำหนดการปฏิบัติตาม PCI
• เพิ่มความปลอดภัยให้กับลูกค้าของคุณ

ขั้นตอนการใช้งาน

ขั้นตอนที่ 1: รวมไลบรารี Omise.js

เพิ่มสคริปต์ Omise.js ก่อนแท็กปิด </body>:

<script src="https://cdn.omise.co/omise.js"></script>

ต้องใช้ HTTPS

Omise.js ต้องใช้ HTTPS บนหน้าเช็คเอาต์ของคุณ ใช้ TLS 1.2 หรือสูงกว่าเพื่อความปลอดภัยที่เหมาะสม

ขั้นตอนที่ 2: สร้างฟอร์มการชำระเงิน

สร้างฟอร์ม HTML ของคุณด้วยฟิลด์ป้อนข้อมูลบัตร:

<form id="payment-form">
    <div class="form-group">
        <label for="card-name">ชื่อผู้ถือบัตร</label>
        <input type="text" id="card-name" placeholder="สมชาย ใจดี" required />
    </div>

    <div class="form-group">
        <label for="card-number">หมายเลขบัตร</label>
        <input type="text" id="card-number" placeholder="4242 4242 4242 4242" required />
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="expiry-month">เดือนหมดอายุ</label>
            <input type="text" id="expiry-month" placeholder="12" maxlength="2" required />
        </div>

        <div class="form-group">
            <label for="expiry-year">ปีหมดอายุ</label>
            <input type="text" id="expiry-year" placeholder="2027" maxlength="4" required />
        </div>

        <div class="form-group">
            <label for="cvv">CVV</label>
            <input type="text" id="cvv" placeholder="123" maxlength="4" required />
        </div>
    </div>

    <!-- ที่อยู่สำหรับเรียกเก็บเงินเป็นตัวเลือก (ช่วยเพิ่มอัตราการอนุมัติ) -->
    <div class="form-group">
        <label for="postal-code">รหัสไปรษณีย์</label>
        <input type="text" id="postal-code" placeholder="10110" />
    </div>

    <button type="submit" id="pay-button">ชำระเงินตอนนี้</button>
    <div id="error-message" style="color: red;"></div>
</form>

ขั้นตอนที่ 3: ตั้งค่า Public Key ของคุณ

เริ่มต้น Omise.js ด้วย public key ของคุณ:

Omise.setPublicKey("pkey_test_YOUR_PUBLIC_KEY");

Test vs Live Keys

ใช้ test keys (pkey_test_...) ระหว่างการพัฒนาและ live keys (pkey_...) ในการผลิต อย่าใช้ live keys ในสภาพแวดล้อมทดสอบ!

ขั้นตอนที่ 4: จัดการการส่งฟอร์ม

สร้าง token เมื่อส่งฟอร์ม:

document.getElementById('payment-form').addEventListener('submit', function(e) {
    e.preventDefault();

    // ปิดการใช้งานปุ่มส่งเพื่อป้องกันการส่งซ้ำ
    const payButton = document.getElementById('pay-button');
    payButton.disabled = true;
    payButton.textContent = 'กำลังประมวลผล...';

    // สร้าง card token
    Omise.createToken("card", {
        name: document.getElementById('card-name').value,
        number: document.getElementById('card-number').value,
        expiration_month: parseInt(document.getElementById('expiry-month').value),
        expiration_year: parseInt(document.getElementById('expiry-year').value),
        security_code: document.getElementById('cvv').value,
        postal_code: document.getElementById('postal-code').value
    }, function(statusCode, response) {
        if (statusCode === 200) {
            // สำเร็จ! สร้าง Token แล้ว
            handleToken(response.id);
        } else {
            // เกิดข้อผิดพลาด
            handleError(response.message);
            payButton.disabled = false;
            payButton.textContent = 'ชำระเงินตอนนี้';
        }
    });
});

function handleToken(token) {
    // ส่ง token ไปยังเซิร์ฟเวอร์ของคุณ
    fetch('/checkout', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // รวม CSRF token เพื่อความปลอดภัย (ขึ้นอยู่กับเฟรมเวิร์ก)
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
        },
        body: JSON.stringify({
            token: token,
            amount: 10025, // จำนวนเงินในหน่วยที่เล็กที่สุด (เช่น สตางค์)
            currency: 'thb'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // เปลี่ยนเส้นทางไปยังหน้าความสำเร็จ
            window.location.href = '/payment-success';
        } else {
            handleError(data.error);
        }
    })
    .catch(error => {
        handleError('เกิดข้อผิดพลาดของเครือข่าย');
    });
}

function handleError(message) {
    document.getElementById('error-message').textContent = message;
    const payButton = document.getElementById('pay-button');
    payButton.disabled = false;
    payButton.textContent = 'ชำระเงินตอนนี้';
}

ขั้นตอนที่ 5: ประมวลผลการชำระเงินบนเซิร์ฟเวอร์

รับ token บนเซิร์ฟเวอร์ของคุณและสร้างการเรียกเก็บเงิน:

Node.js

const express = require('express');
const omise = require('omise')({
    secretKey: 'skey_test_YOUR_SECRET_KEY'
});

app.post('/checkout', async (req, res) => {
    try {
        const { token, amount, currency } = req.body;

        const charge = await omise.charges.create({
            amount: amount,
            currency: currency,
            card: token
        });

        if (charge.status === 'successful') {
            res.json({ success: true, chargeId: charge.id });
        } else {
            res.json({ success: false, error: charge.failure_message });
        }
    } catch (error) {
        res.status(500).json({ success: false, error: error.message });
    }
});

PHP

<?php
require_once 'vendor/autoload.php';

define('OMISE_SECRET_KEY', 'skey_test_YOUR_SECRET_KEY');

$token = $_POST['token'];
$amount = $_POST['amount'];
$currency = $_POST['currency'];

try {
    $charge = OmiseCharge::create(array(
        'amount' => $amount,
        'currency' => $currency,
        'card' => $token
    ));

    if ($charge['status'] == 'successful') {
        echo json_encode(['success' => true, 'chargeId' => $charge['id']]);
    } else {
        echo json_encode(['success' => false, 'error' => $charge['failure_message']]);
    }
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}
?>

Python

from flask import Flask, request, jsonify
import omise

omise.api_secret = 'skey_test_YOUR_SECRET_KEY'

@app.route('/checkout', methods=['POST'])
def checkout():
    try:
        data = request.get_json()
        token = data['token']
        amount = data['amount']
        currency = data['currency']

        charge = omise.Charge.create(
            amount=amount,
            currency=currency,
            card=token
        )

        if charge.status == 'successful':
            return jsonify({'success': True, 'chargeId': charge.id})
        else:
            return jsonify({'success': False, 'error': charge.failure_message})

    except Exception as e:
        return jsonify({'success': False, 'error': str(e)}), 500

แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย

1. อย่าเก็บข้อมูลบัตรบนเซิร์ฟเวอร์ของคุณ

กฎความปลอดภัยที่สำคัญ

อย่า บันทึก เก็บ หรือส่งข้อมูลบัตรดิบผ่านเซิร์ฟเวอร์ของคุณ ใช้ tokens เสมอ

// ❌ แย่: ส่งข้อมูลบัตรไปยังเซิร์ฟเวอร์ของคุณ
fetch('/checkout', {
    body: JSON.stringify({
        cardNumber: '4242424242424242',  // อย่าทำอย่างนี้!
        cvv: '123'                         // อย่าทำอย่างนี้!
    })
});

// ✅ ดี: ส่งเฉพาะ token
fetch('/checkout', {
    body: JSON.stringify({
        token: 'tokn_test_...'  // นี่ปลอดภัย!
    })
});

2. ใช้ HTTPS ทุกที่

• ต้องใช้ TLS 1.2 ขั้นต่ำ
• ใช้กับทั้งไซต์ ไม่ใช่แค่เช็คเอาต์
• ใช้ Let's Encrypt สำหรับใบรับรองฟรี

3. ใช้ CSP Headers

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

4. ปิด Analytics บนเช็คเอาต์

ป้องกันการจับภาพข้อมูลบัตรโดยไม่ตั้งใจ:

// ปิด Google Analytics บนหน้าเช็คเอาต์
window['ga-disable-UA-XXXXXX-Y'] = true;

5. ใช้การป้องกัน CSRF

รวม CSRF tokens ในคำขอการชำระเงินเสมอเพื่อป้องกันการโจมตี cross-site request forgery:

// ฝั่งไคลเอนต์: รวม CSRF token ในคำขอ
fetch('/checkout', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify({ token: tokenId })
});

6. ล้างฟอร์มหลังการส่ง

function clearForm() {
    document.getElementById('payment-form').reset();
    // หรือลบค่าโดยโปรแกรม
    document.getElementById('card-number').value = '';
    document.getElementById('cvv').value = '';
}

การปรับปรุงอัตราการอนุมัติ

เก็บรวบรวมที่อยู่สำหรับเรียกเก็บเงิน

Omise.createToken("card", {
    // ฟิลด์ที่จำเป็น
    name: "สมชาย ใจดี",
    number: "4242424242424242",
    expiration_month: 12,
    expiration_year: 2027,
    security_code: "123",

    // เป็นตัวเลือก แต่แนะนำเพื่อการอนุมัติที่ดีขึ้น
    city: "กรุงเทพฯ",
    postal_code: "10110",
    country: "TH",
    street1: "1448 ถนนประดิษฐ์มนูธรรม",
    phone_number: "+66876543210"
}, callback);

ประโยชน์ของข้อมูลการเรียกเก็บเงินที่สมบูรณ์:

• ปรับปรุงอัตราการอนุมัติ 5-15%
• เปิดใช้งาน Address Verification Service (AVS)
• ลดความเสี่ยงจากการฉ้อโกง
• จำเป็นสำหรับบัตรต่างประเทศบางประเภท

ปัญหาทั่วไปและการแก้ไขปัญหา

ปัญหา: "ต้องการ Public key"

สาเหตุ: ลืมตั้งค่า public key

วิธีแก้:

Omise.setPublicKey("pkey_test_YOUR_KEY");

ปัญหา: "หมายเลขบัตรไม่ถูกต้อง"

สาเหตุ:

• รูปแบบหมายเลขบัตรไม่ถูกต้อง
• ใช้บัตรทดสอบในโหมด live
• แบรนด์บัตรที่ไม่รองรับ

วิธีแก้:

• ตรวจสอบรูปแบบบัตรก่อนการส่ง
• ใช้อัลกอริทึม Luhn สำหรับการตรวจสอบฝั่งไคลเอนต์
• ตรวจสอบแบรนด์บัตรที่รองรับ

ปัญหา: การสร้าง Token คืนค่า error 400

สาเหตุทั่วไป:

• ฟิลด์ที่จำเป็นหายไป (ชื่อ, หมายเลข, วันหมดอายุ, CVV)
• วันหมดอายุไม่ถูกต้อง
• ประเภทข้อมูลผิด (string vs integer)

วิธีแก้:

// ตรวจสอบให้แน่ใจว่าประเภทข้อมูลถูกต้อง
Omise.createToken("card", {
    name: cardName,  // string
    number: cardNumber.replace(/\s/g, ''),  // string, ลบช่องว่าง
    expiration_month: parseInt(expiryMonth),  // integer!
    expiration_year: parseInt(expiryYear),    // integer!
    security_code: cvv  // string
}, callback);

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

ฉันสามารถปรับแต่งรูปลักษณ์ของฟอร์มการชำระเงินได้หรือไม่?

ได้! คุณมีการควบคุม HTML และ CSS อย่างสมบูรณ์ Omise.js จัดการเฉพาะ tokenization - คุณออกแบบฟอร์ม ปรับแต่งให้เข้ากับแบรนด์ของคุณได้อย่างสมบูรณ์แบบ

Tokens สามารถนำกลับมาใช้ใหม่ได้หรือไม่?

ไม่ได้ tokens ใช้ได้เพียงครั้งเดียวเท่านั้น การชำระเงินแต่ละครั้งต้องใช้ token ใหม่ หากต้องการบันทึกบัตรเพื่อใช้ในอนาคต ให้สร้าง ลูกค้า และแนบบัตร

เรียนรู้เพิ่มเติมเกี่ยวกับบัตรที่บันทึกไว้ →

เกิดอะไรขึ้นหาก tokenization ล้มเหลว?

Omise.js คืนค่ารหัสสถานะและข้อความแสดงข้อผิดพลาด ข้อผิดพลาดทั่วไป:

• หมายเลขบัตรไม่ถูกต้อง
• บัตรหมดอายุ
• CVV ไม่ถูกต้อง
• ปัญหาการเชื่อมต่อเครือข่าย

จัดการข้อผิดพลาดอย่างเหมาะสมและแสดงข้อความที่เป็นมิตรกับผู้ใช้เสมอ

ฉันต้องการการปฏิบัติตาม PCI หรือไม่?

การใช้ Omise.js ช่วยลดข้อกำหนด PCI ของคุณอย่างมาก เนื่องจากข้อมูลบัตรไม่สัมผัสเซิร์ฟเวอร์ของคุณ โดยทั่วไปคุณต้องการเพียงการปฏิบัติตาม SAQ A (รูปแบบที่ง่ายที่สุด) ปรึกษากับทีมความปลอดภัยของคุณสำหรับรายละเอียดเฉพาะ

แหล่งข้อมูลที่เกี่ยวข้อง

• เอกสาร Omise.js - คู่มืออ้างอิง API แบบสมบูรณ์
• การชำระเงินด้วยบัตรเครดิต - คู่มือการใช้งาน
• แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย - ปกป้องการบูรณาการของคุณ
• คู่มือการทดสอบ - บัตรทดสอบและสถานการณ์
• 3D Secure - ความปลอดภัยที่เพิ่มขึ้น

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

1. ตั้งค่าฟอร์ม HTML ของคุณ
2. ใช้ JavaScript tokenization
3. สร้างเอนด์พอยต์การเรียกเก็บเงินฝั่งเซิร์ฟเวอร์
4. ทดสอบด้วยบัตรทดสอบ
5. เพิ่ม 3D Secure สำหรับธุรกรรมมูลค่าสูง
6. เข้าสู่การผลิต