{"id":614,"date":"2023-11-22T22:25:00","date_gmt":"2023-11-22T22:25:00","guid":{"rendered":"https:\/\/rishikantsri.in\/blog\/?p=614"},"modified":"2023-11-23T05:02:38","modified_gmt":"2023-11-23T05:02:38","slug":"laravel-8-x-optimizing-payment-flows-for-web-and-mobile-integration","status":"publish","type":"post","link":"https:\/\/rishikantsri.in\/blog\/laravel-8-x-optimizing-payment-flows-for-web-and-mobile-integration\/","title":{"rendered":"Laravel 8.x: Optimizing Payment Flows for Web and Mobile Integration"},"content":{"rendered":"\n

The approach depends on the specific requirements and constraints of your project. Here are some considerations and potential approaches:<\/p>\n\n\n\n

    \n
  1. Mobile SDK Integration<\/strong>: Some payment gateways offer mobile SDKs (Software Development Kits) specifically designed for mobile app integration. These SDKs can provide a more streamlined and native experience for mobile users. If your chosen payment gateway offers an SDK, consider using it to simplify the integration.<\/li>\n\n\n\n
  2. Hybrid Payment Flow<\/strong>: If you want to minimize the use of web views within the mobile app, you can implement a hybrid payment flow. In this approach, you provide a web-based payment form within the mobile app for users who prefer web payments. However, you also integrate native payment options or SDKs for a seamless mobile experience.<\/li>\n\n\n\n
  3. Custom API Integration<\/strong>: Instead of relying solely on a web view, you can implement custom API endpoints for your mobile app, allowing it to communicate directly with the payment gateway. This approach may require more development effort but can offer greater flexibility and control.<\/li>\n\n\n\n
  4. Progressive Web App (PWA)<\/strong>: If you want to provide a consistent payment experience across web and mobile, consider building a Progressive Web App. PWAs can be accessed from web browsers and installed on mobile devices, blurring the lines between web and mobile.<\/li>\n\n\n\n
  5. Decoupled or Headless CMS<\/strong>: If your web application and mobile app share a backend, you can implement a decoupled or headless CMS architecture. This allows you to manage content and products separately from the presentation layer, making it easier to serve content to different clients.<\/li>\n<\/ol>\n\n\n\n

    Now. we had the latest scenario, in which we tried this solution. <\/p>\n\n\n\n

      \n
    1. Generate a unique code for each order made and store it in the order database.<\/li>\n\n\n\n
    2. From the mobile app, select a payment method linked to that unique order code.<\/li>\n\n\n\n
    3. Open a specific web page within the mobile app using the order code.<\/li>\n\n\n\n
    4. Retrieve the order details in the backend using the code and complete the payment process.<\/li>\n<\/ol>\n\n\n\n

      The scenario is described involves creating a unique order number, making a payment request from a mobile app, and then processing the payment based on the order number. This can be achieved in the following steps:<\/p>\n\n\n\n

        \n
      1. Generate a Unique Order Number<\/strong>: When creating an order, generate a unique order number, and save it to the order table. You can use Laravel’s built-in mechanisms to generate unique order numbers, such as using timestamps or UUIDs.<\/li>\n\n\n\n
      2. Mobile App Payment Request<\/strong>:In the mobile app, allow the user to select a payment gateway option and initiate a payment request. Send the payment request to your Laravel API, along with the unique order number.<\/li>\n\n\n\n
      3. Web View for Payment<\/strong>:In the mobile app’s web view, open a web page that contains the payment form for the selected payment gateway. Pass the unique order number as a parameter in the URL or as a hidden form field.<\/li>\n\n\n\n
      4. Controller to Process Payment<\/strong>:In your Laravel controller, receive the request containing the unique order number and other payment-related data from the mobile app’s web view. Retrieve the order data from the order table based on the unique order number.<\/li>\n\n\n\n
      5. Payment Processing<\/strong>: Once you have the order data and the payment-related information, proceed with the payment processing logic, including interacting with the chosen payment gateway. This might involve making API calls to the payment gateway to complete the payment.<\/li>\n<\/ol>\n\n\n\n

        Here’s an example of how you can implement this in your Laravel controller:<\/p>\n\n\n\n

        First, create a webpage URL, which will be shared with the Mobile app developer. <\/p>\n\n\n\n

        PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
        use<\/span> <\/span>Illuminate<\/span>\\<\/span>Support<\/span>\\<\/span>Facades<\/span>\\<\/span>Route<\/span>;<\/span><\/span>\n<\/span>\nRoute<\/span>::<\/span>get<\/span>(<\/span>'\/confirmpaymnet\/{id}'<\/span>,<\/span> <\/span>function<\/span> ($id) {<\/span><\/span>\n    $csrfToken <\/span>=<\/span> csrf_token<\/span>()<\/span>; <\/span>\/\/ Retrieve CSRF token<\/span><\/span>\n<\/span>\n    $content <\/span>=<\/span> <\/span>"<\/span><\/span>\n        <!DOCTYPE html><\/span><\/span>\n        <html><\/span><\/span>\n        <head><\/span><\/span>\n            <title>Thank You<\/title><\/span><\/span>\n        <\/head><\/span><\/span>\n        <body><\/span><\/span>\n            <h1>Thank you, User #$id!<\/h1><\/span><\/span>\n            <\/span><\/span>\n            <form method='post' action='\/submit'><\/span><\/span>\n                @csrf<\/span><\/span>\n                <input type='hidden' name='id' value='$id'><\/span><\/span>\n                <button type='submit'>Submit<\/button><\/span><\/span>\n            <\/form><\/span><\/span>\n        <\/body><\/span><\/span>\n        <\/html><\/span><\/span>\n    "<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> response<\/span>(<\/span>$content<\/span>,<\/span> <\/span>200<\/span>)<\/span>-><\/span>header<\/span>(<\/span>'Content-Type'<\/span>,<\/span> <\/span>'text\/html'<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n\/\/ Route for form submission<\/span><\/span>\nRoute<\/span>::<\/span>post<\/span>(<\/span>'\/submit'<\/span>,<\/span> <\/span>function<\/span> (<\/span>\\<\/span>Illuminate<\/span>\\<\/span>Http<\/span>\\<\/span>Request<\/span> $request) {<\/span><\/span>\n    <\/span>\/\/ Handle form submission here<\/span><\/span>\n    $id <\/span>=<\/span> $request<\/span>-><\/span>input<\/span>(<\/span>'id'<\/span>)<\/span>;<\/span><\/span>\n    <\/span>\/\/ Additional logic...<\/span><\/span>\n    <\/span>\/\/ redirect to payment process<\/span><\/span>\n   <\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
        PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
        <!<\/span>DOCTYPE html<\/span>><\/span><\/span>\n<<\/span>html lang<\/span>=<\/span>"en"<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>meta charset<\/span>=<\/span>"UTF-8"<\/span>><\/span><\/span>\n  <\/span><<\/span>meta name<\/span>=<\/span>"viewport"<\/span> content<\/span>=<\/span>"width=device-width, initial-scale=1.0"<\/span>><\/span><\/span>\n  <\/span><<\/span>title<\/span>><\/span>TeleBirr Payment<\/span><\/<\/span>title<\/span>><\/span><\/span>\n  <\/span><<\/span>link rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"styles.css"<\/span>><\/span> <\/span><!--<\/span> Link to your CSS file <\/span>--><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n<\/span>\n<<\/span>div <\/span>class=<\/span>"container"<\/span>><\/span><\/span>\n  <\/span><<\/span>p id<\/span>=<\/span>"redirectMessage"<\/span> style<\/span>=<\/span>"display: none;"<\/span>><\/span>Redirecting you to Gateway Payment<\/span>.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n  <\/span><<\/span>p<\/span>><\/span>Please click <\/span>on<\/span> Process Button<\/span>.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n  <\/span><<\/span>p<\/span>><\/span>It may take some time<\/span>.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n  <\/span><<\/span>p<\/span>><\/span>Thanks<\/span>.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n<\/span>\n  <\/span><<\/span>form id<\/span>=<\/span>"paymentForm"<\/span> method<\/span>=<\/span>'post'<\/span> action<\/span>=<\/span>'\/telebirr\/payment\/submit'<\/span>><\/span><\/span>\n    <\/span>@<\/span>csrf<\/span><\/span>\n    <\/span><<\/span>input type<\/span>=<\/span>'hidden'<\/span> name<\/span>=<\/span>'id'<\/span> value<\/span>=<\/span>"{{ $data['id'] }}"<\/span>><\/span><\/span>\n    <\/span><<\/span>input type<\/span>=<\/span>'hidden'<\/span> name<\/span>=<\/span>'order_id'<\/span> value<\/span>=<\/span>"{{ $data['order_id'] }}"<\/span>><\/span><\/span>\n    <\/span><<\/span>input type<\/span>=<\/span>'hidden'<\/span> name<\/span>=<\/span>'order_number'<\/span> value<\/span>=<\/span>"{{ $data['order_number'] }}"<\/span>><\/span><\/span>\n    <\/span><<\/span>input type<\/span>=<\/span>'hidden'<\/span> name<\/span>=<\/span>'cart_total'<\/span> value<\/span>=<\/span>"{{ $data['cart_total'] }}"<\/span>><\/span><\/span>\n    <\/span><<\/span>button id<\/span>=<\/span>"submitButton"<\/span> type<\/span>=<\/span>'submit'<\/span> onclick<\/span>=<\/span>"handleSubmission(event)"<\/span>><\/span>Proceed<\/span><\/<\/span>button<\/span>><\/span><\/span>\n  <\/span><\/<\/span>form<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n<<\/span>script<\/span>><\/span><\/span>\n  <\/span>function<\/span> handleSubmission(event) {<\/span><\/span>\n    event<\/span>.<\/span>preventDefault<\/span>()<\/span>; <\/span>\/\/ Prevents the default form submission behavior<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> submitButton <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'submitButton'<\/span>)<\/span>;<\/span><\/span>\n    <\/span>const<\/span> redirectMessage <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'redirectMessage'<\/span>)<\/span>;<\/span><\/span>\n    <\/span>const<\/span> paymentForm <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'paymentForm'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n    submitButton<\/span>.<\/span>style<\/span>.<\/span>display <\/span>=<\/span> <\/span>'none'<\/span>; <\/span>\/\/ Hides the submit button<\/span><\/span>\n    redirectMessage<\/span>.<\/span>style<\/span>.<\/span>display <\/span>=<\/span> <\/span>'block'<\/span>; <\/span>\/\/ Shows the redirect message<\/span><\/span>\n<\/span>\n    setTimeout<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n      paymentForm<\/span>.<\/span>submit<\/span>()<\/span>; <\/span>\/\/ Submits the form after 2 seconds<\/span><\/span>\n    }<\/span>,<\/span> <\/span>2000<\/span>)<\/span>; <\/span>\/\/ Adjust the delay as needed (in milliseconds)<\/span><\/span>\n  }<\/span><\/span>\n<\/<\/span>script<\/span>><\/span><\/span>\n<\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
        PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
        public<\/span> <\/span>function<\/span> processMobilePayment(<\/span>Request<\/span> $request)<\/span><\/span>\n{<\/span><\/span>\n    <\/span>\/\/ Retrieve the unique order number from the request<\/span><\/span>\n    $orderNumber <\/span>=<\/span> $request<\/span>-><\/span>input<\/span>(<\/span>'order_number'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Retrieve the order data based on the unique order number<\/span><\/span>\n    $order <\/span>=<\/span> <\/span>Order<\/span>::<\/span>where<\/span>(<\/span>'order_number'<\/span>,<\/span> $orderNumber<\/span>)<\/span>-><\/span>first<\/span>()<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>if<\/span> ($order) {<\/span><\/span>\n        <\/span>\/\/ Process the payment using the payment gateway<\/span><\/span>\n        $paymentGatewayResponse <\/span>=<\/span> <\/span>$this<\/span>-><\/span>processPayment<\/span>(<\/span>$order<\/span>,<\/span> $request<\/span>-><\/span>all<\/span>())<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>\/\/ Update the order status or perform any necessary actions<\/span><\/span>\n        $order<\/span>-><\/span>update<\/span>(<\/span>[<\/span><\/span>\n            <\/span>'payment_status'<\/span> <\/span>=><\/span> $paymentGatewayResponse<\/span>-><\/span>status<\/span>,<\/span><\/span>\n            <\/span>\/\/ other order updates<\/span><\/span>\n        ]<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>\/\/ Return a response to the mobile app<\/span><\/span>\n        <\/span>return<\/span> response<\/span>()<\/span>-><\/span>json<\/span>(<\/span>[<\/span><\/span>\n            <\/span>'message'<\/span> <\/span>=><\/span> <\/span>'Payment processed successfully'<\/span>,<\/span><\/span>\n            <\/span>'order'<\/span> <\/span>=><\/span> $order<\/span>,<\/span><\/span>\n            <\/span>'payment_gateway_response'<\/span> <\/span>=><\/span> $paymentGatewayResponse<\/span>,<\/span><\/span>\n        ]<\/span>)<\/span>;<\/span><\/span>\n    } <\/span>else<\/span> {<\/span><\/span>\n        <\/span>return<\/span> response<\/span>()<\/span>-><\/span>json<\/span>(<\/span>[<\/span><\/span>\n            <\/span>'message'<\/span> <\/span>=><\/span> <\/span>'Order not found or invalid order number'<\/span>,<\/span><\/span>\n        ]<\/span>,<\/span> <\/span>404<\/span>)<\/span>;<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
        In this example, the processMobilePayment<\/code> method retrieves the order data based on the unique order number provided in the mobile app’s request. It then processes the payment and updates the order’s payment status. Finally, it returns a response to the mobile app with the payment status and any relevant data.<\/p>\n\n\n\n
        Ensure that you have the necessary routes, views, and payment gateway integration set up in your Laravel application to support this flow. Additionally, handle error cases and validation as needed for a production-ready solution.<\/p>\n\n\n\n
        <\/p>\n\n\n\n
        <\/p>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        The approach depends on the specific requirements and constraints of your project. Here are some considerations and potential approaches: Now. we had the latest scenario, in which we tried this solution. The scenario is described involves creating a unique order number, making a payment request from a mobile app, and then processing the payment based […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,11],"tags":[3,86,4],"_links":{"self":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/614"}],"collection":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":3,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions\/619"}],"wp:attachment":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}