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

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

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

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

คู่มือนี้เน้นเฉพาะการเก็บข้อมูลบัตรและแปลงเป็นโทเคนเท่านั้น Omise.js ยังรองรับช่องทางการชำระเงินที่ไม่ใช่บัตรด้วย (PromptPay, GrabPay และ source อื่น ๆ) และมีวิดเจ็ตการชำระเงินสำเร็จรูปให้ใช้แทนฟอร์มที่สร้างเอง หากต้องการข้อมูลในส่วนนั้น ดูได้ที่เอกสารอ้างอิง Omise.js ฉบับสมบูรณ์

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

โดยสรุปแล้ว การทำงานเป็นไปตามขั้นตอนต่อไปนี้

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ tokens API ได้ที่เอกสารอ้างอิงโทเคน

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

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

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

ไลบรารี Omise.js ไม่จำเป็นต้องใช้ jQuery แต่ตัวอย่างนี้ใช้ jQuery เพื่อความสะดวกในการเข้าถึง DOM หากคุณไม่ต้องการเพิ่ม dependency ของ jQuery คุณสามารถเขียนโค้ดในลอจิกเดียวกันสำหรับการส่งฟอร์มและการค้นหา DOM ด้วย 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_5yx6s4dmon2i23pwaxw");
</script>

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

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

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

  <div>
    Name<br>
    <input type="text" data-omise="holder_name">
  </div>
  <div>
    Number<br>
    <input type="text" data-omise="number">
  </div>
  <div>
    Date<br>
    <input type="text" data-omise="expiration_month" size="4"> /
    <input type="text" data-omise="expiration_year" size="8">
  </div>
  <div>
    Security Code<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 object ที่ถูกต้อง
  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 function เมื่อได้รับ
  // การตอบกลับจาก Omise
  //
  // โปรดทราบว่าการตอบกลับอาจเป็นข้อผิดพลาดได้ ซึ่งต้องจัดการ
  // ภายใน callback นี้
  Omise.createToken("card", card, function (statusCode, response) {
    if (!response || response.object == "error") {
      // แสดงข้อความแจ้งข้อผิดพลาด
      var message_text = (response && response.message) ? response.message : "Unable to generate a token. Check your connection and try again.";
      $("#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 จะเก็บข้อมูลบัตรเครดิตและส่งคืนโทเคนกลับมา ซึ่งคุณสามารถนำไปใช้ดำเนินการกับบัตรต่อได้

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

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

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

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

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

เมื่อ response.object == "error" ค่า response.code จะเป็นอะไรได้บ้าง โค้ดตัวอย่างในคู่มือนี้ตรวจสอบว่ามีข้อผิดพลาดเกิดขึ้นหรือไม่ แต่ไม่ได้ระบุว่าสาเหตุคืออะไรบ้าง โดยรหัสที่พบบ่อยที่สุดจากการสร้างโทเคน ได้แก่

ตรวจสอบค่าที่แน่นอนได้จาก response.code และคำอธิบายที่มนุษย์อ่านเข้าใจได้จาก response.message เพื่อแสดงให้ลูกค้าเห็น ดูรายการทั้งหมดได้ที่เอกสารอ้างอิงข้อผิดพลาดของ API

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

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

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

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

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

เนื้อหาที่เกี่ยวข้อง

• Omise.js (เอกสารอ้างอิงฉบับสมบูรณ์ — source และฟอร์มการชำระเงินสำเร็จรูป)
• Tokens API
• Charges API
• 3D Secure