Omise.js

Omise.js คือไลบรารี JavaScript สำหรับรวบรวมข้อมูลการชำระเงินในเบราว์เซอร์ของผู้ใช้ และส่งข้อมูลดังกล่าวไปยังเซิร์ฟเวอร์ของ Omise อย่างปลอดภัย

การใช้ Omise.js เป็นข้อกำหนดสำหรับการรับข้อมูลการชำระเงินบนเว็บไซต์ของคุณ

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

ข้อกำหนด

• เปิดใช้งาน HTTPS บนหน้าชำระเงินของคุณ

แนะนำ: ควรเปิดใช้งาน HTTPS บนเว็บไซต์ทั้งหมดของคุณด้วย
อย่ารวบรวมหรือจัดเก็บข้อมูลบัตรบนเซิร์ฟเวอร์ของคุณ
ดูรายละเอียดเพิ่มเติมได้ที่ แนวทางด้านความปลอดภัยสำหรับผู้ค้า

หลักการทำงาน

Omise.js ให้วิธีการที่ปลอดภัยในการรวบรวมข้อมูลบัตรเครดิต บัตรเดบิต และวิธีการชำระเงินอื่น ๆ ในเบราว์เซอร์ของผู้ใช้

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

ตัวอย่าง

GitHub repositories ต่อไปนี้มีตัวอย่างการใช้งาน Omise.js:

• omise.js-example
• omise-flask-example

ฟอร์มชำระเงินสำเร็จรูป

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

หลักการทำงานของฟอร์มสำเร็จรูป

การเชื่อมต่อดำเนินตามลำดับดังนี้:

1. ผู้ใช้ (ลูกค้า) เข้าสู่หน้าชำระเงินของคุณ
2. เว็บไซต์โหลด Omise.js
3. Omise.js สร้าง iframe สำหรับการรวบรวมข้อมูลการชำระเงินอย่างปลอดภัย
4. Omise.js โหลด pay.html ใน iframe
5. PayJS โหลด Omise.js ในสภาพแวดล้อมที่ปลอดภัย
6. PayJS โหลดตัวเองและเตรียมส่วนติดต่อการชำระเงิน
7. ระบบแสดงวิธีการชำระเงินหรือฟอร์มให้กับผู้ใช้
8. เมื่อลูกค้าส่งข้อมูลการชำระเงิน เพย์โหลดจะถูกส่งไปยัง PayJS
9. PayJS ตรวจสอบความถูกต้องของเพย์โหลด
10. หากการตรวจสอบล้มเหลว ระบบจะแสดงข้อผิดพลาดให้กับลูกค้า
11. หากการตรวจสอบสำเร็จ:
    1. เพย์โหลดถูกส่งไปยัง Omise.js
    2. Omise.js เรียก API /token หรือ /source
    3. เซิร์ฟเวอร์ Omise ส่งคืนอ็อบเจ็กต์โทเค็นหรือซอร์ส
    4. Omise.js ส่งการตอบกลับ API ไปยัง PayJS
    5. หาก API ส่งคืนข้อผิดพลาด ระบบจะแสดงข้อความแสดงข้อผิดพลาดให้กับลูกค้า
    6. หากการเรียก API สำเร็จ:
       1. PayJS ส่งผลลัพธ์ไปยัง Omise.js
       2. Omise.js ส่งโทเค็น ซอร์ส หรือทั้งสองอย่างไปยังเว็บไซต์
       3. เว็บไซต์ประมวลผลข้อมูล
       4. เซิร์ฟเวอร์เริ่มการชำระเงินโดยใช้โทเค็นหรือซอร์ส
       5. เซิร์ฟเวอร์รับผลลัพธ์การชำระเงิน
       6. เซิร์ฟเวอร์อัปเดตสถานะการชำระเงิน
       7. เว็บไซต์แสดงผลลัพธ์ให้กับลูกค้า

โดยค่าเริ่มต้น Omise.js จะแสดงปุ่ม Pay with Omise การคลิกปุ่มจะเปิดฟอร์มชำระเงินที่ผู้ใช้กรอกข้อมูล การคลิก Pay [จำนวนเงิน] จะขอโทเค็นหรือซอร์สที่ใช้ได้ครั้งเดียวจากเซิร์ฟเวอร์ Omise โดยตรง

