Tweaks Stripe to point at app (#71)

Author: anglinb

bun.lock

@@ -1,9 +1,9 @@
 ---
 title: "Stripe Setup"
-description: "Create your Stripe keys to connect Superwall to Stripe. Fill out some settings to configure your app."
+description: "Connect Superwall to Stripe using the official Stripe app and configure your settings."
 ---
 
-Once you've created a [Stripe app](/web-checkout-creating-an-app), you'll need to configure it with your Stripe keys and fill in a few settings. This is a one-time setup that connects Superwall to Stripe. The easiest way to get started is to click on the link in your overview page, which will take you to your app's [Settings](/overview-settings) page:
+Once you've created a [Stripe app](/web-checkout-creating-an-app), you'll need to connect it with Stripe and fill in a few settings. This is a one-time setup that connects Superwall to Stripe. The easiest way to get started is to click on the link in your overview page, which will take you to your app's [Settings](/overview-settings) page:
 
 <Frame>![](/images/web2app_prompt.jpeg)</Frame>
 
@@ -52,48 +52,36 @@ This is the domain your paywalls will be shown from. This was set when the Strip
 <Frame>![](/images/web-checkout-domain-section.png)</Frame>
 
 ### Stripe Live Configuration
-This section allows you to connect Stripe keys with Superwall. You will need:
+To connect Stripe with Superwall, you'll use the official Superwall Stripe app:
 
-1. **Publishable Key:** A Stripe publishable key. Stripe creates this key for you, you don't need to generate it yourself.
-2. **Secret Key:** A Stripe secret key that you create. Once you've made one, paste it here.
+1. Visit the [Superwall app on Stripe Marketplace](https://marketplace.stripe.com/apps/superwall)
+2. Click **Install app** and follow the authorization flow
+3. After installation, you'll receive a **Publishable Key** and a **Restricted Secret Key** with the proper permissions already configured
+4. Copy both keys from the Stripe app installation page
+5. Paste the keys into the corresponding fields in Superwall:
+   - **Publishable Key**: Your Stripe publishable key from the app
+   - **Secret Key**: The restricted secret key provided by the app
+6. **Click** on **Update Configuration** to save your changes
 
-To access these, click on the **[API Keys](https://dashboard.stripe.com/apikeys)** link:
-
-<Frame>![](/images/web2app_live_api_keys.png)</Frame>
-
-Under **Restricted Keys**, click on **+ Create restricted key**:
-
-<Frame>![](/images/web2app_rkey.png)</Frame>
-
-Choose "Providing this key to another website" and click **Continue ->**:
-
-<Frame>![](/images/web2app_rkey_make.png)</Frame>
-
-Use "Superwall" as the name and "superwall.com" as the URL, then click **Create restricted key**:
-
-<Frame>![](/images/web2app_rkey_name.png)</Frame>
-
-You'll get a modal of your restricted key, **copy this to your clipboard**, you won't be able to view it again:
-
-<Frame>![](/images/web2app_key.png)</Frame>
-
-From there, copy your **Publishable Key** and **copied key** from the Stripe dashboard to Superwall:
-
-<Frame>![](/images/web2app_associatekeys.png)</Frame>
-
-Once you've provided those two keys, **click** on **Update Configuration** to save your changes. This section should say "Configured" at the top right if setup was successful:
+This section should say "Configured" at the top right if setup was successful:
 
 <Frame>![](/images/web2app_live_config.png)</Frame>
 
 ### Stripe Sandbox Configuration
 
-For the sandbox configuration, you'll follow the same previous steps, **except you retrieve the keys from this link**: [Stripe Sandbox API Keys](https://dashboard.stripe.com/test/apikeys).
+<Note>
+  The Superwall Stripe app provides both live and test mode keys. Make sure you're in the correct mode in your Stripe dashboard when copying keys.
+</Note>
 
-You should see something similar to this:
+For sandbox/test mode:
 
-<Frame>![](/images/web2app_testKey.png)</Frame>
+1. Switch to test mode in your Stripe dashboard
+2. Access the Superwall Stripe app settings to view your test mode keys
+3. Copy the test **Publishable Key** and **Secret Key** from the app
+4. Paste both keys into the Sandbox Configuration fields in Superwall
+5. **Click** on the **Update Configuration** button
 
-Paste the both the **Publishable Key** and **Secret Key** into Superwall for each respective field and **click** on the **Update Configuration** button. As before, this section should say "Configured" at the top right if setup was successful.
+This section should say "Configured" at the top right if setup was successful.
 
 ### iOS configuration
 

content/docs/web-checkout/web-checkout-configuring-stripe-keys-and-settings.mdx

@@ -3,7 +3,7 @@ title: "Web Checkout Links"
 description: "Learn how to use campaigns and placements to present web paywalls using Superwall's web checkout links."
 ---
 
-Once you've [created a Stripe app](/web-checkout-creating-an-app), [configured Stripe with Superwall](web-checkout-configuring-stripe-keys-and-settings) and have [created Stripe products](web-checkout-adding-a-stripe-product) — you're ready to configure a campaign to show a web paywall.
+Once you've [created a Stripe app](/web-checkout-creating-an-app), [configured Stripe with Superwall](web-checkout-configuring-stripe-keys-and-settings) via the [Superwall Stripe app](https://marketplace.stripe.com/apps/superwall) and have [created Stripe products](web-checkout-adding-a-stripe-product) — you're ready to configure a campaign to show a web paywall.
 
 <Note>
 Before you proceed, recall that web checkout has all of the advantages of the Superwall platform. If you are unfamiliar with how to create campaigns or what a placement is — we recommend you read through the [introduction](/home) documentation and [campaigns doc](/campaigns) first.

content/docs/web-checkout/web-checkout-creating-campaigns-to-show-paywalls.mdx

@@ -9,7 +9,7 @@ For customers in the United States, you can offer Stripe products directly from
 
 <Steps>
     <Step title="Configure Web Checkout">
-    First, follow the [web checkout setup guide](/web-checkout-overview#getting-setup) to create a Stripe app and configure your web checkout settings. Specifically, you'll need to complete the first three steps. This includes setting up your Stripe keys and configuring your app's settings.
+    First, follow the [web checkout setup guide](/web-checkout-overview#getting-setup) to create a Stripe app and configure your web checkout settings. Specifically, you'll need to complete the first three steps. This includes installing the [Superwall Stripe app](https://marketplace.stripe.com/apps/superwall) and setting up your app's settings.
     </Step>
     <Step title="Add a Stripe product to an iOS paywall">
     Select a paywall and add a Stripe product to it. This will allow users to purchase the product directly from the paywall. Stripe products are prepended with "stripe" in the product selector:

content/docs/web-checkout/web-checkout-direct-stripe-checkout.mdx

@@ -43,8 +43,8 @@ Before you start, you'll need to have a Superwall account and an account with yo
 
 1. **[Creating an app](/web-checkout-creating-an-app):** First, you'll add a Web Checkout app to an existing project within Superwall.
 2. Payment provider setup:
-    - **[Stripe setup](/web-checkout-configuring-stripe-keys-and-settings):**
-    - **[Paddle setup (private beta)](/web-checkout-paddle-setup):**
+    - **[Stripe setup](/web-checkout-configuring-stripe-keys-and-settings):** Install the [Superwall Stripe app](https://marketplace.stripe.com/apps/superwall) for automatic configuration
+    - **[Paddle setup (private beta)](/web-checkout-paddle-setup):** Configure your Paddle integration
 4. **[Managing products](/web-checkout-adding-a-stripe-product):** Create or import products to add to your web paywalls.
 
 ### Creating paywalls and campaigns