React Native

/**
 * Everything in this file talks to YOUR backend. The app never calls
 * api.blendapp.ai and never holds the Blend key or secret.
 */

/** Replace with your API's base URL. */
const API = 'https://api.example.com';

/**
 * Asks your backend for a Blend session URL. Your backend holds the Blend
 * key and secret, calls POST https://api.blendapp.ai/api/v1/channel/session,
 * and returns only { "url": "." }.
 */
export async function fetchBlendSessionUrl(appAuthToken: string): Promise<string> {
  const res = await fetch(API + '/api/blend/session', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      // Your app's normal user auth, so your backend knows who the buyer is.
      Authorization: 'Bearer ' + appAuthToken,
    },
  });
  if (!res.ok) {
    throw new Error('Session request failed: ' + res.status);
  }
  const body = (await res.json()) as { url: string };
  return body.url;
}

/**
 * Called with the orderId from the bridge. The amount from the bridge is NOT
 * what gets charged: your backend re-fetches the authoritative amount for
 * orderId from Blend, charges THAT on your rail, and then calls
 * POST /v1/channel/orders/confirm (signed, server-to-server).
 */
export async function chargeBlendOrder(
  orderId: string,
  displayAmount: number,
  displayCurrency: string,
  appAuthToken: string,
): Promise<void> {
  // displayAmount / displayCurrency are only for the label on your own
  // payment sheet ("You are about to pay 42.50 USD"). Show your sheet first
  // if your rail needs buyer interaction, then send orderId on.
  const res = await fetch(API + '/api/blend/charge', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + appAuthToken,
    },
    body: JSON.stringify({ orderId }),
  });
  if (!res.ok) {
    throw new Error('Charge failed: ' + res.status);
  }
  // Done. Do not touch the webview: the page polls Blend every 3 seconds for
  // up to 6 minutes and shows the ticket itself once the order is paid.
}

import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  BackHandler,
  Button,
  Linking,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { WebView, type WebViewMessageEvent, type WebViewNavigation } from 'react-native-webview';

import { chargeBlendOrder, fetchBlendSessionUrl } from './blendBackend';

/**
 * blendapp.ai and every subdomain of it (checkout.blendapp.ai,
 * tickets.blendapp.ai) are Blend. Everything else is not.
 */
export function isBlendHost(host: string | null | undefined): boolean {
  if (!host) return false;
  const h = host.toLowerCase();
  return h === 'blendapp.ai' || h.endsWith('.blendapp.ai');
}

/** Host of an http(s) URL. Kept dependency-free: not every RN runtime ships a full URL parser. */
function hostOf(url: string | undefined): string | null {
  if (!url) return null;
  const match = new RegExp('^https?://([^/?#:]+)', 'i').exec(url);
  return match ? match[1] : null;
}

/**
 * Defines window.BlendChannelPay BEFORE Blend's page runs, forwarding to
 * react-native-webview's own channel. This is the Android-shaped string
 * contract, so one onMessage handler serves iOS and Android.
 *
 * The last statement must be "true;" or react-native-webview warns.
 */
const BRIDGE_SHIM = [
  'window.BlendChannelPay = {',
  '  postMessage: function (message) {',
  '    window.ReactNativeWebView.postMessage(message);',
  '  }',
  '};',
  'true;',
].join('\n');

type Props = {
  /** Your app's own user auth, used to call YOUR backend. */
  appAuthToken: string;
  /** Called when the buyer backs out with nothing left to go back to. */
  onClose: () => void;
};

type Status = 'loading' | 'ready' | 'error';