ฟอร์มสามารถกำหนดค่าได้โดยใช้ HTML data attributes หรือ JavaScript

การใช้ Data Attributes

เมื่อใช้ data attributes ไม่จำเป็นต้องเขียน JavaScript เพิ่มเติม กำหนดค่าฟอร์มชำระเงินโดยเพิ่ม HTML ต่อไปนี้ในหน้าชำระเงินของคุณ

วิธีใช้งาน

<form id="checkoutForm" method="POST" action="/charge">
  <script type="text/javascript" src="https://cdn.omise.co/omise.js"
          data-key="OMISE_PUBLIC_KEY"
          data-amount="12345"
          data-currency="THB"
          data-default-payment-method="credit_card">
  </script>
</form>

หมายเหตุ:

• พาธ action ต้องชี้ไปยังตำแหน่งบนเซิร์ฟเวอร์ backend ที่รับคำขอ POST ซึ่งมีโทเค็นหรือซอร์ส
• ต้องวางอิลิเมนต์ <script> ไว้ภายในอิลิเมนต์ <form>
• data-key — คีย์สาธารณะของคุณ
• data-amount — จำนวนเงินที่แสดงบนฟอร์ม ระบุในหน่วยที่เล็กที่สุดของสกุลเงิน
• data-default-payment-method — วิธีการชำระเงินเริ่มต้นที่แสดงบนฟอร์ม
• ดูพารามิเตอร์สำหรับพารามิเตอร์ที่รองรับเพิ่มเติม

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

กำหนดค่าพาธ /charge บนเซิร์ฟเวอร์ของคุณ (หรือพาธที่ระบุใน action) ให้รับและประมวลผลพารามิเตอร์ omiseToken และ omiseSource

• หากมีการส่งข้อมูลบัตรเครดิตหรือบัตรเดบิต omiseToken จะถูกตั้งค่าเป็นตัวระบุโทเค็นที่สร้างขึ้น และ omiseSource จะเป็น null
• หากมีการส่งข้อมูลวิธีการชำระเงินอื่น omiseSource จะถูกตั้งค่าเป็นตัวระบุซอร์สที่สร้างขึ้น และ omiseToken จะเป็น null

ดูการประมวลผลโทเค็นและซอร์ส

การใช้ JavaScript

คุณยังสามารถกำหนดค่าฟอร์มชำระเงินโดยใช้ JavaScript ได้ Omise.js มีอ็อบเจ็กต์ OmiseCard สำหรับวัตถุประสงค์นี้

วิธีใช้งาน

<form id="checkoutForm" method="POST" action="/charge">
  <input type="hidden" name="omiseToken">
  <input type="hidden" name="omiseSource">
  <button type="submit" id="checkoutButton">ชำระเงิน</button>
</form>

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

<script>
  OmiseCard.configure({
    publicKey: "OMISE_PUBLIC_KEY"
  });

  const button = document.querySelector("#checkoutButton");
  const form = document.querySelector("#checkoutForm");

  button.addEventListener("click", (event) => {
    event.preventDefault();
    OmiseCard.open({
      amount: 12345,
      currency: "THB",
      defaultPaymentMethod: "credit_card",
      onCreateTokenSuccess: (nonce) => {
        if (nonce.startsWith("tokn_")) {
          form.omiseToken.value = nonce;
        } else {
          form.omiseSource.value = nonce;
        }
        form.submit();
      }
    });
  });
</script>

หมายเหตุ:

• พาธ action ต้องชี้ไปยังตำแหน่งบนเซิร์ฟเวอร์ backend ที่รับคำขอ POST ซึ่งมีโทเค็นหรือซอร์ส
• ดูพารามิเตอร์สำหรับพารามิเตอร์ที่รองรับเพิ่มเติม

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

กำหนดค่าพาธ /charge บนเซิร์ฟเวอร์ของคุณ (หรือพาธที่ระบุใน action) ให้รับและประมวลผลพารามิเตอร์ omiseToken และ omiseSource

• หากมีการส่งข้อมูลบัตรเครดิตหรือบัตรเดบิต omiseToken จะถูกตั้งค่าเป็นตัวระบุโทเค็นที่สร้างขึ้น และ omiseSource จะเป็น null
• หากมีการส่งข้อมูลวิธีการชำระเงินอื่น omiseSource จะถูกตั้งค่าเป็นตัวระบุซอร์สที่สร้างขึ้น และ omiseToken จะเป็น null

