Webview Approach for Payments in React Native

[r0xsh]

The proposed solution aims to integrate a webview component within a React Native application to facilitate payment processing. The process involves retrieving a payment token from the server via /api/orders/[ID]/payment_token, opening a webview to perform the payment, executing JavaScript within the webview, and implementing a polling mechanism to check the status of the payment via /api/orders/[ID]/payments.

sequenceDiagram
    participant App as React Native App
    participant Server as CoopCycle
    participant WebView as Webview Component
    
    App->>Server: GET /api/orders/[ID]/payment_token
    Server-->>App: Payment Token
    App->>WebView: Open Webview with Payment URL
    WebView->>Server: Load Payment Page
    Server-->>WebView: Payment Page
    WebView->>WebView: Execute JavaScript Payment Function
    WebView->>Server: POST Payment Status
    Server-->>App: Payment Success/Failure
    loop Check Payment Status
        App->>Server: GET /api/orders/[ID]/payments
        Server-->>App: Payment Status
    end

Loading

Steps:

1. Retrieve Payment Token:
   The React Native app sends a GET request to the server endpoint /api/orders/[ID]/payment_token to obtain a unique payment token.

2. Open Webview:
   Once the payment token is received, the app opens a webview component and loads the payment page URL, passing the payment token as a parameter.

3. Execute JavaScript:
   Within the webview, after the payment process is completed a javascript function will close the webview

4. Poll Payment Status:
   Simultaneously, the app initiates a polling mechanism to periodically check the payment status by sending GET requests to /api/orders/[ID]/payments.

5. Completion:
   Upon successful payment completion or failure, the server responds with the payment status.

This approach offers the advantage of swiftly integrating new payment gateways and simplifying the integration of non-native payment SDKs. Additionally, developers only need to implement the payment logic once on the server, streamlining the development process and reducing the app's overall weight.

[vladimir-8]

I agree with this approach in general. I would only propose implementing the payment selection part in react native, for example, display a list:

• Credit card
• Paypal (in the future)
• Google/Apple Pay (in the future)
• Edenred
• Paygreen
• etc.

And then redirect to the appropriate screen based on the user's choice. Credit card, Paypal, Google/Apple Pay will open the native Stripe component. Edenred and Paygreen will open dedicated web pages. That way we can simplify the integration of new payment gateways while continuing using existing Stripe integration.

[Atala]

I think we should check if it would be approved by the AppStore. Apple usually doesnt like seeing money/payments getting outside their closed garden!

[Paul-Eraman-CoopCycle]

We are doing this for paygreen because its something we are doing now, we will generalize to the rest later when we have time