Multifaceted Payment Page Wireframe Design

I need a professional to create a wireframe for a multifaceted and user-friendly web application payment page. This complex wireframe needs to cater to my specific requirements: The ideal candidate should possess a profound understanding of UX/UI design, wireframing and a strong proficiency in payment gateway integration. to deliver a editable wireframe via [login to view URL] , miro , figma details step by step Step 1: Arrival from Merchant Website The user initiates the payment process on the merchant's website by clicking a "Checkout" or "Pay Now" button. They are redirected to the PSP's payment page via a POST request. This request includes the order information (items, amounts), customer information (at least the email), language preference, and return URLs for successful or failed transactions. Step 2: Language Setting and Page Customization The language of the payment page is determined by the language preference transmitted in the POST request from the merchant. If the language preference is not specified or is incorrect, the page defaults to English. The page content, including instructions and form labels, automatically adjusts to the set language. Step 3: Display Order and Customer Details Based on the information transmitted by the merchant, the PSP page displays the order details and pre-populates the customer information fields, emphasizing the importance of accuracy for these details. The payment method selection is determined by the options available and possibly suggested by the merchant but confirmed by the customer's choice if multiple options are presented. Step 4: Entering Additional Customer Information The user reviews the pre-populated information and may be required to fill in or correct any additional details necessary for the payment process, excluding payment method selection, which is informed by the initial POST request. Required fields include name and email (already provided), with optional fields for phone number and date of birth. Step 5: Billing Information Users have the option to provide additional billing information, which includes address, postal code, state, and country. These fields are optional and are used to match the customer's payment details or for additional verification purposes. Step 6: Agreement to Terms and Conditions Users are presented with two checkboxes for agreeing to terms and conditions: One for the PSP's terms and conditions. Another for any additional terms related to the transaction, possibly including merchant-specific terms or data processing agreements. Users must agree to these terms before they can proceed with the payment. Step 7: Confirm Payment After reviewing their information and agreeing to the terms, users confirm their payment by clicking a "Pay Now" button. This action submits their payment for processing. There is also an option to cancel, which redirects the user back to the merchant's website via the specified return URL for cancellations. Step 8: Payment Processing and Notifications Upon submission, the payment is processed. The user is then redirected to either the success or failure URL provided by the merchant, based on the outcome of the transaction. The PSP sends a server-to-server API notification to the merchant with the payment status, ensuring that the merchant is immediately informed of the transaction outcome. Step 9: Merchant Communication Beyond the immediate transaction notifications, the merchant has access to a Query API provided by the PSP. This allows them to check the status of the payment at any time, supporting ongoing order management and customer service efforts. This revised flow incorporates your specific requirements, focusing on leveraging information provided by the merchant to streamline the payment process, ensuring clarity and compliance with necessary agreements, and enhancing the overall user and merchant experience.