ลองเขียน Flutter เชื่อมต่อกับ Omise RESTful API เล่นๆ

ในช่วงเดือนที่ผ่านมามีคนคุยกันเรื่อง Flutter ค่อนข้างมาก ก็เลยถือเอาเวลาว่างเมื่อวานมาลองเขียน Flutter ดู โดยมีโจทย์คือเขียนเชื่อมต่อ RESTful API ของทาง Omise และต้องเขียน Test ได้

โดย API ที่ตั้งโจทย์ไว้คือ API ทางฝั่ง Client ที่ใช้งานแค่ public key คือ Token API, Source API และ Capability API

ในขั้นแรกก็เลยเข้าไปนั่งอ่านเอกสารของทาง Flutter ว่าจะต้องเริ่มเขียนยังไงดี และอยากจะเขียนเป็นในเชิง Library หรือ package เพื่ออัพโหลดขึ้นไปบนเว็บไซต์ที่รวม packages ต่างๆของทาง Flutter คือ https://pub.dev ก็เลยเจอเอกสารนี้ครับ https://flutter.dev/docs/development/packages-and-plugins/developing-packages

จากนั้นก็เลยลองนั่งเขียนไปเรื่อยก็พบว่าติดปัญหาในเรื่อง Syntax ของภาษา Dart (Flutter ใช้ภาษา Dart) เนื่องจากไม่เคยเขียนภาษา Dart มาก่อน และติดในเรื่องของการวาง Structure ใน Flutter ครับ เลยลองหา package ชาวบ้านบน pub.dev มาลองผสมดู 😂

สุดท้ายก็ได้มาแล้วครับเทสต์ผ่านด้วย เฮ~ โดยในการเทสต์ API ผมได้ลองทดสอบกับ public key บน Account ของผมเรียบร้อยแล้วว่าใช้งานได้ แล้วก็เลยเขียนเทสต์โดยทำการ Mock HTTP request เอาครับ

แน่นอนว่าอาจจะมี structure หรือ syntax บางอย่างที่อาจจะต้องปรับปรุง หากมีใครหลงเข้ามาดูก็ comment หรือแจ้งบอกใน GitHub ได้นะครับ จะได้ปรับปรุง code กันไป

GitHub: https://github.com/keeratita/omise_flutter
Pub : https://pub.dev/packages/omise_flutter

เชื่อมต่อกับ Omise อย่างง่ายๆ ด้วย Node.js

นานๆ จะกลับมาอัพเดท blog สักที เมื่อวันที่ผ่านมาได้มีโอกาสนั่งเขียนโค้ดเพื่อเป็นตัวอย่างในการเชื่อมต่อกับ Omise Payment Gateway อย่างง่ายๆด้วย node.js (express.js) โดยในโค้ดก็จะครอบคลุมการสร้าง Charge อย่างง่ายๆ ไม่ว่าจะเป็น Credit / Debit card และ Internet Banking รวมไปถึงการรับ WebHooks ด้วย

นานๆ จะกลับมาอัพเดท blog สักที เมื่อวันที่ผ่านมาได้มีโอกาสนั่งเขียนโค้ดเพื่อเป็นตัวอย่างในการเชื่อมต่อกับ Omise Payment Gateway อย่างง่ายๆด้วย node.js (express.js) โดยในโค้ดก็จะครอบคลุมการสร้าง Charge อย่างง่ายๆ ไม่ว่าจะเป็น Credit / Debit card และ Internet Banking รวมไปถึงการรับ WebHooks ด้วย

โดยจะประกอบไปด้วย

1) ฟอร์มสำหรับบัตรเครดิต/เดบิต โดยมีความปลอดภัยซึ่งทางผู้พัฒนาเว็บไซต์เองจะต้องไม่ส่งข้อมูลของบัตรเข้าเซิร์ฟเวอร์ของตนเอง และจะทำการสร้าง Token เพื่อนำไปสร้าง Charge เท่านั้น

2) การสร้าง Charge นั้นรองรับ 3-D secure หรือการกรอก OTP ซึ่งจะมีการ redirect ไปยังเว็บไซต์ของทางธนาคาร (ถ้าใช้ Live keys)

3) มี code สำหรับการสร้าง Charge สำหรับ Internet Banking ด้วยนะ ส่วนอื่นๆ เช่น Alipay, Installment ก็ทำคล้ายๆกัน แค่เปลี่ยน parameter เท่านั้น

4) มีตัวอย่างสำหรับหน้า return_uri หรือหน้าที่แสดงผลการชำระเงิน บางที่เรียก Thank you page ก็ว่ากันไปครับ

5) มีตัวอย่างสำหรับการรับข้อมูลจาก WebHooks ด้วยครับ แต่ก็ต้องไปพัฒนาต่อกันเองนะครับ ว่าจะมี logic ในการเอาไปประมวลผลอะไรต่อ