ดูการประมวลผลโทเค็นและซอร์ส

เมธอดของ OmiseCard

ใช้เมธอดต่อไปนี้บน OmiseCard เพื่อปรับแต่งรูปลักษณ์และพฤติกรรมของฟอร์ม

configure

ตั้งค่าการกำหนดค่าเริ่มต้นสำหรับฟอร์ม แนะนำให้ตั้งค่าคีย์สาธารณะที่นี่ ปุ่มที่กำหนดค่าผ่าน configureButton และฟอร์มที่เปิดผ่าน open จะรับค่าการกำหนดค่านี้

ต้องเรียก configure ก่อนเรียก open

OmiseCard.configure({
  publicKey: 'OMISE_PUBLIC_KEY',
});

configureButton

ตั้งค่าการกำหนดค่าเฉพาะปุ่มสำหรับฟอร์ม หากปุ่มอยู่นอกฟอร์ม ให้ระบุคีย์ submitFormTarget ในอ็อบเจ็กต์การกำหนดค่าเพื่อชี้ไปยังฟอร์มของคุณ

OmiseCard.configure({
  publicKey: 'OMISE_PUBLIC_KEY'
});

OmiseCard.configureButton('#checkout-button', {
  amount: 3000,
  currency: 'USD',
  buttonLabel: 'Pay 30 USD'
});

OmiseCard.configureButton('#checkout-button-alt', {
  amount: 100000,
  currency: 'THB',
  buttonLabel: 'Pay 1000 THB'
});

attach

เชื่อมต่อการกำหนดค่าที่ตั้งไว้ผ่าน configureButton กับปุ่มเป้าหมาย หลังจากเชื่อมต่อแล้ว การคลิกปุ่มที่กำหนดค่าแล้วจะเปิดฟอร์มชำระเงิน

OmiseCard.configureButton('#checkout-button', {
  publicKey: 'OMISE_PUBLIC_KEY',
  amount: 10000,
  frameLabel: 'Merchant Name',
  submitLabel: 'Pay',
});

OmiseCard.attach();

open

เปิดฟอร์มชำระเงิน

ต้องเรียก configure ก่อนเรียกเมธอดนี้

OmiseCard.open({
  amount: 10000,
  submitFormTarget: '#checkout-form',
  onCreateTokenSuccess: (nonce) => {
    /* ตัวจัดการเมื่อสร้างโทเค็นหรือซอร์สสำเร็จ ใช้สำหรับส่งฟอร์มหรือส่งคำขอ Ajax ไปยังเซิร์ฟเวอร์ */
  },
  onFormClosed: () => {
    /* ตัวจัดการเมื่อฟอร์มถูกปิด */
  },
});

พารามิเตอร์

พารามิเตอร์ต่อไปนี้เป็นพารามิเตอร์แบบมีเงื่อนไขที่ใช้เฉพาะกับวิธีการชำระเงินบางประเภทเท่านั้น

วิธีการชำระเงินที่รองรับในฟอร์มสำเร็จรูป

แม้ว่า Omise.js จะรองรับวิธีการชำระเงินทั้งหมด แต่มีเฉพาะวิธีการชำระเงินต่อไปนี้เท่านั้นที่รองรับในฟอร์มสำเร็จรูป วิธีการชำระเงินที่ใช้ได้ขึ้นอยู่กับการตั้งค่าบัญชีและประเทศที่ลงทะเบียนบัญชีของคุณ

หากต้องการเปิดใช้งานวิธีการชำระเงินเพิ่มเติมในบัญชี live ติดต่อ support@omise.co

* ประเภท type ของซอร์สที่สร้างจะเป็น econtext

การขอโทเค็นและซอร์สโดยตรง

วิธีนี้มีความยืดหยุ่นสูงสุดและรองรับวิธีการชำระเงินทั้งหมด อย่างไรก็ตาม คุณต้องสร้างฟอร์มเองและจัดการเหตุการณ์ทั้งหมดด้วยตัวเอง

