Site icon บริษัท โค๊ดบี จำกัด

ติดตั้งใช้งาน Omise [ PHP ] ระบบชำระเงินออนไลน์

codebee
ติดตั้งใช้งาน-Omise-PHP-ระบบชำระเงินออนไลน์

ติดตั้งใช้งาน-Omise-PHP-ระบบชำระเงินออนไลน์

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>Omise อ่านว่า โอมิเซะ คือ ระบบชำระเงินออนไลน์ <&sol;strong>&lpar; Online Payment Gateway &rpar; รองรับช่องทางการชำระเงินที่หลากหลาย บัตรเครดิต &sol; เดบิต &nbsp&semi;<a href&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;search&quest;client&equals;safari&amp&semi;rls&equals;en&amp&semi;sxsrf&equals;ALeKk01aPwySE6pWhqk6x4Mjfl0ZgzK3Ng&colon;1593661145778&amp&semi;q&equals;Truemoney&plus;Wallet&amp&semi;spell&equals;1&amp&semi;sa&equals;X&amp&semi;ved&equals;2ahUKEwix1vGz0q3qAhXYbn0KHUN8BIMQBSgAegQIDRAq">Truemoney Wallet<&sol;a> &sol; <a href&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;search&quest;client&equals;safari&amp&semi;rls&equals;en&amp&semi;sxsrf&equals;ALeKk03&lowbar;eoiJcZk3Qbm5c2fStzHa8P85uA&colon;1593661185032&amp&semi;q&equals;PromptPay&amp&semi;sa&equals;X&amp&semi;ved&equals;2ahUKEwiAxc3G0q3qAhXGfX0KHVv&lowbar;B2wQ7xYoAHoECAwQKg">PromptPay<&sol;a> &sol; Alipay เป็นต้น ดูเพิ่มเติมได้ที่ <a href&equals;"https&colon;&sol;&sol;www&period;omise&period;co&sol;th&sol;payment-methods&sol;thailand" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">Omise Payment Method<&sol;a><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading"><strong>สิ่งที่ควรทราบก่อนใช้งาน Omise<&sol;strong><&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>โอมิเซะ มี SDK ให้ใช้งานหลากหลายภาษา เช่น Go&comma; Java&comma; PHP&comma; &period;Net&comma; Python&comma; NodeJS&comma; Ruby<&sol;li><li>โอมิเซะ มี Plug-In พร้อมสำหรับระบบ CMS ค่อนข้างครบ Magento&comma; OpenCart&comma; Shopify&comma; PrestaShop&comma; WooCommerce<&sol;li><li>โอมิเซะ คิดค่าธรรมเนียม 3&period;65&percnt; ต่อรายการ &lpar; Transaction &rpar;<&sol;li><li>คุณสามารถสมัครใช้งาน โอมิเซะ ได้ทั้งในนามบุคคลธรรมดา และ นิติบุคคล &lpar; บริษัทจดทะเบียน&ZeroWidthSpace; &rpar; ใช้เวลาเบ็ดเสร็จประมาณ 2 &&num;8211&semi; 4 สัปดาห์ ประมาณการณ์เวลาจากตัวผู้เขียนเองที่ได้ทดลองสมัครทั้ง 2 แบบแล้ว<&sol;li><li>สามารถสมัครสมาชิกและใช้งานในโหมดทดสอบ &lpar; Sandbox Mode &rpar; ได้ทันที หากต้องการใช้งานในโหมดใช้งานจริง &lpar; Live Mode &rpar; ต้องยื่นเอกสารเข้าไปตรวจสอบก่อน<&sol;li><li>ค่าธรรมเนียมการโอน หมายถึง กรณีที่เราต้องการโอนเงินจากบัญชี Omise ไปยังไปบัญชีธนาคารอื่น ถ้ายอดโอนไม่เกิน 2&comma;000&comma;000 บาท จะเสียค่าธรรมเนียม 30 บาทต่อรายการ ถ้ายอดเกิน 2&comma;000&comma;000 บาท จะเสียค่าธรรมเนียมการโอน 150 บาท<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading"><strong>เริ่มติดตั้งใช้งาน Omise กับ Codeigniter <&sol;strong><&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>สามารถติดตั้งได้ทั้งกับ PHP ธรรมดา และ Codeigniter นะครับ ติดตั้ง Omise PHP Libary ตัวนี้ <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;omise&sol;omise-php">https&colon;&sol;&sol;github&period;com&sol;omise&sol;omise-php <&sol;a>ติดตั้งไว้ที่ <strong>application&sol;third&lowbar;party<&sol;strong> สามารถติดตั้งได้ทั้งแบบผ่าน composer หรือ download ลงมาติดตั้งแบบ manual<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>กรณีติดตั้งผ่าน composer จะได้โครงสร้างและวิธีเรียกใช้งานแบบนี้ จากภาพให้ดูฝั่งขวามือนะครับ ในโฟลเด้อ omise-php<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;07&sol;omise-composer&period;png" alt&equals;"" class&equals;"wp-image-5293" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;07&sol;omise-composer&period;png" data-full-size&equals;"820x324" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code class&equals;"">require&lowbar;once APPPATH&period;'third&lowbar;party&sol;omise-php&sol;vendor&sol;autoload&period;php'&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>กรณีติดตั้งแบบ Manually คือ ดาวน์โหลดมาและวางไฟล์ไว้ใน third&lowbar;party จะได้โครงสร้าง และ วิธีเรียกใช้งานแบบนี้ จากภาพให้ดูฝั่งขวามือนะครับ ในโฟลเด้อ omise-php<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;07&sol;omise-manual&period;png" alt&equals;"" class&equals;"wp-image-5294" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;07&sol;omise-manual&period;png" data-full-size&equals;"854x322" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code class&equals;"">require&lowbar;once APPPATH&period;'third&lowbar;party&sol;omise-php&sol;lib&sol;Omise&period;php'&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading"><strong>สร้าง&ZeroWidthSpace; UI การชำระเงินด้วยบัตรเครดิต &sol; เดบิต<&sol;strong><&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ตัว Omise เองมี UI ต้นแบบที่สวยงามและน่าเชื่อถืออยู่แล้ว เราสามารถใช้ต้นแบบของ Omise ได้เลย สร้างไฟล์ payment&lowbar;view&period;php และเขียนคำสั่งใน body ดังนี้<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ส่วนของ html ในไฟล์ payment&lowbar;view&period;php<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted">&sol;&sol; ไฟล์ payment&lowbar;view&period;php ส่วนของ form การกรอกข้อมูลบัตรเครดิต&NewLine;<form id&equals;"checkoutForm" method&equals;"POST" action&equals;"&lt&semi;&quest;php echo base&lowbar;url&lpar;" payment&equals;"" create"&rpar;&semi;&equals;"" &quest;&equals;"">"&gt&semi;&NewLine; <input type&equals;"hidden" name&equals;"omiseToken">&NewLine; <input type&equals;"hidden" name&equals;"omiseSource">&NewLine; <button type&equals;"submit" id&equals;"checkoutButton">ชำระด้วยบัตรเครดิต<&sol;button>&NewLine;<&sol;form><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ส่วนของ Javascript ในไฟล์ payment&lowbar;view&period;php<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><script type&equals;"text&sol;javascript" src&equals;"https&colon;&sol;&sol;cdn&period;omise&period;co&sol;omise&period;js"><&sol;script>&NewLine;&NewLine;<script>&NewLine;OmiseCard&period;configure&lpar;&lbrace;&NewLine; publicKey&colon; "pkey&lowbar;test&lowbar;5k2raw4evpbv78fzhcy"&comma; &sol;&sol; เข้าสู่ระบบของ Omise และไปที่ API -> Keys คีย์นี้จะเป็นตัวบอกว่า ชำระเข้าบัญชีของใคร&NewLine;&rcub;&rpar;&semi;&NewLine;&NewLine;var button &equals; document&period;querySelector&lpar;"&num;checkoutButton"&rpar;&semi;&NewLine;var form &equals; document&period;querySelector&lpar;"&num;checkoutForm"&rpar;&semi;&NewLine;&NewLine;button&period;addEventListener&lpar;"click"&comma; &lpar;event&rpar; &equals;> &lbrace;&NewLine; event&period;preventDefault&lpar;&rpar;&semi;&NewLine; OmiseCard&period;open&lpar;&lbrace;&NewLine; frameLabel&colon;"&lbrack;ชื่อเว็บไซต์ที่ให้บริการ&rsqb;"&comma;&NewLine; image&colon;'&lbrack;โลโก้ของร้าน&rsqb;'&comma;&NewLine; amount&colon; '&lbrack;จำนวนเงิน&rsqb;'&comma; &sol;&sol; เช่น ถ้าชำระ 20 บาท ต้องใส่เป็น 2000&semi;&NewLine; currency&colon; "THB"&comma;&sol;&sol; สกุลเงิน&NewLine; defaultPaymentMethod&colon; "credit&lowbar;card"&comma; &sol;&sol; ช่องทางการชำระเงิน ค่าเริ่มต้นเป็น credit&lowbar;card&NewLine; onCreateTokenSuccess&colon; &lpar;nonce&rpar; &equals;> &lbrace;&NewLine; if &lpar;nonce&period;startsWith&lpar;"tokn&lowbar;"&rpar;&rpar; &lbrace;&NewLine; form&period;omiseToken&period;value &equals; nonce&semi;&NewLine; &rcub; else &lbrace;&NewLine; form&period;omiseSource&period;value &equals; nonce&semi;&NewLine; &rcub;&semi;&NewLine; form&period;submit&lpar;&rpar;&semi;&NewLine; &rcub;&NewLine; &rcub;&rpar;&semi;&NewLine;&rcub;&rpar;&semi;&NewLine;<&sol;script><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>สร้าง Controller ตั้งชื่อว่า Payment&period;php และอ่านอธิบายแต่ละส่วนใน comment code ด้านล่างเลยครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">require&lowbar;once APPPATH&period;'third&lowbar;party&sol;omise-php&sol;vendor&sol;autoload&period;php'&semi;&NewLine;&sol;&sol;require&lowbar;once APPPATH&period;'third&lowbar;party&sol;omise-php&sol;lib&sol;Omise&period;php'&semi;&sol;&sol; ถ้าติดตั้ง ธรรมดาให้ เรียกใช้งานแบบนี้&NewLine;&NewLine;define&lpar;'OMISE&lowbar;API&lowbar;VERSION'&comma; '2019-05-29'&rpar;&semi; &sol;&sol; เข้าระบบ omise และคลิกที่อีเมล คลิก api version เลือกระหว่าง ทดสอบ กับ ใช้งานจริง&NewLine;define&lpar;'OMISE&lowbar;PUBLIC&lowbar;KEY'&comma; 'pkey&lowbar;test'&rpar;&semi;&NewLine;define&lpar;'OMISE&lowbar;SECRET&lowbar;KEY'&comma; 'skey&lowbar;test'&rpar;&semi;&NewLine;&NewLine;class Payment extends MX&lowbar;Controller&NewLine;&lbrace;&NewLine;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar;&lbrace;&NewLine;&Tab;&Tab;parent&colon;&colon;&lowbar;&lowbar;construct&lpar;&rpar;&semi;&NewLine;&Tab;&rcub;&NewLine;&Tab;public function index&lpar;&rpar;&lbrace;&NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;view&lpar;'payment&lowbar;view'&rpar;&semi;&NewLine;&Tab;&rcub;&NewLine;&Tab;public function create&lpar;&rpar;&lbrace;&NewLine;&Tab;&NewLine;&Tab;&Tab;&dollar;post &equals; &dollar;this-&gt&semi;input-&gt&semi;post&lpar;&rpar;&semi; &NewLine;&NewLine;&Tab;&Tab;&dollar;omiseToken &equals; &dollar;post&lbrack;'omiseToken'&rsqb;&semi; &sol;&sol; omiseToken จะถูกส่งมาอัตโนมัติผ่าน omise form&NewLine;&Tab;&Tab;&NewLine;&Tab;&Tab;&dollar;return&lowbar;uri &equals; base&lowbar;url&lpar;"payment&sol;complete&sol;"&period;&dollar;ref&lowbar;id&rpar;&semi; &sol;&sol; ในขั้นตอนนี้ให้สร้าง ref&lowbar;id สำหรับอ้างอิงไว้ใช้ในขั้นตอนต่อไป อาจจะใช้เป็น order id ก็ได้ ประมาณว่า order นี้กำลังจะชำระเงิน&NewLine;&NewLine;&Tab;&Tab;&dollar;charge &equals; OmiseCharge&colon;&colon;create&lpar;array&lpar;&NewLine;&Tab;&Tab;&Tab;'amount' &equals;&gt&semi; &dollar;amount&comma;&NewLine;&Tab;&Tab;&Tab;'currency' &equals;&gt&semi; 'THB'&comma;&NewLine;&Tab;&Tab;&Tab;'card' &equals;&gt&semi; &dollar;omiseToken&comma;&NewLine;&Tab;&Tab;&Tab;'return&lowbar;uri' &equals;&gt&semi; &dollar;return&lowbar;uri&comma; &sol;&sol; return&lowbar;uri คือ uri สุดท้ายที่จะกลับมาที่หน้าเว็บไซต์ของเรา&NewLine; &rpar;&rpar;&semi;&NewLine; &NewLine;&Tab;&Tab;&dollar;charge&lowbar;id &equals; &dollar;charge&lbrack;'id'&rsqb;&semi;&NewLine; &dollar;authorize&lowbar;uri &equals; &dollar;charge&lbrack;'authorize&lowbar;uri'&rsqb;&semi;&NewLine; &NewLine; &sol;&sol; จังหวะนี้สำคัญ ก่อนที่จะ redirect ไปจากหน้านี้ ให้บันทึก ref&lowbar;id และ charge&lowbar;id ไว้ในฐานข้อมูลของเรา &NewLine; &sol;&sol; เพื่อใช้อ้างอิงว่า transaction นี้ สำเร็จ หรือ ไม่สำเร็จ&NewLine;&NewLine;&Tab;&Tab;redirect&lpar;&dollar;authorize&lowbar;uri&comma;'refresh'&rpar;&semi; &sol;&sol; เราจะรีไปยังหน้าการยืนยันตัวตนผ่านระบบ OTP ของธนาคารนั้น ๆ &NewLine;&Tab;&Tab;&NewLine;&Tab;&rcub;&NewLine;&Tab;public function complete&lpar;&rpar;&lbrace;&NewLine;&NewLine;&Tab;&Tab;&dollar;ref&lowbar;id &equals; &dollar;this-&gt&semi;input-&gt&semi;get&lpar;"ref&lowbar;id"&rpar;&semi; &sol;&sol; ใช้ ref&lowbar;id คิวรี่หา charge&lowbar;id แล้วใช้หาค่า status ว่า transaction นี้สำเร็จหรือไม่สำเร็จ&NewLine;&Tab;&Tab;&NewLine;&Tab;&Tab;&dollar;charge &equals; OmiseCharge&colon;&colon;retrieve&lpar;&dollar;charge&lowbar;id&rpar;&semi;&NewLine; if&lpar;&dollar;charge&lbrack;'status'&rsqb; &equals;&equals;&equals; 'successful'&rpar; &lbrace;&NewLine; &sol;&sol; เงินเข้าบัญชีเรียบร้อยแล้ว&NewLine; &rcub;else&lbrace;&NewLine; &sol;&sol; อาจจะ failed หรือ pending อยู่&NewLine; &rcub;&NewLine;&Tab;&rcub;&NewLine;&Tab;&NewLine;&rcub;&NewLine;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เราสามารถทดสอบการทำงานได้ โดยเปิดไปที่ Payment Controller เช่น <strong>http&colon;&sol;&sol;localhost&colon;8080&sol;payment<&sol;strong> <&sol;li><li>กรณีที่เราจะเปิดใช้งาน การชำระเงินจริง ๆ ต้องเข้าระบบของ omise และเปลี่ยน mode จาก Sandbox เป็น Live ก่อน และนำ publicKey และ secretKey มาเปลี่ยนใน Code ของเราด้วย<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ทดสอบใช้งานระบบได้ที่ <a href&equals;"https&colon;&sol;&sol;www&period;ivomaker&period;com" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">www&period;ivomaker&period;com<&sol;a> สมัครสมาชิกและเลือกเติมเครดิต<&sol;p>&NewLine;

Exit mobile version