Custom CreditCardFormViewController ใน iOS ยังไงครับ


#1

สวัสดีครับ ผมใช้ iOS SDK สร้าง CreditCardFormView จากคลาสที่ SDK มีให้อยู่แล้ว อยากทราบว่าจะสามารถปรับพวกสีของ UITextField, ปรับ Expire Date เป็น UIPickerView ได้หรือเปล่าครับ

หรือว่าต้องทำ Custom Form เองครับ?


#2

สวัสดีครับ,
ในกรณีที่คุณลูกค้าต้องการปรับแต่ง UI ในส่วนต่างๆที่สร้างจาก CreditCardFormView นั้น
ส่วนนี้จะไม่สามารถปรับแต่งได้อย่างอิสระครับ แต่ลูกค้าจะสามารถสร้าง Custom Form มาใช้งานเองได้ครับ
โดยทางเราจะมีตัว UI ของส่วนต่างๆเตรียมไว้ให้ดังนี้ครับ

  • CardNumberTextField
  • CardNameTextField
  • CardExpiryDateTextField
  • CardExpiryDatePicker
  • CardCVVTextField

ซึ่ง UI ด้านบนจะสามารถปรับแต่งได้ในระดับหนึ่ง ลูกค้าจะสามารถปรับแต่งเองได้ครับ
แต่ในกรณีที่ต้องการเปลี่ยน Expiry Date (Month/Year) ให้เป็น UIPickerView หรืออยากปรับ Form ส่วนอื่นๆให้ตรงตาม Theme หลักของแอพ ตรงนี้ลูกค้าต้องสร้างขึ้นมาเองและทำการรับค่าจาก Custom Form ที่ลูกค้าสร้างขึ้นมา เพื่อนำมาไว้สร้าง Request สำหรับขอ Omise Token ครับ

ตัวอย่างการขอ Omise Token จาก Custom Form ที่ลูกค้าทำขึ้นมาเองจะมีคร่าวๆดังนี้ครับ

  1. สร้าง Client object จาก Public key
let publicKey = "pkey_test_<#Omise Public Key#>"
let client = Client(publicKey: publicKey)
  1. รับค่าจาก Custom Form ที่สร้างขึ้นมา มาสร้าง CreateTokenParameter เพื่อสร้าง Request
let request = Request<Token>(parameter: CreateTokenParameter(
  name: "Customer Name",
  number: "4242424242424242",
  expirationMonth: 12, 
  expirationYear: 2022,
  securityCode: "123")
)
  1. สร้าง RequestTask เพื่อขอ Token จาก Client และ Request ที่เราได้สร้างขึ้นมาครับ
let task = client.requestTask(with: request) { (result) in
  defer {
    PlaygroundPage.current.finishExecution()
  }
  
  switch result {
  case .success(let token):
    print(token.id)
  case .fail(let error):
    print(error)
  }
}

task.resume()
  1. นำ Token ที่ได้จากข้อ 3 ไปสร้าง Charge ได้ตามปกติครับ

ข้อควรระวัง

  1. คุณลูกค้าต้องไม่ทำการส่งข้อมูลบัตรเครดิตไปหาเซิฟเวอร์ของคุณลูกค้าโดยตรง
  2. กรณีที่คุณลูกค้าต้องการสร้าง Charge ต้องทำการสร้าง Token ผ่านทาง Omise API ตามวิธีที่แนะนำด้านบนก่อน แล้วจึงส่ง Token ไปทำการสร้าง Charge บนเซิฟเวอร์ที่เก็บ Private key ที่ปลอดภัยของคุณลูกค้าอีกครั้งดังตัวอย่างตามรูป

    คุณลูกค้าสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับกระบวนการสร้าง Charge ที่ปลอดภัยได้ตามลิ้งนี้ครับ
    https://www.omise.co/collecting-card-information

หากติดปัญหาหรือมีข้อสงสัยตรงไหน สามารถสอบถามเพิ่มเติมเข้ามาได้ครับ
ยินดีให้ความช่วยเหลือและขอบคุณที่ใช้บริการกับทางเราครับ
:man_mechanic:


#3

พวก UI นี่จะเซ็ตให้ใช้ใน Storyboard ได้ยังไงบ้างครับ ผมลองเอาชื่อคลาสไปใส่ใน Custom Class ตัว Storyboard ก็หาไม่เจอ

ตัวโปรเจคผมลง SDK และ Link Framework/Library เรียบร้อยแล้วครับ


#4

รบกวนลองเช็คที่ Module ของ Custom Class ได้ไหมครับว่าเป็น OmiseSDK แล้วหรือยัง ถ้ายังไม่ใช่ รบกวนของใส่เป็น OmiseSDK แล้วลองดูครับ


#5

คุณลูกค้าลองเซ็ตค่าตามภาพตัวอย่างดูครับ
35
เพื่อที่จะให้ใช้งานส่วนของ UI จาก SDK ลูกค้าต้องทำการเซ็ตตัว Module ใน Custom Class ด้วยครับ


#6

ขอบคุณครับ ได้ละครับ

มีอีกเรื่องนึงครับ สมมติผมใช้ CardExpiryDatePicker นี่จะ Get Value วันที่ที่เลือกมาจากไหนครับ เพราะตัว CardExpiryDatePicker ใช้ Datasource จากทาง SDK เอง


#7

ในกรณีที่ใช้งานตัว CardExpiryDatePicker นั้นจะมี properties 2 ตัว ไว้สำหรับดึงค่ามาใช้งานได้ครับ

  • Currently selected month.
    public var month: Int
  • Currently selected year.
    public var year: Int

สามารถเรียกใช้งานได้เลยครับ

Example

@IBOutlet weak var cardExpiryDatePicker: CardExpiryDatePicker!

let selectedExpiryMonth = cardExpiryDatePicker.month
let selectedExpiryYear = cardExpiryDatePicker.year

:+1:


#8

ขอบคุณมากครับ

อยากให้เพิ่มเรื่องวิธีการใช้ตรงนี้บน Github หรือใส่ไว้ใน Project Playground ด้วยครับ เพื่อความสะดวก


#9

ครับผม ทางเราจะพัฒนาและปรับปรุงต่อไปครับ
ขอบคุณมากครับ :bowing_man: