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

💳 การเก็บข้อมูลบัตรด้วย Omise.js

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

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

⚙️ วิธีการทำงาน

ภาพรวมของขั้นตอนการทำงานมีดังนี้

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

🧪 ทดลองใช้งาน: Omise Token Simulator

ดูรายละเอียดเพิ่มเติมเกี่ยวกับ Tokens API ได้ที่เอกสารอ้างอิง Tokens API

💻 ตัวอย่างการใช้งานแบบเต็มรูปแบบ

ขั้นแรก ให้แทรก Omise.js ลงในหน้าเว็บของคุณ โดยวางไว้ก่อนแท็กปิด </body>

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

ไลบรารี Omise.js ไม่จำเป็นต้องใช้ jQuery แต่ตัวอย่างนี้ใช้ jQuery เพื่อความสะดวกในการเข้าถึง DOM หากคุณไม่ต้องการเพิ่ม dependency ของ jQuery ก็สามารถเขียนตรรกะการส่งฟอร์มและการค้นหา DOM แบบเดียวกันด้วย JavaScript ล้วน (vanilla JavaScript) ได้เช่นกัน

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

จากนั้นเพิ่ม public key ของคุณ เพื่อให้ Omise.js สามารถยืนยันตัวตนกับ Omise API ได้:

<script>
  Omise.setPublicKey("pkey_test_XXXXXXXXXXXXXXXXXXXX");
</script>

ขั้นต่อไป สร้างฟอร์มสำหรับเก็บข้อมูลบัตร

<form action="/checkout" method="post" id="checkout">
  <div id="token_errors"></div>

  <input type="hidden" name="omise_token">

  <div>
    ชื่อ<br>
    <input type="text" data-omise="holder_name">
  </div>
  <div>
    หมายเลขบัตร<br>
    <input type="text" data-omise="number">
  </div>
  <div>
    วันหมดอายุ<br>
    <input type="text" data-omise="expiration_month" size="4"> /
    <input type="text" data-omise="expiration_year" size="8">
  </div>
  <div>
    รหัสความปลอดภัย<br>
    <input type="text" data-omise="security_code" size="8">
  </div>

  <input type="submit" id="create_token">
</form>

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

$("#checkout").submit(function () {

  var form = $(this);

  // ปิดการใช้งานปุ่มส่งฟอร์ม เพื่อป้องกันการคลิกซ้ำ
  form.find("input[type=submit]").prop("disabled", true);

  // แปลงข้อมูลในฟอร์มให้อยู่ในรูปแบบอ็อบเจ็กต์ card ที่ถูกต้อง
  var card = {
    "name": form.find("[data-omise=holder_name]").val(),
    "number": form.find("[data-omise=number]").val(),
    "expiration_month": form.find("[data-omise=expiration_month]").val(),
    "expiration_year": form.find("[data-omise=expiration_year]").val(),
    "security_code": form.find("[data-omise=security_code]").val()
  };

  // ส่งคำขอเพื่อสร้างโทเค็น จากนั้นเรียกใช้ฟังก์ชัน callback
  // ทันทีที่ได้รับการตอบกลับจาก Omise
  //
  // โปรดทราบว่าการตอบกลับอาจเป็นข้อผิดพลาดได้ ซึ่งจำเป็นต้องจัดการ
  // ภายใน callback นี้ด้วย
  Omise.createToken("card", card, function (statusCode, response) {
    if (response.object == "error" || !response.card.security_code_check) {
      // แสดงข้อความแจ้งข้อผิดพลาด
      var message_text = "กรุณาตั้งค่าข้อความแสดงเมื่อการตรวจสอบรหัสความปลอดภัยล้มเหลว";
      if (response.object == "error") {
        message_text = response.message;
      }
      $("#token_errors").html(message_text);

      // เปิดการใช้งานปุ่มส่งฟอร์มอีกครั้ง
      form.find("input[type=submit]").prop("disabled", false);
    } else {
      // กำหนดค่าในฟิลด์ omise_token
      form.find("[name=omise_token]").val(response.id);

      // ลบหมายเลขบัตรและรหัสความปลอดภัยออกจากฟอร์ม ก่อนส่งไปยังเซิร์ฟเวอร์
      form.find("[data-omise=number]").val("");
      form.find("[data-omise=security_code]").val("");

      // ส่งโทเค็นไปยังเซิร์ฟเวอร์
      form.get(0).submit();
    }
  });

  // ป้องกันไม่ให้ฟอร์มถูกส่งออกไปพร้อมข้อมูลบัตรดิบ
  return false;

});

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