export function BlendCheckout({ appAuthToken, onClose }: Props) {
  const webViewRef = useRef<WebView>(null);
  const canGoBack = useRef(false);
  const [sessionUrl, setSessionUrl] = useState<string | null>(null);
  const [status, setStatus] = useState<Status>('loading');

  const loadFreshSession = useCallback(async () => {
    setStatus('loading');
    setSessionUrl(null);
    try {
      // A session URL is single use. If a load failed part-way the token may
      // already be consumed, so a retry always mints a new session.
      const url = await fetchBlendSessionUrl(appAuthToken);
      setSessionUrl(url);
    } catch {
      setStatus('error');
    }
  }, [appAuthToken]);

  useEffect(() => {
    void loadFreshSession();
  }, [loadFreshSession]);

  // Android hardware back goes through the webview first.
  useEffect(() => {
    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
      if (canGoBack.current) {
        webViewRef.current?.goBack();
      } else {
        onClose();
      }
      return true;
    });
    return () => subscription.remove();
  }, [onClose]);

  const onNavigationStateChange = useCallback((nav: WebViewNavigation) => {
    canGoBack.current = nav.canGoBack;
  }, []);

  // Blend hosts stay in this webview: an external browser has neither the
  // session cookie nor the bridge. Anything else leaves, so this webview only
  // ever renders Blend - which is what keeps the bridge safe to hold.
  const onShouldStartLoadWithRequest = useCallback((request: { url: string }) => {
    if (isBlendHost(hostOf(request.url))) return true;
    Linking.openURL(request.url).catch(() => undefined);
    return false;
  }, []);

  const onMessage = useCallback(
    (event: WebViewMessageEvent) => {
      const { url, data } = event.nativeEvent;

      // 1. Origin check. The message channel is origin-blind: any script
      //    running in this webview can post to it. Only act when the webview
      //    is currently showing a Blend page. Discard anything else silently.
      if (!isBlendHost(hostOf(url))) return;

      // 2. Read the hint. Only orderId is acted on. amount and currency are
      //    for the label on your own payment sheet and nothing else.
      let message: { type?: unknown; orderId?: unknown; amount?: unknown; currency?: unknown };
      try {
        message = JSON.parse(data);
      } catch {
        return;
      }
      if (message.type !== 'charge') return;
      if (typeof message.orderId !== 'string' || message.orderId.length === 0) return;
      const orderId = message.orderId;
      const displayAmount = typeof message.amount === 'number' ? message.amount : 0;
      const displayCurrency = typeof message.currency === 'string' ? message.currency : '';

      // 3. Charge through YOUR backend, which re-fetches the authoritative
      //    amount for this orderId from Blend and charges that.
      chargeBlendOrder(orderId, displayAmount, displayCurrency, appAuthToken).catch(() => {
        // Your rail declined, or the buyer cancelled your sheet. The page's
        // polling ends on its own; show your own message if you want one.
      });
      // Nothing more to do. The page is already polling Blend for the outcome.
    },
    [appAuthToken],
  );

  if (status === 'error') {
    return (
      <View style={styles.center}>
        <Text style={styles.message}>Could not load the checkout.</Text>
        <Button
          title="Try again"
          onPress={() => {
            void loadFreshSession();
          }}
        />
      </View>
    );
  }

  return (
    <View style={styles.fill}>
      {sessionUrl ? (
        <WebView
          ref={webViewRef}
          source={{ uri: sessionUrl }}
          // Required: the checkout and the bridge are JavaScript, and the page
          // keeps transient checkout state in DOM storage.
          javaScriptEnabled
          domStorageEnabled
          // Cookies must persist across navigations. Blend sets an httpOnly
          // session cookie scoped to /channel; losing it loses the session.
          sharedCookiesEnabled
          thirdPartyCookiesEnabled
          incognito={false}
          // The bridge, defined before the page's own scripts run. The page
          // checks for it when it renders the Pay button.
          injectedJavaScriptBeforeContentLoaded={BRIDGE_SHIM}
          onMessage={onMessage}
          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
          onNavigationStateChange={onNavigationStateChange}
          onLoadEnd={() => setStatus('ready')}
          onError={() => setStatus((current) => (current === 'loading' ? 'error' : current))}
          // Reloading the CURRENT page is safe: the session lives on the cookie.
          pullToRefreshEnabled
          allowsBackForwardNavigationGestures
          // Links that ask for a new window (the ticket, for one) open here.
          setSupportMultipleWindows={false}
          // Do not pass userAgent. The seat map is touch-optimised.
          style={styles.fill}
        />
      ) : null}
      {status === 'loading' ? (
        <View style={[StyleSheet.absoluteFill, styles.center]} pointerEvents="none">
          <ActivityIndicator size="large" />
        </View>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  fill: { flex: 1 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
  message: { opacity: 0.7 },
});

import { BlendCheckout } from './BlendCheckout';

export function CheckoutScreen({ navigation, session }) {
  return (
    <BlendCheckout
      appAuthToken={session.token}
      onClose={() => navigation.goBack()}
    />
  );
}

window.BlendChannelPay.postMessage(JSON.stringify({
  type: 'charge',
  orderId: '<string>',
  amount: 42.5,
  currency: 'USD',
}));