docs: update a312d0b

GooglePay.md

@@ -0,0 +1,3 @@
+# These docs have moved
+
+[You can find the Google Pay integration guide here](https://stripe.com/docs/google-pay?platform=react-native).

Platform-Pay-Migration.md

@@ -0,0 +1,33 @@
+# `isApplePaySupported` and `isGooglePaySupported`
+
+`isApplePaySupported` and `isGooglePaySupported` have both been replaced by `isPlatformPaySupported`.
+
+`isPlatformPaySupported` requires no parameters, but you _can_ optionally pass in the same parameter you passed in to `isGooglePaySupported`. However, this now belongs under the `googlePay` field. So the change would look like:
+
+```diff
+- isGooglePaySupported(myParams);
++ isPlatformPaySupported({googlePay: myParams});
+```
+
+# `presentApplePay`, `confirmApplePayPayment`, `initGooglePay`, `presentGooglePay`, and `createGooglePayPaymentMethod`
+
+`presentApplePay`, `confirmApplePayPayment`, `isGooglePaySupported`, `presentGooglePay`, and `createGooglePayPaymentMethod` have been replaced with:
+
+- `confirmPlatformPaySetupIntent` if you were using them to confirm a setup intent
+- `confirmPlatformPayPayment` if you were using them to confirm a payment intent
+- `createPlatformPayPaymentMethod` if you were using them to create a payment method (this was impossible previously with Apple Pay, so it was only possible on Android).
+- `createPlatformPayToken` if you are migrating from Tipsi Stripe and your payments code still uses the legacy Tokens API.
+
+# `updateApplePaySummaryItems`
+
+`updateApplePaySummaryItems` has been replaced with `updatePlatformPaySheet`.
+
+`updatePlatformPaySheet` accepts an object with the `applePay` key. Under that key, you can pass an object containing your `summaryItems`, `shippingMethods`, and `errors` to be displayed in the Apple Pay sheet so your customer can take action during checkout.
+
+# `useGooglePay` and `useApplePay`
+
+`useGooglePay` and `useApplePay` have both been replaced by the `usePlatformPay` hook. The callbacks passed to the `useApplePay` hook are now set via props on the `<PlatformPayButton />` component.
+
+# `<GooglePayButton />` and `<ApplePayButton />`
+
+The `<GooglePayButton />` and `<ApplePayButton />` components have been replaced with `<PlatformPayButton />`.

accept-a-payment-multiline-card.md

@@ -0,0 +1,171 @@
+# Accept a payment - classic
+
+Collecting payments in your React Native app consists of three steps. Creating an object to track payment on your server, collecting card information in your app, and submitting the payment to Stripe for processing.
+
+Stripe uses this payment object, called a `PaymentIntent`, to track and handle all the states of the payment until it’s completed—even when the bank requires customer intervention, like two-factor authentication.
+
+## Setup Stripe
+
+### Client side
+
+The [React Native SDK](https://github.com/stripe/stripe-react-native) is open source and fully documented. Internally, it makes use of [native iOS](https://github.com/stripe/stripe-ios) and [Android](https://github.com/stripe/stripe-android) SDKs. Install the SDK by running:
+
+```sh
+yarn add react-native-stripe-sdk
+```
+
+For iOS, run `pod install` in the `ios` directory to ensure that you also install the required native dependencies. Android doesn’t require any additional steps.
+
+When your app starts, configure the SDK with your Stripe [publishable key](https://stripe.com/dashboard.stripe.com/account/apikeys) so it can make requests to the Stripe API:
+
+```tsx
+import { StripeProvider } from '@stripe/stripe-react-native';
+
+function App() {
+  return (
+    <StripeProvider
+      publishableKey="pk_test_51AROWSJX9HHJ5bycpEUP9dK39tXufyuWogSUdeweyZEXy3LC7M8yc5d9NlQ96fRCVL0BlAu7Nqt4V7N5xZjJnrkp005fDiTMIr"
+      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
+      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
+    >
+      // Your app code here
+    </StripeProvider>
+  );
+}
+```
+
+## Create your checkout page
+
+Securely collect card information on the client with `CardForm` component.
+
+Add `CardForm` component to your payment screen. To collect card details you can use `onFormComplete` prop and save received data in component state..
+
+```tsx
+function PaymentScreen() {
+  const [card, setCard] = useState<CardFormView.Details>();
+
+  // ...
+
+  return (
+    <View>
+      <CardForm
+        cardStyle={{
+          backgroundColor: '#FFFFFF',
+        }}
+        style={{
+          width: '100%',
+          height: 300,
+        }}
+        onFormComplete={(cardDetails) => {
+          setCard(cardDetails);
+        }}
+      />
+    </View>
+  );
+}
+```
+
+## Create a PaymentIntent
+
+Stripe uses a [PaymentIntent](https://stripe.com/docs/api/payment_intents) object to represent your intent to collect payment from a customer, tracking your charge attempts and payment state changes throughout the process.
+
+### Client side
+
+On the client, request a PaymentIntent from your server and store its [client secret](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret):
+
+```tsx
+function PaymentScreen() {
+  // ...
+
+  const fetchPaymentIntentClientSecret = useCallback(async () => {
+    const response = await fetch(`${API_URL}/create-payment-intent`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        currency: 'usd',
+        items: ['id-1'],
+      }),
+    });
+    const { clientSecret } = await response.json();
+
+    return clientSecret;
+  }, []);
+
+  const handlePayPress = useCallback(async () => {
+    if (!card) {
+      return;
+    }
+
+    try {
+      // Fetch Intent Client Secret from backend
+      const clientSecret = await fetchPaymentIntentClientSecret();
+
+      // ...
+    } catch (e) {
+      // ...
+    }
+  }, [card, fetchPaymentIntentClientSecret]);
+
+  return (
+    <View>
+      <CardForm
+        onFormComplete={(cardDetails) => {
+          setCardDetails(cardDetails);
+        }}
+      />
+
+      <Button onPress={handlePayPress} title="Pay" disabled={loading} />
+    </View>
+  );
+}
+```
+
+## Submit the payment to Stripe
+
+When the customer taps **Pay**, confirm the `PaymentIntent` to complete the payment.
+
+Rather than sending the entire PaymentIntent object to the client, use its [client secret](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret). This is different from your API keys that authenticate Stripe API requests. The client secret should be handled carefully because it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer.
+
+Pass the customer card details and client secret to `confirmPayment`, which you can access with the `useConfirmPayment` hook. The hook also returns a loading value to indicate the state of the asynchronous action:
+
+```tsx
+function PaymentScreen() {
+  const { confirmPayment, loading } = useConfirmPayment();
+
+  // ...
+
+  const handlePayPress = async () => {
+    // Gather the customer's billing information (e.g., email)
+    const billingDetails: BillingDetails = {
+      email: '[email protected]',
+    };
+
+    // Fetch the intent client secret from the backend
+    const clientSecret = await fetchPaymentIntentClientSecret();
+
+    // Confirm the payment with the card details
+    const { paymentIntent, error } = await confirmPayment(clientSecret, {
+      paymentMethodType: 'Card',
+      paymentMethodData: {
+        billingDetails,
+      },
+    });
+
+    if (error) {
+      console.log('Payment confirmation error', error);
+    } else if (paymentIntent) {
+      console.log('Success from promise', paymentIntent);
+    }
+  };
+
+  return <View />;
+}
+```
+
+If authentication is required by regulation (e.g., Strong Customer Authentication), additional actions are presented to the customer to complete the payment process. See [Card authentication and 3D Secure](https://stripe.com/docs/payments/3d-secure) for more details.
+
+When the payment completes successfully, the value of the returned PaymentIntent’s `status` property is `succeeded`. Check the status of a PaymentIntent in the [Dashboard](https://dashboard.stripe.com/test/payments) or by inspecting the `status` property on the object. If the payment isn’t successful, inspect the returned `error` to determine the cause.
+
+## Test the integration

android-chrome-tab-closes-on-background.md

@@ -0,0 +1,81 @@
+## The problem
+
+You're likely running into the same problem from https://github.com/stripe/stripe-react-native/issues/355 where a Chrome custom tab (web browser) is launched from your app's Stripe flow, like to perform 3DSecure confirmation, and if the app is backgrounded, that web browser gets killed.
+
+## The solution
+
+If your Android `launchMode` is set to `singleTask` (check your `AndroidManifest.xml`), that's why this is occurring. Unfortunately, this is not addressable by the Stripe React Native library.
+
+Luckily, [@stianjensen shared a fix in the above Github issue](https://github.com/stripe/stripe-react-native/issues/355#issuecomment-1701323254). It is summarized here:
+
+1. Modify your `MainApplication`:
+
+```diff
+public class MainApplication extends Application {
++   private ArrayList<Class> runningActivities = new ArrayList<>();
+
++   public void addActivityToStack (Class cls) {
++       if (!runningActivities.contains(cls)) runningActivities.add(cls);
++   }
+
++   public void removeActivityFromStack (Class cls) {
++       if (runningActivities.contains(cls)) runningActivities.remove(cls);
++   }
+
++   public boolean isActivityInBackStack (Class cls) {
++       return runningActivities.contains(cls);
++   }
+}
+```
+
+2. create `LaunchActivity`
+
+```diff
++ public class LaunchActivity extends Activity {
++    @Override
++    protected void onCreate(Bundle savedInstanceState) {
++        super.onCreate(savedInstanceState);
++        BaseApplication application = (BaseApplication) getApplication();
++        // check that MainActivity is not started yet
++        if (!application.isActivityInBackStack(MainActivity.class)) {
++            Intent intent = new Intent(this, MainActivity.class);
++            startActivity(intent);
++        }
++        finish();
++    }
++ }
+```
+
+3. Modify `AndroidManifest.xml` and move `android.intent.action.MAIN` and `android.intent.category.LAUNCHER` from your `.MainActivity` to `.LaunchActivity`
+
+```diff
++        <activity android:name=".LaunchActivity">
++            <intent-filter>
++                <action android:name="android.intent.action.MAIN" />
++                <category android:name="android.intent.category.LAUNCHER" />
++            </intent-filter>
++        </activity>
+
+...
+-            <intent-filter>
+-                <action android:name="android.intent.action.MAIN"/>
+-                <category android:name="android.intent.category.LAUNCHER"/>
+-            </intent-filter>
+...
+```
+
+4. Modify `MainActivity` to look _something_ like the following (you likely already have an `onCreate` method that you need to modify):
+
+```
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+    ((BaseApplication) getApplication()).addActivityToStack(this.getClass());
+  }
+
+  @Override
+  protected void onDestroy() {
+    super.onDestroy();
+    ((BaseApplication) getApplication()).removeActivityFromStack(this.getClass());
+  }
+```

api-reference/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

api-reference/assets/highlight.css

@@ -0,0 +1,92 @@
+:root {
+    --light-hl-0: #000000;
+    --dark-hl-0: #D4D4D4;
+    --light-hl-1: #001080;
+    --dark-hl-1: #9CDCFE;
+    --light-hl-2: #A31515;
+    --dark-hl-2: #CE9178;
+    --light-hl-3: #008000;
+    --dark-hl-3: #6A9955;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #569CD6;
+    --light-hl-5: #795E26;
+    --dark-hl-5: #DCDCAA;
+    --light-hl-6: #098658;
+    --dark-hl-6: #B5CEA8;
+    --light-hl-7: #0070C1;
+    --dark-hl-7: #4FC1FF;
+    --light-hl-8: #AF00DB;
+    --dark-hl-8: #C586C0;
+    --light-hl-9: #267F99;
+    --dark-hl-9: #4EC9B0;
+    --light-code-background: #F5F5F5;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+pre, code { background: var(--code-background); }