อย่าใช้แอตทริบิวต์ name เป็นตัวระบุสำหรับอิลิเมนต์ <input> ในฟอร์มที่กำหนดเอง เมื่อมีแอตทริบิวต์ name ค่าของอิลิเมนต์จะถูกส่งไปพร้อมกับฟอร์มไปยังเซิร์ฟเวอร์ของคุณ ซึ่งมีความเสี่ยงที่จะส่งข้อมูลสำคัญ เช่น หมายเลขบัตร

ใช้แอตทริบิวต์ data-* หรือ id เป็นตัวระบุแทน ดูแนวทางด้านความปลอดภัยสำหรับผู้ค้า

หลักการทำงานของฟอร์มที่กำหนดเอง

การเชื่อมต่อดำเนินตามลำดับดังนี้:

1. ผู้ใช้เข้าสู่เว็บไซต์
2. เว็บไซต์โหลด Omise.js
3. เว็บไซต์แสดงฟอร์มบัตรที่กำหนดเองให้กับผู้ใช้
4. ผู้ใช้กรอกข้อมูลบัตร
5. เว็บไซต์ตรวจสอบความถูกต้องของเพย์โหลด
6. หากการตรวจสอบล้มเหลว เว็บไซต์จะแสดงข้อผิดพลาดให้กับผู้ใช้
7. หากการตรวจสอบสำเร็จ:
   1. ผู้ใช้คลิกปุ่มชำระเงิน
   2. เว็บไซต์ส่งข้อมูลบัตรไปยัง Omise.js เพื่อสร้างโทเค็น
   3. Omise.js เรียก API /token หรือ /source
   4. เซิร์ฟเวอร์ Omise ส่งคืนอ็อบเจ็กต์โทเค็นหรือซอร์ส
   5. Omise.js ส่งการตอบกลับ API กลับไปยังเว็บไซต์
   6. หาก API ส่งคืนข้อผิดพลาด เว็บไซต์จะแสดงข้อผิดพลาดให้กับผู้ใช้
   7. หากการเรียก API สำเร็จ เว็บไซต์จะส่งการตอบกลับไปยัง backend

วิธีใช้งาน

เพิ่มอิลิเมนต์ <script> ต่อไปนี้เพื่อโหลด Omise.js:

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

เมื่อโหลดแล้ว อ็อบเจ็กต์ Omise จะพร้อมใช้งานในสภาพแวดล้อมของคุณ

เมธอดของ Omise

ใช้เมธอดต่อไปนี้บน Omise เพื่อสร้างโทเค็นหรือซอร์สที่ใช้ได้ครั้งเดียว

setPublicKey

ตรวจสอบสิทธิ์คำขอโดยใช้คีย์สาธารณะของคุณ

Omise.setPublicKey("OMISE_PUBLIC_KEY");

createToken

สร้างโทเค็นที่ใช้ได้ครั้งเดียวจากเซิร์ฟเวอร์ Omise ใช้โทเค็นเพื่อสร้างการเรียกเก็บเงินหรือเชื่อมต่อบัตรกับอ็อบเจ็กต์ลูกค้า

const tokenParameters = {
  "city": "New York",
  "country": "US",
  "expiration_month": 2,
  "expiration_year": 2022,
  "name": "Somchai Prasert",
  "number": "4242424242424242",
  "phone_number": "0123456789",
  "postal_code": 10320,
  "security_code": 123,
  "state": "NY",
  "street1": "476 Fifth Avenue"
};

Omise.createToken("card", tokenParameters, function(statusCode, response) {
  if (statusCode === 200) {
    // response["id"] มีตัวระบุโทเค็น
    console.log(response["id"]);
  } else {
    // จัดการข้อผิดพลาด — response["message"] มีคำอธิบายข้อผิดพลาด
    console.error(response["message"]);
  }
});

createSource

สร้างซอร์สที่ใช้ได้ครั้งเดียวจากเซิร์ฟเวอร์ Omise ใช้ซอร์สเพื่อสร้างการเรียกเก็บเงิน ดูประเภทซอร์สที่ใช้ได้และพารามิเตอร์ที่จำเป็นได้ที่ Source API

const sourceParameters = {
  "amount": 12345,
  "currency": "THB",
  "phone_number": "0123456789"
};

Omise.createSource("truemoney_jumpapp", sourceParameters, function(statusCode, response) {
  if (statusCode === 200) {
    // response["id"] มีตัวระบุซอร์ส
    console.log(response["id"]);
  } else {
    // จัดการข้อผิดพลาด — response["message"] มีคำอธิบายข้อผิดพลาด
    console.error(response["message"]);
  }
});

