requestAutocomplete

เอาเงินของฉันไป แต่อย่าเอาเวลาของฉัน

Jake Archibald

บทนำ

ฉันชอบเว็บ โดยรวมแล้ว เราคิดว่าเป็นแนวคิดที่ดี เราจึงต้องโต้แย้งกันอยู่บ่อยครั้งว่าเว็บกับเนทีฟโฆษณาแบบไหนดีกว่ากัน ไม่นานนัก บุคคลดังกล่าวก็เริ่มพูดถึงความสะดวกในการชําระเงินผ่านระบบของผู้ให้บริการ ปกติแล้วฉันจะวางระเบิดควันแล้ววิ่งออกจากห้องไปพร้อมกับหัวเราะอย่างบ้าคลั่ง เพราะนี่ไม่ใช่การโต้แย้งที่ฉันจะชนะได้ การละทิ้งรถเข็นช็อปปิ้งในเว็บบนอุปกรณ์เคลื่อนที่อาจสูงถึง 97% ลองจินตนาการว่าเหตุการณ์นี้เกิดขึ้นในชีวิตจริง ลองจินตนาการว่า 97% ของผู้คนที่ซูเปอร์มาร์เก็ตมีรถเข็นที่เต็มไปด้วยสิ่งที่ต้องการ พลิกรถเข็นกลับและเดินออกไป แน่นอนว่าผู้ใช้บางรายแค่ขึ้นราคาสินค้าและไม่เคยมีเจตนาที่จะซื้อ แต่ประสบการณ์การซื้อที่น่ากลัวบนเว็บก็มีส่วนทำให้เกิดปัญหานี้เช่นกัน เรากำลังทำให้ผู้ใช้เสียสติ ลองนึกถึงประสบการณ์การชำระเงินที่ยอดเยี่ยมที่คุณเคยได้รับบนเว็บ โดยเฉพาะบนอุปกรณ์เคลื่อนที่ ใช่ เป็นแอปสโตร์ใช่ไหม หรืออย่างน้อยก็เป็นระบบแบบปิดที่คล้ายกันซึ่งมีข้อมูลการชำระเงินของคุณอยู่แล้ว นี่เป็นปัญหา นโยบายนี้กำหนดให้เว็บไซต์ต้องผูกมัดกับผู้ให้บริการการชำระเงินรายใดรายหนึ่งซึ่งผู้ใช้ต้องมีบัญชีและลงชื่อเข้าใช้อยู่แล้ว หรือต้องผูกมัดกับแพลตฟอร์มที่กําหนดให้ผู้ใช้ต้องลงชื่อเข้าใช้ผู้ให้บริการการชําระเงินรายใดรายหนึ่ง เช่น App Store ที่กําหนดให้คุณเขียนโค้ดสําหรับแพลตฟอร์มนั้นๆ เท่านั้น หากไม่ดำเนินการอย่างใดอย่างหนึ่งเหล่านี้ ผู้ใช้จะต้องแตะหน้าจอหรือแป้นพิมพ์จนกว่าผิวหนังของนิ้วจะหลุดลอกไปหมดหรือผู้ใช้ยอมแพ้ เราต้องแก้ไขปัญหานี้

requestAutocomplete

ในโลกของ WebGL, WebRTC และ Web API อื่นๆ ที่ดูล้ำสมัยซึ่งขึ้นต้นด้วย "Web" requestAutocomplete นั้นดูไม่น่าสนใจนัก แต่เป็นรูปซูเปอร์ฮีโร่ในชุดสีเบจ API ขนาดเล็กที่น่าเบื่อซึ่งสามารถแทงทะลุหัวใจของแวมไพร์ดูดเวลาในการชำระเงินบนเว็บ

เว็บไซต์จะขอรายละเอียดการชำระเงินจากเบราว์เซอร์ซึ่งจัดเก็บรายละเอียดดังกล่าวในนามของผู้ใช้แทนที่จะใช้ผู้ให้บริการชำระเงินรายใดรายหนึ่ง นอกจากนี้ requestAutocomplete() เวอร์ชันของ Chrome ยังผสานรวมกับ Google Wallet สำหรับผู้ใช้ในสหรัฐอเมริกาเท่านั้น (ปัจจุบัน) ลองใช้บนเว็บไซต์ทดสอบของเรา

form.requestAutocomplete

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

button.addEventListener('click', function(event) {
  form.requestAutocomplete();
  event.preventDefault();
});