โดยในอนาคตอาจจะทำวีดีโออธิบายให้ด้วย และจะเพิ่มภาษาอื่นๆ หรือ Payment method อื่นๆ เพื่อเป็นตัวอย่างแบบง่ายๆให้นำไปพัฒนาต่อกันเองได้ครับ

ว่าแล้วก็สามารถเข้าไปดูได้ใน GitHub ของผมเลยครับ https://github.com/keeratita/omise-integration-examples

ปล. ก่อนหน้านี้มีบทความเกี่ยวกับ ASP.NET เดี๋ยวไว้จะเอามารวมไว้ใน Git เดียวกันครับ ลองไปอ่านได้ที่ https://keerati.co/2018/07/07/asp-net-core-กับ-omise-dotnet/

Omise Payment Flow สำหรับ 3-D Secure

Omise Payment Method

ก่อนที่จะอธิบาย Omise Payment Flow ขออนุญาตอธิบายถึงวิธีการสร้าง Charge หรือการชำระกับทาง Omise (อ่านว่า โอ-มิ-เซะ หลายคนอ่านกัน โอมิส 😂) ก่อน ซึ่งในตอนนี้มีหลายรูปแบบ โดยคร่าวๆที่ทราบตอนนี้คือมี

  1. Credit / Debit card ชำระผ่านบัตรเครดิต หรือบัตรเดบิต ซึ่งสามารถแยกได้อีก 2 รูปแบบย่อยคือ Non 3-D Secure (Non 3DS) กับ 3-D Secure (3DS)
    บางคนงงว่า 3DS มันคืออะไร ก็ลองอ่านจากบทความนี้ดูครับ
  2. Internet Banking ชำระผ่านอินเตอร์เน็ตแบงค์กิ้ง
  3. Alipay (Online) ชำระผ่านอาลีเพย์แบบออนไลน์
  4. Bill Payment (Tesco Lotus) ชำระด้วยบาร์โค้ดที่เทสโก้โลตัส (ในบทความนี้จะไม่พูดถึงเรื่อง Bill Payment)

Continue reading “Omise Payment Flow สำหรับ 3-D Secure”

omise-react-native 0.0.4 มาแล้วว

ก่อนหน้านี้ผมได้สร้าง package สำหรับคนที่ต้องการใช้งาน Omise ด้วย react-native โดยสามารถสร้าง Token ได้

ที่ผ่านมาทาง Omise ได้มี API ใหม่ที่ชื่อว่า Source API (สำหรับ API version 2017-11-02 ขึ้นไป) ซึ่งเจ้า Source API นี้มันทำตัวคล้ายๆกับ Token แต่ไม่ได้สร้างขึ้นจากข้อมูลบัตรเครดิต แต่สร้างขึ้นเพื่อสำหรับชำระด้วยวิธีอื่นๆที่ไม่ใช่บัตรเครดิต เช่น Internet Banking, Alipay หรือ Bill Payment เป็นต้น ซึ่งตอนนี้ผมทำให้รองรับการสร้าง Source จาก Source API ของ Omise ได้เรียบร้อยครับ

Continue reading “omise-react-native 0.0.4 มาแล้วว”

วิธีใช้งาน Omise.js ใน Vue.js และ React.js แบบง่ายๆ

เล่าประวัติกันเล็กน้อย

เป็นโปรเจคเก่าๆที่ทำไว้เล่นๆ เพราะว่ามีคนถามค่อนข้างเยอะว่าเอ๊ะ ทำไมใช้ Omise.js กับ JavaScript Framework อื่นๆไม่ได้ เช่น Vue.js หรือ React.js เป็นต้น

โดยเอาจริงๆแล้วมันใช้งานได้นะครับ 😅 แต่ว่าพักหลังๆ โปรแกรมเมอร์จะติดกับการใช้งานพวก JavaScript Package Manager เช่น npm, yarn หรือ bower กันซะเยอะ จนลืมไปว่าจริงๆแล้ว JavaScript มันทำงานกันอย่างไร

ขอออกตัวก่อนว่าก็ไม่ได้รู้ลึกอะไรขนาดนั้นนะครับ เนื่องจากห่างหายจากการเป็นโปรแกรมเมอร์มานานหลายปีมากๆ แต่ก็ยังชอบเขียนโปรแกรมหรือศึกษาเล่นๆเป็นงานอดิเรกอยู่ ซึ่งช่วงที่เป็นโปรแกรมเมอร์นั้นก็ได้ใช้งาน JavaScript มาบ้างครับ

อธิบายการทำงานคร่าวๆ

ทุกวันนี้การเขียนพวก event ต่างๆใน JavaScript มันเป็นเรื่องที่ง่ายขึ้นมาก โดยไม่ต้องไปสนใจว่าเขียนแบบนี้นะ จะใช้งานบน Browser นี้ได้ แต่จะใช้งานบน Browser นี้ไม่ได้ ต้องแก้ด้วยวิธีนี้ร้อยแปดพันเก้า เพราะตัว JavaScript Framework มันจัดการให้หมด ซึ่งชีวิตมันเริ่มสบายตั้งแต่มี jQuery เข้ามา

