ข้ามไปยังเนื้อหาหลัก
เวอร์ชัน: คานารี

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

หัวข้อในหน้านี้

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

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

บันทึก

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

small_token

หลักการทำงานในระดับสูงมีดังนี้:

บันทึก

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

Omise-Token-Simulator​

โทเค็นที่สร้าง: ...

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

ตัวอย่างเต็มรูปแบบ​

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

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

ตัวอย่างเช่น ไลบรารี Omise-JS ไม่ต้องการ 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>
    ชื่อ<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);

  // ทำให้ฟิลด์ในฟอร์มเป็นออบเจ็กต์การ์ดที่ถูกต้อง
  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 สามารถเก็บข้อมูลบัตรเครดิตได้ และคุณจะได้รับโทเค็นที่สามารถใช้เพื่อดำเนินการต่างๆ กับบัตรนั้นได้