Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions docs/web/guides/paddle-app-to-web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -237,9 +237,10 @@ Most apps only have one entitlement, unlocking all premium features. However, if

### Web Purchase Link basics

1. Go to the **Product catalog** in your RevenueCat dashboard, and select your previously created offering in the **Offerings** tab
1. Go to the **Web Purchase Link** tab and select **Create a Web Purchase Link for this offering**
1. For the **Web config**, choose the Paddle config you created earlier
1. Click **Web** in the left menu of the **Project** dashboard
1. Click **Create web purchase link**
1. For the **Offering**, choose the offering you created earlier
1. For the **Payment provider**, choose the Paddle config you created earlier
1. Enter a suitable header and subheader for the package selection page, along with a link to terms & conditions

:::info Package selection skipped by default for web-to-app purchases
Expand Down Expand Up @@ -325,9 +326,11 @@ To test the web checkout in sandbox mode, make sure that you:

You can find the sandbox purchase URL by

1. Going to **Product catalog - Offerings** and selecting the offering you created earlier.
1. Selecting the **Web Purchase Link** tab
1. Copying the Sandbox URL template and appending an app user ID to it
1. Click **Web** in the left menu of the **Project** dashboard
1. Click the name of your web purchase link in the **Web purchase links** table
1. Click **Share URL**
1. Append a user ID
1. Click **Copy sandbox URL**

:::warning App user ID must be appended to URL template

Expand Down
4 changes: 2 additions & 2 deletions docs/web/web-billing/tax.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ Any tax rates added in your Stripe Tax dashboard in live mode may be applied to
To test that tax rates are correctly applied to Web Billing purchases:

1. Add tax registrations in Stripe's test mode — you need to configure separate tax registrations in test mode, which are separate from any registrations in live mode.
1. Load a sandbox Web Paywall Link, or initiate a purchase with the Web SDK in sandbox mode.
1. Load a sandbox Web Purchase Link, or initiate a purchase with the Web SDK in sandbox mode.
1. In the checkout, select a billing address for a location where a tax rate is active in Stripe's test mode.
1. If the tax registration is applicable for your product in the selected location, you should see that taxes are shown on the checkout page and in the purchase receipt.

Expand All @@ -99,7 +99,7 @@ As soon as you've added a registration in the Stripe dashboard live mode, Web Bi

#### How is a customer's tax location determined?

When a customer begins a purchase through a Web Paywall Link or Web SDK purchase flow, their tax location will be determined based on the billing address they enter, using country, state and postcode/zipcode information. The `country` field is pre-filled based on the customer's IP address location.
When a customer begins a purchase through a Web Purchase Link or Web SDK purchase flow, their tax location will be determined based on the billing address they enter, using country, state and postcode/zipcode information. The `country` field is pre-filled based on the customer's IP address location.

#### How does Sales Tax and VAT affect the price of my products?

Expand Down
77 changes: 36 additions & 41 deletions docs/web/web-billing/web-purchase-links.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,48 @@ Use Web Purchase Links to enable customers to purchase a web subscription direct

Web Purchase Links support a range of use cases, with both identified and anonymous purchases. For identified users, append the customer's App User ID to the provided URL. For anonymous purchases, utilize [Redemption Links](/web/web-billing/redemption-links), which allow customers to buy subscriptions without an App User ID and later associate the purchase with their account in your app.

## Prerequisites
## Creating a Web Purchase Link

Before getting started, you first need to [connect your Stripe account with RevenueCat](/web/connect-stripe-account), if you haven't already done so.
You can set up Web Purchase Links with **RevenueCat Web Billing** or **Paddle Billing** as the checkout. The checkout configuration and styling options below only apply when using RevenueCat Web Billing as the checkout (see the [Paddle app-to-web purchases](/web/guides/paddle-app-to-web) guide for instructions on configuring Paddle).

## Get Started
### Web Billing