การประมวลผลโทเค็นและซอร์ส

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

• สำหรับโทเค็น ดูการเรียกเก็บเงินบัตร สำหรับรายละเอียดและตัวอย่างโค้ดเพิ่มเติม ดูCharge API
• สำหรับซอร์ส ดูคู่มือที่เกี่ยวข้องในเอกสาร API ภายใต้หมวด Payment Methods

สำคัญ: อย่าใช้โทเค็นหรือซอร์สมากกว่าหนึ่งครั้ง ค่าแต่ละค่าจะถูกยกเลิกหลังจากการพยายามเรียกเก็บเงินครั้งเดียว ไม่ว่าการเรียกเก็บเงินจะสำเร็จหรือไม่ก็ตาม

การจัดการข้อผิดพลาด

เมื่อ callback ได้รับ status code ที่ไม่ใช่ 200 อ็อบเจ็กต์การตอบกลับจะมีรายละเอียดของความล้มเหลว

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

สำหรับรายการรหัสข้อผิดพลาดทั้งหมด ดูเอกสาร API Errors

CDN

โหลด Omise.js จาก URL ต่อไปนี้:

https://cdn.omise.co/omise.js

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

ทั่วไป

Omise.js คืออะไร และทำไมถึงต้องใช้?

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

Omise.js จัดเก็บข้อมูลบัตรบนเซิร์ฟเวอร์ของฉันหรือไม่?

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

ควรใช้ฟอร์มสำเร็จรูปหรือฟอร์มที่กำหนดเอง?

ใช้ฟอร์มสำเร็จรูปหากต้องการการเชื่อมต่อที่รวดเร็วและดูแลรักษาน้อย ใช้ฟอร์มที่กำหนดเองหากต้องการควบคุม UI ทั้งหมดหรือต้องการรองรับวิธีการชำระเงินที่ไม่มีในฟอร์มสำเร็จรูป

Omise.js รองรับ Single-Page Applications (SPA) หรือไม่?

รองรับ ใช้วิธี JavaScript (OmiseCard) และเรียก OmiseCard.configure() ครั้งเดียวในขั้นตอนการเริ่มต้น เรียก OmiseCard.open() แบบ programmatic เมื่อผู้ใช้พร้อมชำระเงิน หลีกเลี่ยงการฝัง script tag ซ้ำในทุกการเปลี่ยนเส้นทาง

สามารถใช้ Omise.js กับเฟรมเวิร์กเช่น React, Vue หรือ Angular ได้หรือไม่?

ได้ โหลด Omise.js ผ่าน <script> tag ใน HTML (หรือแบบ dynamic เมื่อ component mount) และโต้ตอบกับอ็อบเจ็กต์ global OmiseCard หรือ Omise ปัจจุบันยังไม่มี wrapper สำหรับเฟรมเวิร์กอย่างเป็นทางการ แต่ทั้งสอง API ทำงานร่วมกับสถาปัตยกรรม component แบบ event-driven ได้ดี

ความปลอดภัย

ทำไมหน้าชำระเงินต้องใช้ HTTPS?

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

ทำไมไม่ควรใช้แอตทริบิวต์ name ในช่องกรอกฟอร์มที่กำหนดเอง?

เมื่อส่งฟอร์ม ค่าของอิลิเมนต์ <input> ที่มีแอตทริบิวต์ name จะถูกรวมอยู่ใน POST body ที่ส่งไปยังเซิร์ฟเวอร์ของคุณ สำหรับฟิลด์สำคัญ เช่น หมายเลขบัตรหรือรหัส CVV การทำเช่นนี้จะส่งข้อมูลบัตรดิบผ่านเซิร์ฟเวอร์ของคุณ ซึ่งเป็นความเสี่ยงด้านความปลอดภัยร้ายแรงและเป็นการละเมิด PCI DSS ใช้แอตทริบิวต์ id หรือ data-* เป็นตัวระบุแทน

iframe ในฟอร์มสำเร็จรูปใช้ทำอะไร?

