ทำระบบจ่ายเงินง่ายๆ ด้วย LIFF X SCB(EP.8)
สวัสดีมิตรรักแฟนคลับทุกท่าน หลังจากที่กวิ้นหายไปร่วมครึ่งปี ตอนนี้กวิ้นกลับมาแล้วววววทุกคนนนน ฮั่นแน่คิดถึงกวิ้นกันละสิ วันนี้กวิ้นก็กลับมาพร้อมกับบทความน่าสนใจอีกเช่นเคย ส่วนเนื้อหาจะเป็นอย่างไรนั้นตามไปดูกันเลยยยย
ทุกคนคงจะเห็นจากหัวข้อกันแล้วนะ ว่าวันนี้กวิ้นจะเขียนบทความเกี่ยวกับเรื่องอะไรใช่แล้ววันนี้กวิ้นจะมาเขียนบทความเกี่ยวกับการทำระบบชำระเงินด้วย SCB ผ่าน LIFF นั่นเองงงงง น่าสนใจใช่มั้ยหละ งั้นอย่ารอช้าไปลุยกันเลยดีกว่า
PART 1 — สมัครสมาชิก SCB Developers ซะก่อน
ก่อนอื่นเลยเราจะต้องทำการเข้าไปสมัครสมาชิกและเปิดบัญชี SCB developer ซะก่อนโดยเข้าไปที่ https://developer.scb เมื่อเข้ามาแล้วจะขึ้นหน้าเว็บแบบนี้
เมื่อเข้าเว็บไซต์มาแล้วให้คลิ๊กไปที่ Sign Up ที่มุมบนขวาได้เลย หลังจากคลิ๊กแล้วจะขึ้นหน้าจอแบบนี้
ซึ่งข้อมูลที่เราจะต้องกรอกมีดังนี้
First Name : ชื่อ
Last Name : นามสกุล
Industry : ประเภทของธุรกิจ
Email : อีเมล
Confirm Email : ให้ยืนยันอีเมลที่เรากรอกอีกครั้ง
Mobile Number : เบอร์โทรศัพท์
เมื่อเราทำการกรอกข้อมูลเหล่านี้เสร็จแล้วอย่าลืมอ่าน terms of use และ accept terms of use ด้วยนะจ๊ะ เมื่อ accept แล้วก็กด Submit ได้เลย เมื่อกด submit แล้วจะขึ้น popup แบบนี้ขึ้นมา
ให้เราเข้าไปที่ email เพื่อทำการตรวจสอบ email ที่ทาง SCB ส่งมาให้ หน้าตา email จะเป็นประมาณนี้
ซึ่งที่ทาง scb ส่งมาให้ก็คือ url สำหรับให้เราเข้าไปทำการ set up password นั่นเอง อย่าได้รอช้ารีบกด url เข้าไปเลยยย เมื่อกดเข้ามาแล้วจะเป็นแบบนี้
ในหน้านี้มีข้อมูลที่เราจะต้องกรอกตามนี้
Password : รหัสผ่าน
* ใส่รหัสผ่านไม่ต่ำกว่า 8 ตัวอักษร และไม่เกิน 60 ตัวอักษร
* ต้องมีตัวอักษรภาษาอังกฤษพิมพ์ใหญ่ อย่างน้อย 1 ตัว และ พิมพ์เล็ก อย่างน้อย 1 ตัว
* ต้องมีตัวเลขอย่างน้อย 1 ตัว
* ต้องมีตัวอักษรเหล่านี้อย่างน้อย 1 ตัว !, @, #, $, %, ^, -
Secret Question 1 : ตั้งรหัสผ่านลับ อันที่ 1
Secret Question 2: ตั้งรหัสผ่านลับ อันที่ 2
Secret Question 3: ตั้งรหัสผ่านลับ อันที่ 3
เมื่อกรอกข้อมูลครบแล้วให้กดปุ่ม Register Now ที่อยู่ข้างล่างได้เลย เมื่อกดปุ่มแล้วระบบจะพาเรากลับมาหน้า login
ให้เราทำการใส่ email และ password ที่เราได้ทำการสมัครไว้เพื่อทำการ login เมื่อ login สำเร็จเราจะเข้ามาสู่หน้า document ที่จะช่วยเราในการพัฒนาระบบต่างๆของ SCB นั่นเอง หน้าตาจะเป็นแบบนี้
เมื่อเราสามารถที่จะ login เข้ามาแบบนี้ได้แล้ว ก็แปลว่าเราสำเร็จขั้นที่ 1 แล้วฮะ
PART 2— สร้าง Application ใน SCB
หลังจากที่เราสามารถที่จะ login เข้ามาได้แล้ว ให้เราทำการกดเข้าไปที่ Apps ซึ่งจะอยู่ทางด้านมุมบน
หลังจากนั้น ให้กดปุ่ม Add Application
เมื่อกดปุ่ม Add Application เข้ามาแล้วก็จะเจอกับหน้าสำหรับสร้าง app ของ scb แบบนี้
ซึ่งจะมีข้อมูลที่เราต้องกรอกตามนี้
ข้อมูลส่วนของ Application
App Name : ชื่อของ app ที่เราต้องการ
Public Description : ข้อมูล รายละเอียดของ app
Callback URL : link สำหรับให้ SCB callback ข้อมูลกลับมายังระบบของเรา
Application Icon : รูปภาพ app ของระบบเรา
ข้อมูลส่วนของ Merchant Information
Merchant Name (Credit Card) : กำหนดชื่อของ Merchant ที่ใช้สำหรับบัตร Credit Card (ถ้าไม่กำหนดระบบจะกำหนดมาให้)
Merchant Name (Direct Debit) : กำหนดชื่อของ Merchant ที่ใช้สำหรับบัตร Direct Debit (ถ้าไม่กำหนดระบบจะกำหนดมาให้)
Biller Name : กำหนดชื่อของ Biller (ถ้าไม่กำหนดระบบจะกำหนดมาให้)
Supporting Reference : กำหนดข้อมูลค่า Reference เลือกได้ว่าจะเอา 1 หรือ 2 ค่า
Required CVV : กำหนดว่าต้องการให้ Required ข้อมูล CVV หรือไม่
Payment Confirmation Endpoint : url สำหรับ ยืนยันข้อมูลการชำระเงิน
เมื่อเราทำการกรอกข้อมูลเรียบร้อยแล้วให้กดปุ่ม Create ได้เลย เมื่อกดแล้วจะกลับมาที่หน้าการจัดการ Application ซึ่งจะมีข้อมูล app ที่เราสร้างมาแสดงด้วย
PART 3— สร้าง LIFF สำหรับเตรียมเชื่อมต่อกับ SCB
ก่อนที่เราจะไปกันต่อใน part นี้ ถ้าใครยังไม่รู้จัก LIFF ละก็กวิ้นขอแนะนำให้ไปอ่านบทความ ของ อาจารย์แทน อันนี้ก่อนนะฮะ เพื่อที่จะได้ทำการสร้าง LIFF ซะก่อน
ส่วนถ้าใครที่สร้าง LIFF พร้อมแล้วก็มาลุยกันเลยยย
ก่อนอื่นผมจะขึ้นตัวระบบหน้าซื้อขายขึ้นมาซะก่อน ซึ่งในจุดนี้พอเราใช้เป็น LIFF จะทำให้ง่ายต่อการทำ Authen เพราะเราสามารถที่จะตรวจจับได้ว่าคนที่เข้ามาในหน้าร้านค้าของเราได้ทำการ Authen ผ่าน LIFF มาแล้วหรือยัง โดยที่เมื่อเรานำหน้านี้ไปผูกกับ LIFF ระบบจะทำการ login LINE ให้อัตโนมัติ แบบนี้
PART 4— สร้าง ปุ่มสำหรับชำระเงินด้วย SCB Connect
เอาละมาถึงส่วนที่สำคัญของเรากันแล้ว ก่อนอื่นกวิ้นได้เขียน source code สำหรับเชื่อมต่อกับระบบ SCB ไว้ให้แล้วโดยที่สามารถอ่านเพิ่มเติมได้จาก document ของ SCB ได้เลยนะ ซึ่งในส่วนนี้กวิ้นได้ทำตัวอย่างไว้เฉพาะส่วนของ deeplink นะฮะ
<API Key> : ข้อมูล API Key
<API Secret> : ข้อมูล API Secret
โดยที่ข้อมูลทั้งสองนี้เราจะต้องกลับไปเอาที่ SCB Developers โดยให้เข้าไปที่ Application
<Biller ID> : ข้อมูล Biller ID
<Credit Card Merchant ID> : ข้อมูล Merchant ID ของ บัตรเครดิต
<Credit Card Terminal ID> : ข้อมูล Terminal ID ของ บัตรเครดิต
<Redirect After Payment> : url ใช้สำหรับ redirect กลับหลังจากที่ชำระเงินเสร็จสิ้น
<Shop Name> : ชื่อร้านค้า
<accessToken> : ข้อมูล accessToken
ข้อมูลเหล่านี้เราจะได้มาจาก Merchant Profile และเมื่อเราเข้ามาใน Merchant Profile แล้วเราจะเห็นข้อมูลทั้งหมด 3 ส่วนนั่นก็คือ
Biller Information : ข้อมูลเกี่ยวกับร้านค้า
Merchant Information (Credit Card) : ข้อมูลเกี่ยวกับบัตรเครดิต
Merchant Information (Direct Debit) : ข้อมูลเกี่ยวกับบัตรเดบิต
เอาหละและเมื่อเราได้ข้อมูลมาครบแล้วเราก็จะเอาข้อมูลเหล่านี้มาใช้ในการสร้าง deeplink เพื่อใช้สำหรับการชำระเงินขึ้นมา โดยเราจะเอามารวมกับ code ในหน้าแรกแบบนี้
เมื่อเรานำ deeplink มาใส่ไว้ในปุ่มเสร็จแล้วเราก็พร้อมที่จะทดสอบการชำระเงินกันแล้ววว
PART 5— Download SCB EASY Simulator App เพื่อใช้ในการทดสอบการจ่ายเงิน
มาถึง ขั้นตอนที่ 5 กันแล้วนะฮะ ก่อนอื่นเลยในขั้นทดสอบเราจะยังไม่สามารถที่จะนำระบบของเรามาใช้ทดสอบจ่ายด้วย SCB Easy App แบบปกติได้ ซึ่งในขั้นตอนนี้นั้นทาง SCB ก็ได้เตรียม App สำหรับขั้นทดสอบไว้ให้เราเรียบร้อยแล้วซึ่งเราจะต้องเข้ามาที่ document ตาม link นี้ก่อน
เมื่อเราเข้ามาใน document ส่วนของ SCB EASY Simulator App แล้วนั้น ใน document ก็จะมีให้เราเลือกว่าของเราเป็น ios หรือว่า android
ให้เราทำการเลือกตามระบบมือถือที่เราใช้อยู่นะครับ (ของผมเป็น ios) เมื่อกดเข้ามาแล้วจะเจอหน้าสำหรับให้กรอก email แบบนี้ครับ
ให้เราทำการกรอก email เข้าไปในครับแล้วระบบจะทำการส่ง link สำหรับ download ไปให้
เมื่อได้รับ email แล้วให้เรากด Get started ซึ่งขั้นตอนนี้เราจะต้องทำบนมือถือนะครับซึ่งใน ios ถ้าหากว่ากดแล้วมันจะให้เราเลือกว่าเราจะเปิดด้วย browser อะไรในส่วนนี้เราจะต้องเลือกเป็น safari เมื่อเรากดเข้ามาแล้วนะครับจะเจอกับหน้านี้ครับ
ให้กดตอบรับคำเชิญได้เลยครับ เมื่อกดแล้วจะเข้ามาในหน้าจอสำหรับ download ตัวทดสอบให้กด download version ล่าสุดได้เลยครับ
หลังจากนั้นให้ทำตามขั้นตอนแนะนำการติดตั้งได้เลยครับ และ เมื่อเราทำการติดตั้งสำเร็จแล้วจะปรากฏ icon app ขึ้นมาแบบนี้
ต่อมาให้เราทำการกดเพื่อเปิด app EasySandbox ขึ้นมาครับ ถ้าขึ้น popup แบบของผมก็ไม่ต้องตกใจนะครับ
ให้เราไปที่ Settings และไปที่ Profile Downloaded (ถ้าของใครไม่ขึ้นให้ติดตั้งก่อนนะครับ)
เมื่อเข้ามาแล้วจะเจอของ SIAM COMMERCIAL BANK … อันนี้ครับให้กดเข้าไป
เมื่อกดเข้ามาแล้วให้เราทำการกด Trust “SIAM COMMERCIAL BANK …”
แค่นี้เราก็จะสามารถเข้า app EasySandbox ได้แล้วครับ เมื่อเรากดเปิด app ขึ้นมาจะเจอหน้าจอแบบนี้ครับ
ให้ทำการกดไปที่ปุ่ม Login by QR เมื่อเรากดแล้ว app ก็จะทำการเปิดกล้องเพื่อเตรียมอ่าน QR Code แต่เอ๊ะ แล้วเราจะเอา QR Code ที่ไหนให้มันสแกน คำตอบอยู่ตรงนี้ครับ ให้เรากลับไปที่ SCB Developers หลังจากนั้นให้เรากดเข้าไปที่ SCB EASY Simulator App เราก็จะเจอหน้าจอแบบนี้
ให้เราทำการกด Generate QR ระบบก็จะทำการสร้าง QR Code สำหรับ login ขึ้นมาให้เราแบบนี้ ซึ่งเรามีเวลาในการสแกนเพียง 30 วินาที เท่านั้น ไม่อย่างงั้นเราจะต้อง Generate QR ใหม่อีกรอบ เพราะฉะนั้นเราควรเตรียมมือถือของเราให้พร้อมสำหรับการสแกน
เมื่อเรานำ app EasySandbox ของเรามาแสกนแล้วก็จะขึ้นหน้าจอแบบนี้ขึ้นมาให้เรากด Confirm ได้เลยเพื่อเป็นการยืนยัน
เอาละเมื่อเราทำการยืนยันเรียบร้อยแล้ว app EasySandbox ของเราก็จะพร้อมสำหรับการทดสอบแล้วฮะ ทีนี้ตอนที่เราทำการทดสอบชำระเงิน ตัว EasySandbox ก็จะถามหา PIN สำหรับเข้าใช้ app แล้วทีนี้เราจะทำยังไงละ ในเมื่อเค้าไม่ได้ให้มา หรือว่าเค้าจะให้เดา เดาไปเดามา app อาจจะล็อคได้นะฮะ แต่จริงๆ แล้ว SCB เค้าเตรียมข้อมูลไว้ให้เราเรียบร้อยแล้วครับ ให้กลับไปที่ SCB Developers และกดเข้าไปที่ Customer Profile
สังเกตุอะไรไหมครับ ถูกต้องแล้วครับ นี่แหละครับคือ PIN ที่เราตามหา เมื่อเรารู้ PIN แล้วก็ไปทดสอบกันเลย
เป็นยังไงกันบ้างครับสำหรับ EP นี้ อาจจะยาวสักนิดนึงแต่ผมคิดว่าน่าจะถูกใจใครหลายๆ คนนะครับ ส่วนใครที่พอทำระบบเสร็จแล้ว อยากจะเอาขึ้นมาใช้งานจริง ก็สามารถส่งระบบที่เราพัฒนาเสร็จแล้วไปขอ account จริง หรือ account production กันได้นะครับ โดยสามารถกรอกฟอร์ม ของทาง SCB เพื่อขอนำระบบขึ้นใช้งานจริงได้เลยนะฮะ เมื่อกรอกข้อมูลเสร็จแล้วจะมีเจ้าหน้าที่ติดต่อกลับภายใน 7 วันทำการ ครับผม สำหรับวันนี้ กวิ้นคงต้องขอตัวลาไปก่อน บ๊ายบายยยย
ตอนนี้ LINE Developers เรามีแฟนเพจแล้วนะจ๊ะอย่าลืมไปกด LIKE กันด้วยนะ
https://www.facebook.com/LINEDEVTH
ส่วนใครที่ยังไม่ได้เข้าร่วมกลุ่มกับเรา คลิ๊กที่นี่ได้เลย
https://www.facebook.com/groups/LINEDEVTH
Resources
Developer console
https://developers.line.biz/console/
Messaging API Document
https://developers.line.biz/en/docs/messaging-api/
Messaging API Reference
https://developers.line.biz/en/reference/messaging-api/
SCB Developers Document
https://developer.scb/#/documents/documentation/basics/getting-started.html