// TODO: listen for autocomplete events on the form

ก่อนดูเหตุการณ์ เราต้องตรวจสอบว่าเบราว์เซอร์เข้าใจช่องแบบฟอร์มของคุณ…

ข้อกำหนดของแบบฟอร์ม

ย้อนกลับไปเมื่ออินเทอร์เน็ตยังเป็นภาพขาวดํา Internet Explorer 5 ใช้แอตทริบิวต์ใหม่ autocomplete ในองค์ประกอบอินพุตของแบบฟอร์ม คุณสามารถตั้งค่าเป็น "ปิด" เพื่อหยุดไม่ให้เบราว์เซอร์แสดงคำแนะนำ API นี้ได้รับการขยายเพื่อให้คุณระบุเนื้อหาที่คาดไว้ของช่องได้โดยไม่ต้องแก้ไขแอตทริบิวต์ "name" และ requestAutocomplete จะใช้ API นี้เพื่อลิงก์ช่องในแบบฟอร์มกับข้อมูลผู้ใช้

<input name="fullname" autocomplete="name">

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

ปัจจุบัน requestAutocomplete ใน Chrome จะจดจำสิ่งต่อไปนี้

การชำระเงิน

• อีเมล
• cc-name - ชื่อบนบัตร
• cc-number - หมายเลขบัตร
• cc-exp-month - เดือนที่หมดอายุของบัตรเป็นตัวเลข 2 หลัก
• cc-exp-year - ปีหมดอายุของบัตรเป็นตัวเลข 4 หลัก
• cc-csc - รหัสความปลอดภัยของบัตร 3-4 หลัก

<input type="email" autocomplete="email" name="email">
<input type="text" autocomplete="cc-name" name="card-name">
<input type="text" autocomplete="cc-number" name="card-num">
<input type="text" autocomplete="cc-exp-month" name="card-exp-month">
<input type="text" autocomplete="cc-exp-year" name="card-exp-year">
<input type="text" autocomplete="cc-csc" name="card-csc">

แอตทริบิวต์ "name" ที่เราใช้ด้านบนเป็นเพียงตัวอย่างเท่านั้น คุณไม่จำเป็นต้องใช้ค่าใดค่าหนึ่งโดยเฉพาะ หากต้องการนําแบบฟอร์มนี้ไปใช้ซ้ำสําหรับผู้ใช้ที่ไม่มี requestAutocomplete ซึ่งเหมาะที่สุด คุณจะต้องเพิ่มป้ายกํากับ เลย์เอาต์ และการตรวจสอบ HTML5 พื้นฐาน

นอกจากนี้ คุณยังใช้องค์ประกอบอินพุตประเภทใดก็ได้เช่นกัน เช่น คุณอาจใช้ <select> สำหรับช่องวันหมดอายุของบัตร

ที่อยู่

• name - full name การใช้ชื่อเต็มเป็นช่องเดียวดีกว่าการใช้หลายช่อง ช่องหลายช่อง เช่น ชื่อและนามสกุล แสดงถึงวัฒนธรรมตะวันตกและอาจไม่เหมาะสมกับวัฒนธรรมอื่นๆ นอกจากนี้ การพิมพ์ในช่องเดียวยังง่ายกว่าด้วย

• tel - หมายเลขโทรศัพท์แบบเต็มพร้อมรหัสประเทศ หรือจะแบ่งออกเป็นส่วนๆ ก็ได้

  • tel-country-code - เช่น +44
  • tel-national - the rest

• street-address - ที่อยู่แบบเต็มที่มีคอมโพเนนต์คั่นด้วยคอมมา โดยสามารถแบ่งออกเป็น

  • address-line1
  • address-line2 - อาจเป็นค่าว่าง

• ย่าน - เมือง/เมืองเล็ก

• ภูมิภาค - รหัสรัฐ เคาน์ตี หรือแคว้น

• postal-code - รหัสไปรษณีย์

• country

ด้านบนควรใช้ร่วมกับข้อต่อไปนี้ - การเรียกเก็บเงิน - การจัดส่ง

<input type="text" autocomplete="billing name" required name="billing-name">
<input type="tel" autocomplete="billing tel" required name="billling-tel">
<input type="text" autocomplete="billing address-line1" required name="billing-address1">
<input type="text" autocomplete="billing address-line2" required name="billing-address2">
<input type="text" autocomplete="billing locality" required name="billing-locality">
<input type="text" autocomplete="billing region" required name="billing-region">
<input type="text" autocomplete="billing postal-code" required name="billing-postal-code">
<select autocomplete="billing country" required name="billing-country">
  <option value="US">United States</option>
  …