1. Create a [Web Billing App](/web/web-billing/web-sdk#app-configuration)
2. Add the [Web Billing Products](/web/web-billing/product-setup) you want to serve through your Web Purchase Link
3. Create an [Offering](/offerings/overview) with those Products
4. Visit that Offering's details page and click on the **Web Purchase Link** tab
5. Finally, click on the **Create a Web Purchase Link for this Offering** button
6. To support anonymous purchases, configure [Redemption Links](/web/web-billing/redemption-links) in your Web Billing app settings.
1. Connect payment provider: To set up a Web Purchase Link with **Web Billing**, make sure to [connect your Stripe account with RevenueCat](/web/connect-stripe-account), if you haven't already done so. This can only be done by the the project owner.
2. In the **Apps & providers** section, add a [Web Billing config](/web/web-billing/web-sdk#app-configuration).
3. Create the [Web Billing products](/web/web-billing/product-setup) you want to serve through your Web Purchase Link
4. Create an [offering](/offerings/overview) with those products
5. In the **Web** section in the main menu, click on the **Create web purchase link** button to open the form.

![](/docs_images/web/web-billing/web-purchase-link-create.png)

## Customise your Web Purchase Link
:::info Anonymous purchases
To support anonymous purchases, configure [Redemption Links](/web/web-billing/redemption-links) in your Web Billing config settings.
:::

Choose a Web Billing app from the dropdown if you have more than one
### Paddle Billing

![](/docs_images/web/web-billing/web-purchase-link-choose-app.png)
To configure a Web Purchase Link with **Paddle Billing**, see the first steps in [Paddle app-to-web purchases](/web/guides/paddle-app-to-web) to create a Paddle config, products and an offering containing the products.

### Product Selection page
## Customize the Web Purchase Link

The first page your customers will see when accessing your Web Purchase Link is the product selection page.
In this page your customers can select one of the products included in your offering.
### Landing page - product selection

Here is an example:
When customers open your Web Purchase Link, they land on a product selection page. The products shown there come from the offering you’ve linked, and customers can choose from those products.

![](/docs_images/web/web-billing/web-purchase-link-package-example.png)

You can customize:

- The page header
- The subheader
- Choose to show or not the product description (check the [product setup](/web/web-billing/product-setup) step for more info)
- The terms and conditions URL (footer)
- Visual look and feel, including colors and shape styling (configured separately in [customization](/web/web-billing/customization))

![](/docs_images/web/web-billing/web-purchase-link-package-config.png)
- Page header and subheader
- Whether product descriptions show above product names (check the [product setup](/web/web-billing/product-setup) step for more info)
- Terms and conditions URL (footer)
- Look and feel, including colors and shape styling (configured separately in [ the web config's customization](/web/web-billing/customization))

:::info product selection can be skipped
It's possible to skip this page, and pre-select a package by passing a `package_id` [URL parameter](#package-id).
:::

### Checkout

Once a product has been selected, users will be presented with the checkout:
Once a product has been selected, in Web Purchase Links using Web Billing, customers will be presented with the checkout:

![](/docs_images/web/web-billing/web-purchase-link-checkout.png)

Expand All @@ -65,18 +60,18 @@ Once a product has been selected, users will be presented with the checkout:
- Product information, prices and currencies are configured in the products (see [product setup](/web/web-billing/product-setup))
- Tax collection is configured in the payment provider settings and Stripe dashboard (see [sales tax & VAT](/web/web-billing/tax))
- Colors and button styles are configured in customization (see [customization](/web/web-billing/customization))
- The email address can be pre-populated (see [URL parameters](#email))
- Email address can be pre-populated (see [URL parameters](#email))

### Success behavior

After completing a purchase, there are two configurable options:

**Show the success page**
**Show the default success page**

- Includes optional app download links and purchase redemption (for [Redemption Links](/web/web-billing/redemption-links))
- Customizable header and subheader
- Customizable header and subheader.
- Optional app download links and purchase redemption instructions (for [Redemption Links](/web/web-billing/redemption-links))

**Redirect to a custom URL**
**Redirect to a custom success page**

- Can be used to redirect to a post-purchase experience on your own website
- The app user id is appended as a URL parameter (`app_user_id`) so you can further customize the post-purchase experience
Expand All @@ -85,16 +80,15 @@ After completing a purchase, there are two configurable options:

#### Success page customization

If you choose to show a success page here's how it will look:
Here's a default success page, with customized content, styling, and [Redemption Links](/web/web-billing/redemption-links) enabled:

![](/docs_images/web/web-billing/web-purchase-link-success-example.png)

You can customize:

- The page header
- The subheader
- Choose whether to show the app download buttons
- Configure the app download links
- Page header and subheader
- Whether to show app download badges
- App download links (overrides only for this Web Purchase Link; defaults to app config if left empty)

![](/docs_images/web/web-billing/web-purchase-link-success-config.png)

Expand All @@ -118,18 +112,19 @@ Automatically skips the package selection and checkout pages. It will use the co

Allows the returning customer to purchase another product.

:::warning Repeated purchases might fail
This configuration is useful for non-consumable products, or when selling multiple products to a single customer.
:::warning Repeated purchases of non-consumable products will fail
Allowing multiple purchases is useful for consumable products, or when selling multiple different products to a single customer.
The transaction will fail if the customer tries to purchase the exact same product twice (for subscriptions and non-consumables). Consumable products can be purchased multiple times.

We suggest to create a dedicated offering/web purchase link for non-consumables to make sure all products can be bought as many times as the customer wants.
We suggest creating a dedicated offering and web purchase link for non-consumables to make sure all products can be bought as many times as the customer wants.
:::

## Distributing Web Purchase Links

Once you've configured a web purchase link, you'll have access to two URLs formatted as `https://pay.rev.cat/<someProductionTokenWeGenerate>` (one for production, the other one for sandbox):
When you configure a Web Purchase Link, you’ll get two URLs: one for Production and one for Sandbox.
Example format: `https://pay.rev.cat/<ProductionTokenWeGenerate>`.

![](/docs_images/web/web-billing/web-purchase-link-urls.png)
To access these click **Web** in the main menu, then select your Web Purchase Link from the table. Now click **Share URL** to copy the URL template.

:::danger Do not send the sandbox URL to customers
The Sandbox URL allows you to test purchases using [Stripe test card numbers](https://docs.stripe.com/testing#use-test-cards).
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.