❓ คำถามที่พบบ่อย (FAQ)

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

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

การเปิดเผย public key (pkey_test_... / pkey_...) ใน JavaScript ฝั่งไคลเอนต์ปลอดภัยหรือไม่? โดยทั่วไปแล้วปลอดภัย แต่คำว่า เปิดเผยได้อย่างปลอดภัย ไม่ได้หมายความว่า ไม่มีความเสี่ยงเลย public key ถูกออกแบบมาเพื่อใช้งานฝั่งไคลเอนต์ โดยมีขอบเขตสิทธิ์จำกัดอยู่ที่การสร้างโทเค็นและซอร์สเท่านั้น ไม่สามารถสร้างรายการเรียกเก็บเงิน โอนเงิน หรือดำเนินการใดๆ ที่ต้องใช้ secret key ได้ อย่างไรก็ตาม Omise เคยบันทึกไว้ถึงการโจมตีจริงที่อาศัยการเปิดเผย public key โดยเฉพาะ: เมื่อนำ public key มาใช้ร่วมกับหมายเลขบัตรที่ถูกขโมยมา ผู้ไม่หวังดีเคยสามารถเดารหัส CVV ของบัตรได้ด้วยวิธี brute-force โดยส่งคำขอสร้างโทเค็นซ้ำๆ แล้วอ่านค่าฟิลด์ security_code_check จากแต่ละการตอบกลับ Omise ได้แก้ไขปัญหานี้เมื่อวันที่ 1 เมษายน 2020 โดยกำหนดให้ security_code_check ตอบกลับค่า true เสมอ กล่าวโดยสรุปคือ ตัว key เองไม่สามารถนำไปโอนเงินได้ก็จริง แต่การเปิดเผย public key ร่วมกับข้อมูลบัตรที่ถูกขโมยมา ก็ยังอาจถูกนำไปใช้ในการโจมตีลักษณะ card-testing หรือการสุ่มตรวจสอบบัตรได้อยู่ดี ซึ่งเป็นเหตุผลหนึ่งที่ Omise เพิ่มมาตรการป้องกันการทุจริตแบบหลายชั้น ทั้งการทำ pre-authorization, IP geolocation และการวิเคราะห์พฤติกรรม นอกเหนือจากการจำกัดขอบเขตสิทธิ์ของ key (ที่มา: docs.omise.co/th/protecting-you-against-fraudsters/thailand, docs.omise.co/th/api-authentication/thailand)

จำเป็นต้องใช้ jQuery ในการใช้งาน Omise.js หรือไม่? ไม่จำเป็น ตัวอย่างเหล่านี้ใช้ jQuery เพียงเพื่อความสะดวกในการเข้าถึง DOM และจัดการ event การส่งฟอร์มเท่านั้น ตัว Omise.js เองไม่มี dependency กับ jQuery แต่อย่างใด และสามารถเขียนตรรกะแบบเดียวกันด้วย JavaScript ล้วนได้

โทเค็นที่ยังไม่ได้ใช้งานจะมีอายุการใช้งานนานเท่าใดก่อนหมดอายุ? โทเค็นสามารถใช้งานได้เพียงครั้งเดียว และจะหมดอายุภายในระยะเวลาสั้นๆ หากไม่ถูกใช้งาน โดยทั่วไปจะอยู่ที่ประมาณไม่กี่นาที ควรใช้โทเค็นทันทีหลังจากได้รับ และไม่ควรแคชหรือเก็บไว้ (ที่มา: docs.omise.co/th/omise-js/thailand)

จะเกิดอะไรขึ้นหากพยายามใช้โทเค็นที่ถูกใช้งานไปแล้วซ้ำอีกครั้ง? API จะส่งกลับข้อผิดพลาด used_token พร้อมข้อความ token was already used โทเค็นถูกจำกัดให้ใช้งานได้เพียงครั้งเดียวเท่านั้น เมื่อโทเค็นถูกใช้เพื่อสร้างรายการเรียกเก็บเงินหรือผูกกับบัตรไปแล้ว จะไม่สามารถนำมาใช้ซ้ำได้อีก ไม่ว่ารายการเรียกเก็บเงินนั้นจะสำเร็จหรือไม่ก็ตาม (ที่มา: docs.omise.co/th/api-errors/thailand)

สามารถจำกัดให้ public key ใช้งานได้เฉพาะบางโดเมน เหมือนกับ API อื่นๆ ที่อนุญาตให้ล็อก key ฝั่งไคลเอนต์ได้หรือไม่? ไม่ได้ Omise ไม่มีฟีเจอร์จำกัดสิทธิ์ key ตามโดเมน ความปลอดภัยของ public key เมื่อใช้งานฝั่งไคลเอนต์มาจากการจำกัดขอบเขตสิทธิ์เท่านั้น กล่าวคือสามารถสร้างและดูโทเค็นกับซอร์สได้เท่านั้น ไม่สามารถดำเนินการใดๆ ที่ต้องใช้ secret key ได้ (ที่มา: docs.omise.co/th/api-authentication/thailand)

มีการจำกัดอัตรา (rate limit) สำหรับจำนวนโทเค็นที่สามารถสร้างได้หรือไม่? มี การสร้างโทเค็นผ่าน Vault ของ Omise (endpoint สำหรับการทำ tokenization) มีการจำกัดอัตราที่ต่ำกว่า API หลักอย่างมีนัยสำคัญ โดยไม่มีการเปิดเผยตัวเลขที่แน่นอน หากคุณจำเป็นต้องส่งคำขอจำนวนมากในช่วงเวลาสั้นๆ ควรกระจายการส่งออกไปแทนที่จะส่งพร้อมกันเป็นชุดใหญ่ และหากคาดว่าจะมีอีเวนต์ที่มีการเข้าใช้งานหนาแน่น เช่น การจัดโปรโมชัน ควรติดต่อ support@omise.co ล่วงหน้า (ที่มา: docs.omise.co/th/api-rate-limiting/thailand)

หลังจากใช้โทเค็นเพื่อสร้างรายการเรียกเก็บเงินแล้ว จำเป็นต้องจัดการเรื่อง 3D Secure แยกต่างหากหรือไม่? อาจจำเป็น หากบัญชีของคุณเปิดใช้งาน 3D Secure ไว้ การตอบกลับของรายการเรียกเก็บเงินอาจมี authorize_uri ซึ่งคุณต้องรีไดเรกต์ผู้ถือบัตรไปยังหน้ายืนยันตัวตนกับธนาคารก่อนที่รายการจะเสร็จสมบูรณ์ 3D Secure เป็นข้อบังคับสำหรับธุรกิจบางประเภท เช่น ธุรกิจท่องเที่ยว สินค้าดิจิทัล เกม และหมวดหมู่อื่นๆ ที่มักเกิดการฉ้อโกงและการเรียกเก็บเงินคืนบ่อยครั้ง โดยทีมวิเคราะห์การทุจริตของ Omise จะเป็นผู้พิจารณา ส่วนร้านค้าทั่วไปสามารถเลือกใช้ได้ตามความสมัครใจ และแนะนำสำหรับรายการที่มีมูลค่าสูงหรือมีความเสี่ยงสูง ตั้งแต่เดือนตุลาคม 2022 เป็นต้นมา รองรับเฉพาะ 3D Secure 2 (3DS2) เท่านั้น เนื่องจาก 3DS1 ถูกยกเลิกไปแล้ว จึงควรเตรียมรองรับการรีไดเรกต์ผ่าน authorize_uri และรูปแบบการยืนยันตัวตนทั้งแบบไม่มีการขัดจังหวะ (frictionless) และแบบท้าทาย (challenge) ที่อาจเกิดขึ้น (ที่มา: docs.omise.co/th/3d-secure/thailand)

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

• Tokens API
• Charges API
• 3D Secure