> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flexype.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Apps

> Open FlexyPe checkout inside a mobile app built on your Shopify store

If your mobile app is backed by a Shopify store, you can open FlexyPe's 1-click checkout inside a **webview**. The flow has two steps: create a checkout session for the cart with the API, then load the hosted checkout page in a webview using the returned session ID.

<Warning>
  Complete the [Shopify onboarding](/platforms/shopify) first. It's **mandatory** — your store must be onboarded and your domain registered with FlexyPe before you can integrate FlexyPe Checkout on your mobile app.
</Warning>

<Note>
  You'll need an API key (dashboard → **Settings → API Keys**) and your store domain registered with FlexyPe during onboarding. See the [API Reference](/api-reference/introduction) for authentication details.
</Note>

## Checkout flow

<Steps>
  <Step title="Create a checkout session">
    Call the Create Checkout Session endpoint with the cart items. The response returns a `session_id` you'll use in the next step. See the API reference for the full request schema, parameters, and a live example.

    <Card title="Create Checkout Session" icon="code" href="/api-reference/checkout/create-session">
      `POST /session` — create a session and get back a `session_id`.
    </Card>

    <Tip>
      Create the session from your backend so your API key is never exposed in the mobile app.
    </Tip>
  </Step>

  <Step title="Open the checkout in a webview">
    Open a webview in your app and load the hosted checkout URL with the `session_id` from the previous step:

    ```
    https://checkout.flexype.io/?session={session_id}
    ```

    The customer completes the entire checkout — login, address, payment — inside the webview.

    <Tabs>
      <Tab title="React Native">
        ```jsx theme={null}
        import { WebView } from "react-native-webview";

        export function CheckoutScreen({ sessionId }) {
          return (
            <WebView
              source={{ uri: `https://checkout.flexype.io/?session=${sessionId}` }}
            />
          );
        }
        ```
      </Tab>

      <Tab title="Flutter">
        ```dart theme={null}
        import 'package:webview_flutter/webview_flutter.dart';

        final controller = WebViewController()
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..loadRequest(
            Uri.parse('https://checkout.flexype.io/?session=$sessionId'),
          );

        // Render with: WebViewWidget(controller: controller)
        ```
      </Tab>

      <Tab title="iOS (Swift)">
        ```swift theme={null}
        import WebKit

        let webView = WKWebView(frame: view.bounds)
        let url = URL(string: "https://checkout.flexype.io/?session=\(sessionId)")!
        webView.load(URLRequest(url: url))
        view.addSubview(webView)
        ```
      </Tab>

      <Tab title="Android (Kotlin)">
        ```kotlin theme={null}
        webView.settings.javaScriptEnabled = true
        webView.loadUrl("https://checkout.flexype.io/?session=$sessionId")
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

<Warning>
  Enable JavaScript in your webview — the checkout page requires it. Most webviews enable it by default, except Android, where you must set `javaScriptEnabled = true`.
</Warning>

## Detecting completion

After a successful payment, the checkout redirects to the `redirect_url` you set when creating the session. Watch your webview's navigation events for that URL to know when checkout is complete, then close the webview and continue your app's post-purchase flow.

## Need help?

Reach out to the FlexyPe team at [hello@flexype.io](mailto:hello@flexype.io) for integration support.