> For the complete documentation index, see [llms.txt](https://docs.blockchain.com/pay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blockchain.com/pay/getting-started/integration-options/mobile-integration/ios-integration-options.md).

# iOS Integration Options

📱 Installation guide for our iOS

Below are the three common ways to integrate web widgets into your iOS app.

* [Using UIKit](#uikit)
* [Using SwiftUI](#swiftui)
* [Using React Native](#react-native)

## UIKit

UIKit supports SFSafariViewController, which is a great way to display web content in your app. SFSafariViewController shares cookies, supports saved autofill data, and natively supports Apple Pay, unlike the generic web view. 

See Apple's [integration guide for SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) for more details.

```swift
import UIKit
import SafariServices
   
let url = URL(string: "https://www.blockchain.com/pay/widget?apiKey=[your-api-key]")!
present(SFSafariViewController(url: url), animated: true, completion: nil)
```

## SwiftUI

No native support for SFSafariViewController

```swift
import SwiftUI
import SafariServices

struct SafariView: UIViewControllerRepresentable {
    let url: URL

    func makeUIViewController(context: Context) -> SFSafariViewController {
        SFSafariViewController(url: url)
    }

    func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {}
}

struct ContentView: View {
    @State private var showBlockchainPay = false
    let url = URL(string: "https://www.blockchain.com/pay/widget")!

    var body: some View {
        Button("Blockchain Pay") {
            showBlockchainPay = true
        }
        .sheet(isPresented: $showBlockchainPay) {
            SafariView(url: url)
        }
    }
}
```

## React Native

```bash
npm install react-native-safari-view
```

```jsx
import React from 'react';
import { Button } from 'react-native';
import SafariView from 'react-native-safari-view';

function App() {
  const showBlockchainPay = () => {
    const url = "";

    SafariView.isAvailable()
      .then(SafariView.show({ url: url }))
      .catch(error => {
        console.log('SafariView is not available', error);
      });
  };

  return <Button title="Blockchain Pay" onPress={showBlockchainPay} />;
}
```