plugin-pay/current-design.txt at master · jlafer/plugin-pay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
------------------------------------------------------------
PaymentAgentView
------------------------------------------------------------
constructor: init state:
- progress thru payment form
- isVisible
- idempotencyKey
- addListeners(afterAcceptTask, afterCompleteTask)
- add PAY button to call controls

resetPay()
- reset state

displayPaymentForm()
- invokeAction("NavigateToView")

hidePaymentSuccess()
  resetPay()

addEventToState(item)
  add item to payment progress

subscribeToSync(token)
  list items stored under callSid
  addEventToState(item)
  subscribe to "itemAdded" event on sync list; calls addEventToState(item)
  requestCapture("payment-card-number")

showPaymentForm()
  state.showForm = true

initiateAAP(currency, chargeAmount, paymentMethod, description)
  set state: currency, chargeAmount
  state.status = 'initiating'
  GET runtimeUrl + "/sync-token"
  then GET runtimeUrl + "/aap-begin-pay-session"
  then
    set state.paymentSid, showForm = false
    subscribeToSync(token) ???

requestCapture(field)
  GET runtimeUrl + "/aap-capture-parameter"
  then set state.captureField

processPayment()
  GET runtimeUrl + "/aap-complete-pay-session"

latestPaymentState()
  return last progress item

render()
  use state to decide on displaying view
  content = PaymentForm, PaymentInProgress, PaymentSuccess or PaymentFailure
  return <div>{content}</div>

------------------------------------------------------------
PaymentForm
------------------------------------------------------------
constructor: init state:
- use React.createRef to init currency, amount, method, descr

initiateAAP()
  call props.initiateAAP(ref.currentValues) // currency, amt, method, descr

render()
  render form with:
  - heading "Checkout with Twilio Pay"
  - inputs for currency, amt, descr
  - button "Request Payment"

------------------------------------------------------------
PaymentInProgress
------------------------------------------------------------
render()
  - heading "Capture Credit Card Information"
  - <PaymentElement /> for:
    - card number, expiration date, security code
    - button "Process Payment"

------------------------------------------------------------
PaymentSuccess
------------------------------------------------------------
render()
  - heading "Payment Complete"
  - text: Amount, Confirmation Code
  - button "Hide"

------------------------------------------------------------
PaymentFailure
------------------------------------------------------------
render()
  - heading "Payment Failed"
  - text: Amount, error codes

------------------------------------------------------------
PaymentElement
------------------------------------------------------------
getStyle()
  use props.paymentState to return background color and image

render()
  heading: props.friendlyName
  input value={props.paymentState[props.pascalCaseName]}
  button: onClick=props.requestCapture(props.riverCaseName)
    Request {this.props.friendlyName}