Skip to main content
เทคโนโลยี

สร้างระบบชำระเงินบนเว็บไซต์ของเราด้วย Omise

By กุมภาพันธ์ 17th, 2022No Comments

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

เขียนโดย
Thanawat Udchachon
Internship @ borntoDev

Omise คืออะไร

Omise คือ payment gateway ที่รองรับการทำระบบชำระเงินออนไลน์ที่ใช้งานได้ง่าย และรองรับรูปแบบการชำระเงินที่หลากหลาย โดยการทำงานของมันจะเป็นการที่หน้า Front-end ของเราส่งข้อมูลการชำเงินไปที่เซิร์ฟเวอร์ของ Omise ซึ่งตรงนี้ก็จะทำให้เซิร์ฟเวอร์ของเราไม่ต้องจัดการกับข้อมูลสำคัญของผู้ใช้งานของเรา แล้ว Omise ก็จะส่ง Token กลับมาที่ Front-end จากนั้นให้เราส่งข้อมูลการชำระเงินและ Token ที่เราได้มาไปที่ Back-end ของเรา เพื่อสร้าง Charge ผ่าน Omise API แล้วส่ง Charge และ Token ไปที่เซิร์ฟเวอร์ของ Omise ก็จะเป็นการเสร็จสิ้นการชำระเงิน

ภาพการทำงานของ Omise

 

แสดงหน้าต่างชำระเงิน

ในการ demo นี้จะใช้เป็น React นะครับ โดยในการใช้งานเราจะต้องโหลด script ของ Omise โดยเราจะใช้ Library ที่ชื่อว่า react-load-script ตามลิงก์นี้ได้เลยครับ https://www.npmjs.com/package/react-load-script

จากนั้น เมื่อโหลด script ก็จะทำการ configure ตัว OmiseCard ให้เหมาะสมกับงานของเรา ซึ่งในที่นี้เราจะทำระบบชำระเงินด้วยบัตรเครดิตกัน โดยหลัก ๆ แล้วคือตัว public key ที่เราจะไปพูดกันในส่วนถัดไป แต่จะแนะนำให้เก็บ key นั้นไว้ใน .env เพื่อความปลอดภัย

นอกจากนี้ก็จะเป็นในส่วนของวิธีการชำระเงินที่เราจะใส่เป็น ‘credit-card’ ส่วนตรง otherPaymentMethods เราจะใส่เป็น [] หรือก็คือไม่มีการชำระเงินด้วยวิธีอื่น ส่วนอื่น ๆ จะเป็นคำที่แสดงบนตัว modal

ต่อมาเราก็จะสร้างปุ่ม โดยที่เมื่อคลิกที่ปุ่มชำระเงิน ที่เราจะลิงก์ตัวฟังก์ชันกับปุ่มผ่าน id
โดยโค้ดที่ได้ก็จะได้ออกมาดังนี้

import React, { useState } from "react";
import Script from "react-load-script";

let OmiseCard

export default function CreditCard() {
    const handleLoadScript = () => {
        OmiseCard = window.OmiseCard
        OmiseCard.configure({
            publicKey: process.env.REACT_APP_OMISE_PUBLIC_KEY,
            currency: 'THB',
            frameLabel: 'Borntodev Shop',
            submitLabel: 'Pay NOW',
            buttonLabel: 'Pay with Omise'
   });
}

const creditCardConfigure = () => {
    OmiseCard.configure({
        defaultPaymentMethod: 'credit_card',
        otherPaymentMethods: []
    });
    OmiseCard.configureButton("#credit-card");
    OmiseCard.attach();
}

const handleClick = (e) => {
    e.preventDefault();
    creditCardConfigure();
}


return (
    <div className="own-form">
        <Script
            url="https://cdn.omise.co/omise.js"
            onLoad={handleLoadScript}
        />
        <form>
            <div
                id="credit-card"
                type="button"
                onClick={handleClick}

            >
                ชำระเงินด้วยบัตรเครดิต
            </div>
        </form>
    </div>
 )
}

โดยเราจะได้เป็นปุ่มออกมา และเมื่อกดก็จะแสดง modal ดังนี้

Modal ชำระเงินของ Omise

 

ส่งข้อมูลไป Omise เพื่อขอ Token

หลังจากที่เราได้ modal สำหรับการชำระเงินกันมาแล้วนะครับ ต่อมาเราจะมาดูในเรื่องของ key ที่เราติดค้างกันไปก่อนหน้า โดยในส่วนของ public key ที่เราใช้ ให้เราไปที่เว็บไซต์ของ Omise https://omise.co/ แล้วก็ทำการสมัครสมาชิก หลังจากสมัครสมาชิกแล้วเราก็จะถูกส่งมาที่หน้า dashboard ของเรา ซึ่งจะเป็นหน้าที่จะแสดงธุรกรรมทั้งหมดของระบบเรา

 

ภาพหน้า Dashboard ที่แสดงธุรกรรมของระบบ

 

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

 

ภาพหน้า Keys ของ Omise

 

ต่อมาเราก็จะมาทำในส่วนของการส่งข้อมูลไปที่ Omise เพื่อรับ Token เพื่อที่จะนำ Token นั้นส่งไปที่ Back-end นะครับ ว่าแล้วเราไปดูโค้ดกันก่อนดีกว่า

const omiseCardHandler = () => {
        OmiseCard.open({
            amount: "10000",
            onCreateTokenSuccess: (token) => {
                Axios.post(`api url`, {
                    email: "borntodev@gmail.com",
                    name: 'Borntodev',
                    amount: "10000",
                    token: token,
                    headers: {
                        "Content-Type": "application/json"
                    }
                })
            },
            onFormClosed: () => { },
      })
}

