Accept in-app payments

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

import { useState, useCallback, useEffect } from 'react';
import {
  useEmbeddedPaymentElement,
  IntentConfiguration,
  EmbeddedPaymentElementConfiguration,
  PaymentMethod,
  IntentCreationCallbackParams,
} from '@stripe/stripe-react-native';

function MyCheckoutComponent() {
  const [intentConfig, setIntentConfig] = useState<IntentConfiguration | null>(null);
  const [elementConfig, setElementConfig] = useState<EmbeddedPaymentElementConfiguration | null>(null);

  const initialize = useCallback(() => {
    const newIntentConfig: IntentConfiguration = {
      mode: {
        amount: 1099,
        currencyCode: 'USD',
      },
      confirmHandler: async (
        paymentMethod: PaymentMethod.Result,
        shouldSavePaymentMethod: boolean,
        callback: (params: IntentCreationCallbackParams) => void
      ) => {
	 // ...explained later
      },
    };

    const newElementConfig: EmbeddedPaymentElementConfiguration = {
      merchantDisplayName: 'Your Business Name',
      returnURL: 'your-app://stripe-redirect',
    };

    setIntentConfig(newIntentConfig);
    setElementConfig(newElementConfig);
  }, []);

  const {
    embeddedPaymentElementView,
    paymentOption,
    confirm,
    update,
    clearPaymentOption,
    loadingError,
  } = useEmbeddedPaymentElement(
    intentConfig!,
    elementConfig!
  );

  useEffect(() => {
    initialize();
  }, [initialize]);
}

import { View, Text } from 'react-native';

function MyCheckoutComponent() {
   // Other component code remains the same

  return (
    <View>
	{/* Handle loading errors through the loadingError property */}
      {loadingError && (
        <View>
          <Text>
            Failed to load payment form:
          </Text>
          <Text>
            {loadingError.message}
          </Text>
        </View>
      )}
	{/* Add the embedded view to your view */}
      {embeddedPaymentElementView}
      {!embeddedPaymentElementView && !loadingError && <Text>Loading embedded payment element...</Text>}
    </View>
  );
}

import { View, Text, Image } from 'react-native';

function MyCheckoutComponent() {
  // Other component code remains the same

  return (
    // Other component code remains the same
    // Display the currently selected payment option (label and image)
    <View style={{ paddingVertical: 12 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
        {paymentOption?.image && (
          <Image
            source={{ uri: `data:image/png;base64,${paymentOption.image}` }}
            style={{ width: 32, height: 20 }}
            resizeMode="contain"
          />
        )}
        <Text>
          Selected: {paymentOption?.label ?? 'None'}
        </Text>
      </View>
    </View>
  );
}

function MyCheckoutComponent() {
  // Other component code remains the same

  const handleUpdate = useCallback(async () => {
    // Create a new IntentConfiguration object with updated values
    const updatedIntentConfig: IntentConfiguration = {
      ...intentConfig!,

        mode: {
          amount: 999, // Updated amount after applying discount code
          currencyCode: 'USD',
        },
    };

    try {
      await update(updatedIntentConfig);
    } catch (error) {
      // Handle any unexpected errors
      console.error('Unexpected error during update:', error);
    }
  }, [intentConfig, update]);

  // Example of how to use the handleUpdate function
  const applyDiscountCode = useCallback(async (discountCode: string) => {
    // Validate discount code with your server
    try {
      const response = await fetch('https://your-server.com/apply-discount', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ discountCode }),
      });

      if (response.ok) {
        // Update the intent configuration with the new amount
        await handleUpdate();
      }
    } catch (error) {
      console.error('Failed to apply discount:', error);
    }
  }, [handleUpdate]);

  return (
    // Other component code remains the same
    // Apply discount code button
    <View>
      <Button
        title="Apply Discount Code"
        onPress={() => applyDiscountCode('123456')}
      />
    </View>
  );

import { useCallback, useState } from 'react';
import { View, Button, Alert, ActivityIndicator } from 'react-native';

function MyCheckoutComponent() {
  // Other component code remains the same

  const [isProcessing, setIsProcessing] = useState(false);
  const { confirm } = useEmbeddedPaymentElement(intentConfig!, elementConfig!);

  const handleSubmit = useCallback(async () => {
    setIsProcessing(true); // Disable user interaction, show a spinner

    try {
      const result = await confirm();

      switch (result.status) {
        case 'completed':
          // Payment completed - show a confirmation screen.
          Alert.alert('Success', 'Payment was completed successfully!');
          break;
        case 'failed':
          // Encountered an unrecoverable error. You can display the error to the user, log it, etc.
          Alert.alert('Error', `Payment failed: ${result.error.message}`);
          break;
        case 'canceled':
          // Customer canceled - you should probably do nothing.
          console.log('Payment was canceled by the user');
          break;
      }
    } catch (error) {
      // Handle any unexpected errors
      console.error('Unexpected error during confirmation:', error);
      Alert.alert('Error', 'An unexpected error occurred');
    } finally {
      setIsProcessing(false); // Re-enable user interaction, hide spinner
    }
  }, [confirm]);

  // The rest of the component code

  return (
    <View>
      {/* Other UI elements */}

      <Button
        title="Confirm Payment"
        onPress={handleSubmit}
        disabled={isProcessing || !paymentOption}
      />

      {isProcessing && <ActivityIndicator size="large" />}
    </View>
  );
}

function MyCheckoutComponent() {
  const handleConfirm = useCallback(async (
    paymentMethod: PaymentMethod.Result,
    shouldSavePaymentMethod: boolean,
    intentCreationCallback: (params: IntentCreationCallbackParams) => void
  ) => {
    try {
      // Make a request to your own server and receive a client secret or an error.
      const response = await fetch('https://your-server.com/create-intent', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          paymentMethodId: paymentMethod.id,
          shouldSave: shouldSavePaymentMethod,
          // Add any other necessary data
        }),
      });

      if (!response.ok) {
        throw new Error('Server response was not ok');
      }

      const { clientSecret } = await response.json();

      // Call the `intentCreationCallback` with the client secret
      intentCreationCallback({ clientSecret });
    } catch (error) {
      // Call the `intentCreationCallback` with the error
      intentCreationCallback({ error: (error as IntentCreationError) });
    }
  }, []);

  const intentConfig: IntentConfiguration = {
    mode: {
      amount: 1099,
      currencyCode: 'USD',
    },
    confirmHandler: handleConfirm,
  };

  // The rest of your component code

  return (
    // Your component
  );
}

function MyCheckoutComponent() {
  // The rest of your component code
  const handleDeselectPaymentMethod = useCallback(() => {
    clearPaymentOption();
  }, [clearPaymentOption]);

  // The rest of your component code
}

const embeddedConfig: EmbeddedPaymentElementConfiguration = {
      merchantDisplayName: 'Your Business Name',
      returnURL: 'your-app://stripe-redirect',
      formSheetAction: {
        type: 'confirm',
        onFormSheetConfirmComplete: (result) => {
          switch (result.status) {
            case 'completed':
              // Payment completed. You can show a confirmation screen.
              console.log("Completed");
              Alert.alert("Success", "Payment completed successfully!");
              break;
            case 'failed':
              // Encountered an unrecoverable error. You can display the error to the user, log it, etc.
              console.error(result.error);
              Alert.alert("Error", `Payment failed: ${result.error.message}`);
              break;
            case 'canceled':
              // Customer canceled - you should probably do nothing.
              console.log("Canceled");
              break;
          }
        },
      },
    };

import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}