ฟอร์มสำเร็จรูปโหลดภายใน iframe ที่ให้บริการจากโดเมนของ Omise เอง ซึ่งหมายความว่าฟอร์มชำระเงินทำงานในบริบทการเบราว์เซอร์ที่แยกจากหน้าเว็บของคุณ JavaScript ของคุณไม่สามารถเข้าถึงข้อมูลบัตรที่กรอกใน iframe ได้ ซึ่งป้องกันการเปิดเผยข้อมูลสำคัญโดยไม่ตั้งใจหรือโดยเจตนาร้าย

หาคีย์สาธารณะได้ที่ไหน?

คีย์สาธารณะของคุณมีอยู่บนแดชบอร์ด Omise ภายใต้ Settings → Keys ใช้คีย์สาธารณะทดสอบในขั้นตอนการพัฒนา และใช้คีย์สาธารณะliveในสภาพแวดล้อมจริง อย่าใช้คีย์ลับในโค้ดฝั่ง client

โทเค็นและซอร์ส

โทเค็นและซอร์สต่างกันอย่างไร?

โทเค็น แทนบัตรเครดิตหรือบัตรเดบิต และสร้างขึ้นเมื่อลูกค้ากรอกข้อมูลบัตร ซอร์ส แทนวิธีการชำระเงินที่ไม่ใช่บัตร (เช่น PromptPay, GrabPay หรือ e-wallet) และมีข้อมูล redirect หรือ QR ที่จำเป็นสำหรับการชำระเงิน ทั้งสองเป็นตัวระบุที่ใช้ได้ครั้งเดียวที่เซิร์ฟเวอร์ของคุณส่งไปยัง Charge API

โทเค็นหรือซอร์สมีอายุการใช้งานนานแค่ไหน?

โทเค็นใช้ได้ครั้งเดียวและจะหมดอายุหลังจากระยะเวลาสั้น ๆ หากไม่ได้ใช้งาน (โดยทั่วไปไม่กี่นาที) ซอร์สจะหมดอายุตามกฎของวิธีการชำระเงินที่อยู่เบื้องหลัง ใช้โทเค็นหรือซอร์สทันทีหลังจากได้รับ และอย่าแคชหรือนำกลับมาใช้ซ้ำ

จะเกิดอะไรขึ้นหาก omiseToken และ omiseSource ทั้งคู่เป็น null ใน POST ไปยังเซิร์ฟเวอร์?

นี่บ่งชี้ว่าฟอร์มชำระเงินถูกส่งโดยไม่ได้สร้างโทเค็นหรือซอร์สสำเร็จ เช่น ผู้ใช้ปิดฟอร์มก่อนชำระเงินเสร็จ เซิร์ฟเวอร์ของคุณควรจัดการกรณีนี้อย่างเหมาะสม เช่น ส่งผู้ใช้กลับไปยังหน้าชำระเงินพร้อมข้อความที่เหมาะสม

สามารถเชื่อมโทเค็นบัตรกับลูกค้าสำหรับการเรียกเก็บเงินในอนาคตได้หรือไม่?

ได้ ส่งตัวระบุโทเค็นไปยัง Customers API เพื่อเชื่อมต่อบัตรกับอ็อบเจ็กต์ลูกค้า จากนั้นคุณสามารถเรียกเก็บเงินจากลูกค้าในภายหลังได้โดยไม่ต้องให้กรอกข้อมูลบัตรอีกครั้ง

วิธีการชำระเงิน

จะทราบได้อย่างไรว่าวิธีการชำระเงินใดบ้างที่ใช้ได้กับบัญชีของฉัน?

วิธีการชำระเงินที่ใช้ได้ขึ้นอยู่กับประเทศที่ลงทะเบียนบัญชีของคุณและวิธีการที่ Omise เปิดใช้งาน เข้าสู่ระบบแดชบอร์ด Omise เพื่อดูวิธีการชำระเงินที่เปิดใช้งาน หากต้องการเพิ่มวิธีการชำระเงิน ติดต่อ support@omise.co

สามารถแสดงวิธีการชำระเงินหลายวิธีในฟอร์มสำเร็จรูปได้หรือไม่?

ได้ ใช้แอตทริบิวต์ data-other-payment-methods (หรือพารามิเตอร์ otherPaymentMethods ใน JavaScript) เพื่อระบุตัวระบุวิธีการชำระเงินเพิ่มเติมที่คั่นด้วยคอมมาควบคู่กับค่าเริ่มต้น ตัวอย่าง:

data-other-payment-methods="promptpay,truemoney_jumpapp,grabpay"

ฟอร์มสำเร็จรูปรองรับ Google Pay และ Apple Pay หรือไม่?

รองรับ แต่ต้องมีการกำหนดค่าเพิ่มเติมสำหรับ live traffic:

• Google Pay — ตั้งค่า data-googlepay-merchant-id เป็น merchant ID ของ Google Pay ของคุณ
• Apple Pay — ตั้งค่า data-applepay-merchant-id เป็น merchant ID ของ Apple Pay และ data-applepay-validation-url เป็น endpoint การตรวจสอบเซิร์ฟเวอร์

ทั้งสองทำงานได้โดยไม่ต้องใช้พารามิเตอร์เหล่านี้ในโหมดทดสอบ

การแก้ไขปัญหา

คลิกปุ่มแล้วฟอร์มชำระเงินไม่ปรากฏ

ตรวจสอบสิ่งต่อไปนี้:

• มีการเรียก OmiseCard.configure() พร้อม publicKey ที่ถูกต้องก่อนเรียก OmiseCard.open()
• สคริปต์ Omise.js โหลดครบถ้วนก่อนมีการเรียก OmiseCard วาง logic ของสคริปต์หลัง tag <script src="https://cdn.omise.co/omise.js"> หรือรอ event DOMContentLoaded
• หน้าเว็บของคุณให้บริการผ่าน HTTPS Omise.js จะไม่โหลดบนหน้า HTTP
• ไม่มีข้อผิดพลาดใน console ของเบราว์เซอร์ เปิด developer tools และตรวจสอบแท็บ Console และ Network เพื่อดูคำขอที่ถูกบล็อกหรือข้อผิดพลาด JavaScript

ได้รับข้อผิดพลาด authentication_failure

หมายความว่าคีย์สาธารณะที่ส่งให้ Omise.js หายไป มีรูปแบบไม่ถูกต้อง หรือไม่ตรงกับสภาพแวดล้อมที่คาดหวัง (ทดสอบและ live) ตรวจสอบสิ่งต่อไปนี้:

• คีย์ขึ้นต้นด้วย pkey_ (คีย์สาธารณะจะใช้ prefix นี้เสมอ)
• ใช้คีย์ที่ถูกต้องสำหรับสภาพแวดล้อมของคุณ (คีย์ทดสอบสำหรับโหมดทดสอบ คีย์ live สำหรับ production)
• ไม่มีช่องว่างหรืออักขระเพิ่มเติมที่เกิดจากการคัดลอกคีย์

เซิร์ฟเวอร์ไม่ได้รับโทเค็นหรือซอร์ส

ยืนยันสิ่งต่อไปนี้:

• แอตทริบิวต์ action บน <form> ของคุณชี้ไปยัง endpoint เซิร์ฟเวอร์ที่ถูกต้อง
• สำหรับวิธี data attributes ต้องวาง <script> tag ไว้ภายในอิลิเมนต์ <form>
• สำหรับวิธี JavaScript ต้องตั้งค่า form.omiseToken.value หรือ form.omiseSource.value ก่อนเรียก form.submit()
• เซิร์ฟเวอร์อ่านพารามิเตอร์ omiseToken และ omiseSource เป็น POST parameters (ไม่ใช่ query parameters)

ฟอร์มที่กำหนดเองส่งข้อมูลบัตรไปยังเซิร์ฟเวอร์โดยไม่ตั้งใจ

เกิดขึ้นเมื่ออิลิเมนต์ <input> ที่เกี่ยวกับบัตรมีแอตทริบิวต์ name ให้ลบแอตทริบิวต์ name ทั้งหมดออกจากฟิลด์กรอกข้อมูลบัตร และใช้แอตทริบิวต์ id หรือ data-* แทน ดูการขอโทเค็นและซอร์สโดยตรง

จะทดสอบการเชื่อมต่อโดยไม่ประมวลผลการชำระเงินจริงได้อย่างไร?

ใช้คีย์สาธารณะทดสอบจากแดชบอร์ด Omise ในโหมดทดสอบ คุณสามารถใช้หมายเลขบัตรทดสอบของ Omise เพื่อจำลองสถานการณ์การชำระเงินสำเร็จและล้มเหลวโดยไม่มีการเรียกเก็บเงินจริง