const handleClick = (e) => {
    e.preventDefault();
    creditCardConfigure();
    omiseCardHandler()
}

ในที่นี้เราได้เพิ่มไป 1 ฟังก์ชัน แล้วก็ทำให้เมื่อคลิกปุ่มชำระเงินก็จะเป็นการเรียกฟังก์ชันนี้ด้วยนะครับ

โดยทำงานก็คือเมื่อ token ถูกส่งกลับมา ก็จะทำการส่ง token นั้นไปทางฝั่ง Back-end ให้ทำงานต่อ โดยในที่นี้ใช้เป็นตัว Axios และข้อมูลที่ส่งไปก็จะมี อีกเมลผู้ใช้ ชื่อผู้ใช้งาน ราคา และ token ซึ่งจะเห็นว่ามันมี amount อยู่ 2 ที่นะครับ อันแรกจะเป็นราคาที่แสดงอยู่บนตัว modal ส่วน amount อันที่ 2 จะเป็นราคาที่จะถูกส่งไป Back-end ซึ่งจะเป็นราคาที่จะถูกชำระจริง ๆ ครับ ซึ่ง 2 ที่นี้ควรตรงกันครับ

 

ส่งข้อมูลการชำระเงินผ่าน Back-end ด้วย Omise API

เอาล่ะมาถึงส่วนสุดท้ายกันแล้ว แต่ก่อนที่เราจะไปเขียนโค้ดกัน เราต้องติดตั้ง API ของ Omise ก็สามารถเข้าไปติดตั้งกันได้ตามลิงก์นี้เลยครับ https://www.npmjs.com/package/omise

เอาล่ะถ้าติดตั้งกันเรียบร้อยแล้ว เรามาดูโค้ดกันเลยดีกว่า

const express = require("express");
let router = express.Router();
require('dotenv').config()
var omise = require('omise')({
    'publicKey': process.env.OMISE_PUBLIC_KEY,
    'secretKey': process.env.OMISE_SECRET_KEY
});

router.post('/', async (req, res, next) => {
    const { email, name, amount, token } = req.body 
    try {
        const customer = await omise.customers.create({
            email,
            description: name,
            card: token
        });

        const charge = await omise.charges.create({
            amount: amount,
            currency: "thb",
            customer: customer.id
        });

        res.send({
          amount: charge.amount,
          status: charge.status
        })
    } catch (error) {
        console.log(error)
    }
    next()
})

module.exports = router;

ตรงนี้จะขออธิบายเป็นส่วน ๆ ละกัน โดยในส่วนแรกจะเป็นส่วนของ keys ที่เราได้มาก่อนหน้านี้นะครับ เราก็เอามาใส่ตรงนี้ด้วย แล้วก็เหมือนเดิม เพื่อความปลอดภัยเราก็จะใช้ dotenv เช่นกันครับ ซึ่งก็สามารถไปติดตั้งกันได้ตามลิงก์นี้เลยครับ https://www.npmjs.com/package/dotenv

ต่อมา เราก็จะรับข้อมูลที่ทาง Front-end ส่งมานะครับ ซึ่งก็จะมี อีเมลผู้ใช้ ชื่อผู้ใช้ ราคา และ token ซึ่งสิ่งที่เราจะทำกันก็คือการสร้าง charge เพื่อส่งไปที่ Omise พร้อมกับ token เพื่อดำเนินการชำระเงินต่อครับ

โดยเราก็จะสร้างเป็นข้อมูลของผู้ชำระเงินกันก่อน ก็จะประกอบไปด้วย อีเมลผู้ใช้งาน ชื่อผู้ใช้งาน และ token ต่อมาก็จะเป็นในส่วนของ charge ซึ่งก็จะเป็นส่วนที่เกี่ยวกับการชำระเงิน โดยจะประกอบไปด้วย ราคา สกุลเงิน และ customer id ครับ ก็จะเสร็จสิ้นการชำระเงินครับผม แล้วเราก็อาจจะให้ส่ง response ราคาที่ชำระไป และสถานะการชำระเงิน กลับไปที่ฝั่ง Front-end เพื่อแสดงด้วยก็ได้ครับผม

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

เป็นยังไงกันบ้างครับสำหรับการทำระบบชำระเงินด้วย Omise สะดวกสบายกว่าที่คิดว่ารึป่าว นอกจากการชำระเงินด้วยบัตรเครดิตแล้วเนี่ย ตัว Omise ยังรองรับการชำระเงินรูปแบบอื่น ๆ อีกไม่ว่าจะเป็น Internet Banking, จ่ายผ่าน Lotus, Alipay, Pay easy, Net Banking, ชำระผ่านห้างสรรพสินค้า โอ้ เยอะสุด ๆ ยังไงก็สามารถศึกษาเพิ่มเติมได้ที่ Document ของทาง Omise เองได้ทางลิงก์นี้เลยครับผม https://www.omise.co/docs

 

อ้างอิงจาก

  1. Omise Documentation, สืบค้นเมื่อ 11 กุมภาพันธ์ 2565 จาก: https://www.omise.co/docs
  2. Omise – React – Node Integration, สืบค้นเมื่อ 11 กุมภาพันธ์ 2565 จาก: https://www.youtube.com/playlist?list=PLCT_w0Fqe_z6dY4GOabVP2BcUHuDmMv3q

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า