</select>

<input type="text" autocomplete="shipping name" name="shipping-name">
…

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

ควรเรียกใช้ requestAutocomplete เมื่อใด

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

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

<script>document.documentElement.className += ' js';</script>

และใน CSS

.js #checkout-button,
#checkout-form.for-autocomplete {
  display: none;
}

เราต้องใส่แบบฟอร์มการเรียกเก็บเงินในหน้ารถเข็น คุณสามารถวางไว้ที่ใดก็ได้ CSS ด้านบนจะทำให้ผู้ใช้ไม่เห็น

<form id="checkout-form" class="for-autocomplete" action="/checkout" method="post">
  …fields for payment, billing address &amp; shipping if relevant…
</form>

ตอนนี้ JavaScript จะเริ่มตั้งค่าทุกอย่าง

function enhanceForm() {
  var button = document.getElementById('checkout-button');
  var form = document.getElementById('checkout-form');

  // show the checkout button
  button.style.display = 'block';

  // exit early if there's no requestAutocomplete support
  if (!form.requestAutocomplete) {
    // be sure to show the checkout button so users can
    // access the basic payment form!
    return;
  }

  button.addEventListener('click', function(event) {
    form.requestAutocomplete();
    event.preventDefault();
  });

  // TODO: listen for autocomplete events on the form
}

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

เมื่อเรียกใช้ requestAutocomplete แล้ว คุณจะต้องทำอย่างไรต่อ

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

form.addEventListener('autocomplete', function() {
  // hurrah! You got all the data you needed
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    // the form was populated, but it failed html5 validation
    // eg, the data didn't match one of your pattern attributes
  }
  else if (event.reason == 'cancel') {
    // the user aborted the process
  }
  else if (event.reason == 'disabled') {
    // the browser supports requestAutocomplete, but it's not
    // available at this time. Eg, it wasn't called from an
    // interaction event or the page is insecure
  }
});

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

form.addEventListener('autocomplete', function() {
  form.submit();
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    form.submit();
  }
  else if (event.reason != 'cancel') {
    window.location = '/checkout-page/';
  }
});

เบราว์เซอร์จัดเก็บข้อมูลของฉันไว้ที่ใด

ข้อกำหนดนี้ไม่ได้กำหนดตำแหน่งที่จัดเก็บข้อมูล ซึ่งช่วยให้เบราว์เซอร์สามารถพัฒนานวัตกรรมได้ หากเข้าสู่ระบบ Chrome คุณจะมีตัวเลือกในการจัดเก็บรายละเอียดไว้ใน Google Wallet เพื่อให้เข้าถึงรายละเอียดเหล่านั้นในอุปกรณ์อื่นๆ ที่คุณเข้าสู่ระบบอยู่ได้ หากคุณจัดเก็บรายละเอียดไว้ใน Wallet requestAutocomplete จะไม่แสดงหมายเลขบัตรจริงของคุณ ซึ่งจะเพิ่มความปลอดภัย หากคุณไม่ได้เข้าสู่ระบบ Chrome หรือเลือกที่จะไม่ใช้ Google Wallet ระบบจะจัดเก็บรายละเอียดของคุณไว้ในเบราว์เซอร์ในเครื่องเพื่อใช้ซ้ำ (ไม่บังคับ) นี่เป็นสถานะปัจจุบัน แต่ในอนาคต Chrome และเบราว์เซอร์อื่นๆ อาจใช้ผู้ให้บริการชำระเงินเพิ่มเติม

การชำระเงินที่ง่ายดาย

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

รอบพิเศษ: การจัดการแบบฟอร์มหลายหน้า

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

checkoutButton.addEventListener('click', function() {
  requestUserData({
    billing: true,
    shipping: true
  }, function(response) {
    if (response.err == 'cancel') {
      // exit silently
      return;
    }
    if (response.err) {
      // fall back to normal form
      window.location.href = '/normal-checkout-form/';
      return;
    }

    // the rest is just made-up pseudo code as an example
    postToServer(data.shipping).then(function() {
      return postToServer(data.billing);
    }).then(function() {
      return postToServer(data.cc);
    }).catch(function() {
      // handle error
    });
  });
});