ซึ่งเวลาเขียนมันง่ายมากเนอะ สมมติเรื่องตอนที่เว็บมัน onload ก็แค่นี้เอง

$(document).ready(function() {
    // code here
});

หรือ

$(window).on("load", function() {
    // code here
});

อ่านเพิ่มเติม jQuery | $(document).ready()
แต่บอกเลยว่าถ้าก่อนยุคนั้น (ซึ่งผมอยู่ในยุคเก่าๆนั้นแหละ 😂) มันเขียนเยอะมากครับ เช่น

The Javascript Anthology

อันนี้ต้องบอกว่าผมเอามาจากหนังสือ Textbook เก่าๆของผมเองชื่อ The Javascript Anthology แต่คงไม่มีใครใช้แล้วละมั้ง 🤪

สังเกตุว่ามันจะมีวิธีการเขียนที่เยอะกว่าเนอะ เพราะต้องตรวจเรื่อง Object ของแต่ละ browser ที่ support แตกต่างกันด้วย

แต่เอาจริงๆถ้าจะศึกษาพวกนี้ ก็ไปแกะ Source Code ของพวก jQuery หรือ JavaScript Framework อื่นๆกันดูก็ได้ครับ เพราะเขาก็ Open Source กันหมด แต่ส่วนใหญ่จะขี้เกียจกันใช่ไหมล่ะ!!? (แทงใจไหม)

แนะนำให้ลองเข้าไปศึกษาบ้างนะครับ หากใช้งานกันจริงๆเนอะ เพราะเวลาที่จะเอาแต่สะดวกกันจริงๆ จะมีปัญหากับงานหรือโปรเจคที่ต้องลงถึงพวก Fundamental 😘

เอาล่ะหยุดบ่น (ทำอย่างกะตัวเองเก่ง Fundamental 😂) จริงๆผมก็ไม่ได้เก่งครับ มั่วๆซะส่วนใหญ่ คนที่รู้จักผมก็จะรู้ดี พูดเท่ๆไปงั้น 555

อะเข้าเรื่องครับ

การใช้งานตัว Omise.js นั้นตามเอกสารที่ทาง Omise เขาเขียนเอาไว้ก็ค่อนข้าง(โคตร)ชัดเจนว่าให้ใช้ tag script เพื่อเรียกใช้งาน JavaScript Library โดยตรงจาก CDN ของเขาเลย

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

ไปอ่านเพิ่มเติมเองจาก link ข้างล่างครับ

มาถึงแค่ส่วนเริ่มต้นนี้หลายคนที่ไม่เคยมาเขียนอะไรแบบนี้เองก็งงแล้ว หากใครงงแนะนำว่าศึกษาการเขียน html ขั้นพื้นฐานก่อนเลยนะครับแล้วค่อยไปต่อ

เอาล่ะหลังจากที่เขียนเรียก Omise.js แล้วหลายคนก็เริ่มติดว่า แล้วจะเรียกใช้งาน Omise.js ยังไง key ของส่วนนี้ก็ Fundamental อีกแล้วอะ ถ้าใครใช้งานไม่เป็นแสดงว่าอาจจะยังไม่เข้าใจเรื่อง Global Scope และ Local Scope ของ JavaScript ครับผม

แนะนำให้อ่านเพิ่มเติมตามนี้ครับ

และแน่นอนครับทุกคนสามารถทดสอบ debug ได้เองจาก browser ที่ท่านๆใช้งาน (โปรแกรมเมอร์ที่ไม่รู้เรื่องนี้บาปมาก) โดยลองพิมพ์

console.log(Omise);

และ

console.log(window.Omise);

โดยสังเกตุว่าก็จะพบ Omise ทั้งคู่ ซึ่งหากใน JavaScript Framework ของท่านไม่เจอในวิธีแรก ท่านก็เรียกด้วยวิธีที่ 2 ได้ครับ คือไปเรียกจาก Global scope นั่นเอง ง่ายมั๊ย 😂

วิธีนี้ใช้ได้กับทุก JavaScript Framework นะครับผม ไม่ว่าจะเป็น Vue.js React.js หรือจะเป็นตัวอื่นๆเช่น Angular.js

หากขี้เกียจอ่านบทความนี้ลองดู Video ที่อัดทิ้งไว้นะครับ และก็ดูให้ครบทุกวินาทีนะครับ มันแค่ 3 นาทียัง skip อีกผมก็คิดว่าท่านควรพิจารณาตัวเองแล้วครับ ผมก็ไม่ทราบจะช่วยยังไงละ 😂

Omise.js กับ Vue.js

Youtube: https://www.youtube.com/watch?v=_aUJjTFw4vU

Omise.js กับ React.Js

Youtube: https://www.youtube.com/watch?v=_OpEi5eXKE8