1. Open your project on the Kuika platform.
2. Open the screen where the payment will be made in the UI Design module.
3. Add a button or other trigger element to initiate payment.

4. Select the button and add the Payment> Param > Param Payment Open Modal action from the + ADD ACTION menu according to the desired trigger event (Initial Actions, OnClick, OnBlur, etc.).
5. Fill in the following fields in the settings that opens:

• PhoneNumber: Data obtained from the user, such as “form.phoneNumber”
• OrderID: Unique order code (usually UUID) such as “order12345”
• Installments: Number of installments such as “1” or ‘3’
• TotalAmount: Total amount to be paid such as “599.90”

In an e-commerce application, the user wants to purchase the products in their shopping cart. During this process, the goal is to collect payment in a simple and secure manner without redirecting the user to different pages.

Scenario Flow

1. The user confirms their shopping cart and clicks the “Pay Now” button.
2. The application receives the user information and order details:
   
   • Phone Number
   • Order ID: “SPT-4569821”
   • Installment: ‘3’
   • Total Amount: “899.99”
3. This data is sent as parameters to the Param Payment Open Modal action.
4. The payment modal opens on the user's screen. Card details are entered.
5. The transaction is completed through the Param infrastructure.
6. After a successful transaction, a confirmation message is displayed to the user and an email is sent.

• Dynamic Display of Installment Information: Installment options can be dynamically determined based on the user's cart total.
• Automatic Order ID Creation: A unique order number can be automatically generated for each transaction and sent to the modal.
• Post-Payment Success Action Chain: After the modal closes:
  
  • Display “Purchased” message to the user
  • Assign roles or grant content access
  • Create notifications and log records
• Cancellation and Error Management: If the user closes the payment screen or the transaction fails, the user can be notified and asked to try again.

Technical Risks

• The modal screen should not conflict with other transactions in the application.
• The order ID must be unique and non-repeating.
• The TotalAmount value must exactly match the value sent to the server.
• Only authorized users should be able to access the payment screen.

Param Payment Open Modal provides users with a visually reassuring, technically simple, and effective payment experience. With mobile compatibility, dynamic parameter support, and easy integration, it helps you modernize and speed up your payment processes.