ppid
Payment Platform ID
erDiagram
PAYMENTS {
bigint id PK
string platform_name "PayPal, Stripe, etc"
string method "Credit Card, PayPal, express etc"
boolean active
}
method is used for both the label, and to identify the collapse component to display on the front-end.
The name method
may be a bit deceiving as it is used to identify the component to display on the
front-end as well as the label for the payment method.
For example, if the method is 'Credit Card' then the label for the payment method will be 'Credit
Card' and the component to be displayed will be credit-card
.
graph TB
A[Start] --> B{Is user logged in?}
B -->|Yes| C[Display checkout view]
B -->|No| D[Redirect to login]
D --> E[User logs in]
E --> C
C --> F[User selects payment method]
F --> G[Proceed to payment]
G --> H{Is payment successful?}
H -->|Yes| I[Display success message]
H -->|No| J[Display payment error]
J --> F
I --> K[End]
This diagram illustrates the sequence of events in the checkout to display the available payment
options. It shows how the system, specifically the PaymentOptions
component, fetches active
payment methods from the PaymentPlatform
model (which represents data in the database). These
payment methods are then presented to the user in the Checkout view. The user can then select
their preferred payment method from the provided options for further processing.
** method is used for both the label, and to identify the collapse component to display on the front-end.
sequenceDiagram
actor user
participant view as Checkout<br><<view>>
participant options as PaymentOptions<br><<Component>>
participant model as PaymentPlatform<br><<Model>>
user->>view: Click checkout
activate view
view->>options: Display payment-options component
activate options
options->>model: Fetch active payment platforms
activate model
model-->>options: Return active payment platforms
deactivate model
loop each platform
options->>view: Display payment option radio and label
view->>user: Show payment option
end
user->>options: Select payment option (method)
options->>view: Toggle the selected option's component
deactivate options
view->>user: Collapse and display the <br> payment-method's component
deactivate view
This diagram assumes you are logged, on the checkout page about to select a payment method.
sequenceDiagram
actor user
participant options as PaymentOptions<br><<Component>>
participant controller as pay()<br><<PaymentController>>
participant resolve as PaymentPlatformResolver
participant service as PaymentService<br><<Abstract Class>>
user->>options: Select payment option (method)
note right of options: Refer to credit card sequence when 'Stripe' <br> is selected as the payment method.
options->>user: Collapse and display the <br> payment-method's component
user->>user: Enter payment details
user->>controller: Click process payment (request)
controller->>controller: Validate platform and terms
alt is valid?
controller->>resolve: Resolve payment service (ppid)
resolve-->>controller: Return payment service. eg. paypal, stripe...
controller->>service: Instantiate corresponding PaymentService
service->>service: handlePayment()
service->>service: handleApproval()
controller->>options: Display payment-options component
else is not valid?
controller->>user: Display error message
end
** paymentForm
is the id of the form element in the DOM
sequenceDiagram
actor user as User
participant component as CreditCard View<br><<Component>>
participant stripe as Stripe
participant form as Form
user->>component: Selects Stripe as payment method
component->>stripe: Initializes Stripe (public_key)
stripe-->>component: Returns Stripe instance
component->>stripe: Create stripe.elements instance
stripe-->>component: Returns Elements instance
component->>stripe: Calls elements.create('card') <br>to create Card Element
stripe-->>component: Returns Card Element
component->>component: Mount Card Element in DOM
component->>user: Displays credit card form
component->>form: Get form element by id (paymentForm)
form-->>component: Returns form instance
component->>form: Get button by id (payButton)
form-->>component: Returns button instance
component->>form: Adds click event listener to button
user->>user: Enters credit card details
user->>form: Clicks payment button
form->>stripe: Calls stripe.createPaymentMethod with card details
stripe-->>form: Returns paymentMethod or error
alt error
form->>component: Display error message
component->>user: Shows error message
else no error
form->>component: Get tokenInput by id 'paymentMethod'
component-->>form: Returns tokenInput instance
form->>component: Set value of tokenInput to paymentMethod.id
component-->>form: Returns updated tokenInput
form->>form: Calls form.submit() to submit the form
end
classDiagram
PaymentOptions --|> Component : Extends
class PaymentOptions {
+bool v2
+__construct(bool)
+render() : view
}
class Component {
}
PaymentPlatform -- PaymentOptions : Uses
class PaymentPlatform {
+where(string, bool) : PaymentPlatform
+get() : Collection
}
classDiagram
class PaymentController {
-PaymentPlatformResolver paymentPlatformResolver
+pay(Request request) : Response
+approval() : Response
+cancelled() : Response
+confirmed() : Response
}
class Controller
class PaymentPlatformResolver
class Request
class Response
PaymentController --|> Controller
PaymentController --> PaymentPlatformResolver : Uses
PaymentController --> Request : Uses
PaymentController --> Response : Returns