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

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

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

การส่งข้อมูลส่วนบุคคลมายังโอมิเซะจะต้องใช้ JavaScript โดยส่งผ่าน Omise.js เท่านั้น ยกเว้นเซิร์ฟเวอร์ของร้านค้าจะได้รับรองมาตรฐาน PCI DSS

การทำงานของระบบ:

Token overview

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

Token มีอายุการใช้งานเพียงครั้งเดียว จึงไม่มีความจำเป็นใดๆ ที่ร้านค้าจะต้องจัดเก็บไว้ เราแนะนำว่าให้นำ Token ไปใช้งานทันทีเลย

Omise Token Simulator

อ่านเพิ่มเติมเกี่ยวกับ Tokens API ที่ Tokens Reference

ตัวอย่างการทำงานเต็มรูปแบบ

เริ่มโดยเพิ่ม Omise.js ลงบนเว็บเพจ สามารถใส่ลงไปก่อน </body> ปิดท้ายได้เลย

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

ตัวของ Omise JS สามารถทำงานได้โดยไม่ต้องใช้ jQuery แต่ในตัวอย่างต่อไปนี้เราใช้ jQuery เพื่อให้การเรียกใช้ DOM ดูง่ายขึ้น ท่านสามารถใส่ jQuery ได้โดยใช้ตัวอย่างนี้

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

ใส่ public key ลงไปเพื่อให้ Omise.js ทำงานร่วมกับ Omise API

<script>
  Omise.setPublicKey("pkey_test_4xpip92iqmehclz4a4d");
</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>

ต่อไปคือการสั่งให้ระบบสร้าง Token เมื่อผู้ถือบัตรกดปุ่มยืนยัน และกรอก Token ลงใน field ก่อนจะลบ field อื่นๆ ออกเพื่อไม่ให้ข้อมูลเหล่านั้นถูกส่งไปยังเซิร์ฟเวอร์ของร้านค้า

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

  var form = $(this);

  // Disable the submit button to avoid repeated click.
  form.find("input[type=submit]").prop("disabled", true);

  // Serialize the form fields into a valid 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()
  };

  // Send a request to create a token then trigger the callback function once
  // a response is received from Omise.
  //
  // Note that the response could be an error and this needs to be handled within
  // the callback.
  Omise.createToken("card", card, function (statusCode, response) {
    if (response.object == "error") {
      // Display an error message.
      var message_text = "SET YOUR SECURITY CODE CHECK FAILED MESSAGE";
      if(response.object == "error") {
        message_text = response.message;
      }
      $("#token_errors").html(message_text);

      // Re-enable the submit button.
      form.find("input[type=submit]").prop("disabled", false);
    } else {
      // Then fill the omise_token.
      form.find("[name=omise_token]").val(response.id);

      // Remove card number from form before submiting to server.
      form.find("[data-omise=number]").val("");
      form.find("[data-omise=security_code]").val("");

      // submit token to server.
      form.get(0).submit();
    };
  });

  // Prevent the form from being submitted;
  return false;

});

เรียบร้อยแล้ว! ระบบของโอมิเซะสามารถรับเอาข้อมูลบัตรมาและจัดส่ง Token เพื่อให้ร้านค้าใช้ดำเนินการด้านการรับชำระได้ต่อไป