Card.js

การใช้งานเบื้องต้น

เราได้ย้ายฟังก์ชันการทำงานของ Card.js รวมเข้ากับ Omise.js แล้ว จึงไม่สนับสนุนให้ใช้งาน Card.js เนื่องจากจะไม่มีการอัพเดตเพื่อให้รองรับการทำงานร่วมกับเบราว์เซอร์หรือ API ใหม่ๆ

Card.js พัฒนาต่อยอดมาจาก Omise.js ด้วยจุดประสงค์ที่ให้ร้านค้านำฟอร์มการรับชำระเงินไปใช้งานบนเว็บไซต์หรือแอปพลิเคชันได้โดยไม่ต้องอาศัยการเขียนโค้ดมากนัก สามารถแสดงผลได้ทั้งบนเดสก์ท็อป แท็บเลต และโทรศัพท์มือถือ โดย Card.js จะสร้างฟอร์มรับชำระและ token ขึ้น เพื่อให้ร้านค้านำไปใช้ในการรับชำระเงินร่วมกับ API client library อย่าง ruby, .net ฯลฯ หรือกับ API ของเรา

การ integrate

Card.js ถูกจัดเก็บอยู่บน Omise CDN https://cdn.omise.co/card.js สำหรับผู้ที่ต้องการใช้งานจำเป็นต้องมี:

  • หน้ารับชำระเงินที่มีเช็คเอาท์ฟอร์ม (html) สำหรับ post ข้อมูลไปยังเซิฟเวอร์ของร้านค้าเพื่อสร้างรายการรับชำระ
  • Script ทางฝั่งเซิร์ฟเวอร์เพื่อใช้ process ข้อมูลที่ได้รับมา โดยเรามี API library หลากหลาย เช่น ruby .net ฯลฯ ที่ให้คุณนำไป implement ได้

ตัวอย่าง

ฟอร์ม HTML

<html>
...
<body>
<form name="checkoutForm" method="POST" action="checkout">
    <input type="hidden" name="description" value="Product order ฿100.25" />
    <script type="text/javascript" src="https://cdn.omise.co/card.js"
      data-key="YOUR_PUBLIC_KEY"
      data-image="PATH_TO_LOGO_IMAGE"
      data-frame-label="Merchant site name"
      data-button-label="Pay now"
      data-submit-label="Submit"
      data-location="yes"
      data-amount="10025"
      data-currency="thb"
      >
    </script>
    <!--the script will render <input type="hidden" name="omiseToken"> for you automatically-->
</form>
</body>
</html>

Card.js จะสร้างปุ่ม ‘Pay Now’ ให้กับฟอร์มรับชำระ เมื่อผู้ใช้งานกดปุ่มก็จะปรากฏหน้าต่างเพื่อใช้กรอกรายละเอียดของบัตร

หากลอง inspect element ใน HTML debugger tool จะพบ <input type="hidden" name="omiseToken"> ที่สร้างขึ้นโดย card.js ซึ่ง input element นี้ จะใช้ในการจัดเก็บ token ที่ได้รับมาจากการเรียกใช้ card.js

Arguments

Argument Value
data-key (required) the public key that you can find in your dashboard once you're signed in.
data-image (optional) the URI to your logo image. eg. http://example.com/logo.png
data-frame-label (optional) the header text you want to show in the credit card popup window
data-button-label (optional) the label to be displayed in the button that is embeded in your form
data-submit-label (optional) the label to be displayed in the submit button in credit card popup window
data-location (optional) presence of this attribute with any non-blank value indicates that the popup will have the Postal code and City fields included.
data-amount (required) the amount to be paid in the smallest unit of the currency, e.g. Satangs (100 Satangs = 1 THB)
data-currency (required) the currency to be displayed in the payment window

Script ฝั่งเซิร์ฟเวอร์ (ตัวอย่างนี้เป็นการใช้ Omise Ruby library)


def checkout

 token = params[:omiseToken]
 checkout_description = params[:description]
 checkout_amount = 10025

 charge = Omise::Charge.create({
  return_uri: "https://example.com/orders/384/complete",
  amount: checkout_amount,
  currency: "thb",
  description: checkout_description,
  ip: "127.0.0.1",
  card: token
})

end

เมื่อผู้ถือบัตรกดยืนยันทำรายการ Card.js จะนำ token ที่ได้รับตอบกลับจัดเก็บลงใน 'omiseToken' hidden input แล้วจึง submit ฟอร์มนั้นๆ โดยอัตโนมัติ

อิสระในการดีไซน์ปุ่ม ‘Pay now’

ปุ่ม 'Pay now' ของเราไม่มีดีไซน์เฉพาะใดๆ กำหนดไว้ คุณจึงมีอิสระในการสร้างสรรค์รูปแบบได้อย่างเต็มที่