iOS Integration Options

📱 Installation guide for our iOS

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

• Using UIKit

• Using SwiftUI

• Using 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 for more details.

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

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

npm install react-native-safari-view

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} />;
}