@evanbacon/fix stripe bugs

with-stripe/app/_layout.tsx

@@ -13,6 +13,7 @@ export default function RootLayout() {
         <Stack.Screen
           name="index"
           options={{
+            title: "Stripe Checkout",
             headerLargeTitle: true,
             headerSearchBarOptions: {},
           }}

with-stripe/app/api/payment-sheet+api.ts

@@ -3,12 +3,17 @@
 import { stripe } from "@/utils/stripe-server";
 import { CURRENCY } from "@/utils/config";
 
-export async function POST(req: Request) {
+export async function POST() {
   // Use an existing Customer ID if this is a returning customer.
   const customer = await stripe.customers.create();
-  const ephemeralKey = await stripe.ephemeralKeys.create({
-    customer: customer.id,
-  });
+  const ephemeralKey = await stripe.ephemeralKeys.create(
+    {
+      customer: customer.id,
+    },
+    {
+      apiVersion: "2024-06-20",
+    }
+  );
   const paymentIntent = await stripe.paymentIntents.create({
     amount: 1256,
     currency: CURRENCY,

with-stripe/app/index.tsx

@@ -4,7 +4,7 @@ import { Image, ScrollView, Text, View } from "react-native";
 export default function DonatePage(): JSX.Element {
   return (
     <ScrollView
-      style={{ flex: 1, maxWidth: 600, paddingBottom: 24 }}
+      style={{ flex: 1, paddingBottom: 24 }}
       contentContainerStyle={{ padding: 16, gap: 8 }}
       contentInsetAdjustmentBehavior="automatic"
     >

with-stripe/app/result.tsx

@@ -24,21 +24,13 @@ export default function ResultPage() {
   }
 
   const paymentIntent = data.payment_intent as Stripe.PaymentIntent;
+  const formattedContent = JSON.stringify(data, null, 2);
 
   return (
     <>
       <h2>Status: {paymentIntent.status}</h2>
       <h3>Checkout Session response:</h3>
-      <PrintObject content={data} />
+      <pre>{formattedContent}</pre>
     </>
   );
 }
-
-function PrintObject({
-  content,
-}: {
-  content: Stripe.PaymentIntent | Stripe.Checkout.Session;
-}): JSX.Element {
-  const formattedContent: string = JSON.stringify(content, null, 2);
-  return <pre>{formattedContent}</pre>;
-}

with-stripe/components/stripe-provider.web.tsx

@@ -1,3 +1,3 @@
-export default function ExpoStripeProvider(props) {
+export default function ExpoStripeProvider(props: any) {
   return <>{props.children}</>;
 }

with-stripe/utils/stripe-server.ts

@@ -1,6 +1,7 @@
 import Stripe from "stripe";
 
 export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
+  // This is required for deployment.
   httpClient: Stripe.createFetchHttpClient(),
   // https://github.com/stripe/stripe-node#configuration
   apiVersion: "2024-06-20",