Skip to content
This repository has been archived by the owner on Mar 22, 2024. It is now read-only.

Paywalls: Small fixes and examples for UIKit and modes #288

Merged
merged 4 commits into from
Aug 17, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import UIKit

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import RevenueCat
import RevenueCatUI

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
}

@IBAction func presentPaywall() {
let controller = PaywallViewController()
controller.delegate = self

present(controller, animated: true, completion: nil)
}

}

extension ViewController: PaywallViewControllerDelegate {

func paywallViewController(_ controller: PaywallViewController,
didFinishPurchasingWith customerInfo: CustomerInfo) {

}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import RevenueCatUI
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add import SwiftUI


struct App: View {

var body: some View {
VStack {
ScrollView {
VStack {
// Your custom paywall design content
}.frame(maxWidth: .infinity)
}

Spacer()

PaywallView(mode: .condensedCard) // or .card
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<3

}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
Color(white: 0.8)
.edgesIgnoringSafeArea(.all)
)
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import UIKit
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import UIKit
import UIKit
import RevenueCatUI
import RevenueCat


class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

let paywallView = PaywallView(mode: .condensedCard) // or .card
paywall.delegate = self

let hostingController = UIHostingController(rootView: paywallView)

addChild(hostingController)
view.addSubview(hostingController.view)
hostingController.didMove(toParent: self)
}

}

extension ViewController: PaywallViewControllerDelegate {

func paywallViewController(_ controller: PaywallViewController,
didFinishPurchasingWith customerInfo: CustomerInfo) {

}

}
63 changes: 58 additions & 5 deletions docs_source/🚀 Getting Started/displaying-products/paywalls.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ For some Paywall strings you may want to set values based on the package that’

To make this easier and ensure accuracy, we recommend using **Variables** for these values that are package-specific.

For example, to show a CTA like “Try 7 Days Free & Subscribe”, you should instead use the **{{ sub_offer_duration }}** variable, and enter “Try {{ intro_duration }} Free & Subscribe” to ensure the string is accurate for any product you use, even if you make changes to the nature of the offer in the future.
For example, to show a CTA like “Try 7 Days Free & Subscribe”, you should instead use the **{{ sub_offer_duration }}** variable, and enter “Try {{ sub_offer_duration }} Free & Subscribe” to ensure the string is accurate for any product you use, even if you make changes to the nature of the offer in the future.

We support the following variables:

Expand All @@ -111,7 +111,7 @@ RevenueCat Paywalls automatically check for Introductory Offer eligibility, and

#### Uploading images

Use the **Select a file** button for the applicable image to upload your own to use for your Paywall. We’ll center and scale the image to fit, regardless of its aspect ratio, so we recommend using source images that are appropriate for the area of the template they cover. We support .jpg, jpeg, and .png files up to 5mb.
Use the **Select a file** button for the applicable image to upload your own to use for your Paywall. We’ll center and scale the image to fit, regardless of its aspect ratio, so we recommend using source images that are appropriate for the area of the template they cover. We support .jpg, jpeg, and .png files up to 5MB.

#### Colors

Expand All @@ -121,7 +121,11 @@ Use your own hex codes, select a custom color, or use our color picker to select
>
> The color picker can be used outside of your browser window as well if you need to grab colors from assets in other applications.
## How to display a Paywall in your app
## How to display a fullscreen Paywall in your app

RevenueCat Paywalls will, by default, show paywalls fullscreen and there are multiple ways to do this with SwiftUI and UIKit.

### SwiftUI

1. Option 1: `presentPaywallIfNeeded` depending on an entitlement
[block:file]
Expand All @@ -134,7 +138,7 @@ Use your own hex codes, select a custom color, or use our color picker to select
]
[/block]

2. Option 2 `presentPaywallIfNeeded` with custom logic:
2. Option 2: `presentPaywallIfNeeded` with custom logic
[block:file]
[
{
Expand All @@ -145,7 +149,7 @@ Use your own hex codes, select a custom color, or use our color picker to select
]
[/block]

3. Option 3: present manually:
3. Option 3: present manually
[block:file]
[
{
Expand All @@ -156,6 +160,55 @@ Use your own hex codes, select a custom color, or use our color picker to select
]
[/block]

### UIKIt

1. Option 1: manually present `PaywallViewController`
[block:file]
[
{
"language": "swift",
"name": "",
"file": "code_blocks/🚀 Getting Started/displaying-products/paywalls/paywalls_4.swift"
}
]
[/block]

## How to embed a Paywall into your views

RevenueCatUI also has smaller paywalls for you to embed or overlay in your app. You could display these as inline banners in your app, overlay your app as a sheet promoting an upgrade, or as a footer in a custom paywall.

This can all be done by passing `PaywallViewMode` into `PaywallView`. The options are:
Copy link
Contributor

@NachoSoto NachoSoto Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add a screenshot here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah yeah! I'll add some screenshots in a follow up PR tomorrow after working with @dpannasch on we want the sample screenshots to look like 💪 But I think that would totally helpful!

- `PaywallViewMode.fullScreen`
- `PaywallViewMode.card`
- `PaywallViewMode.condensedCard`

### SwiftUI

1. Option 1: `PaywallView` in `UIHostingController`
[block:file]
[
{
"language": "swift",
"name": "",
"file": "code_blocks/🚀 Getting Started/displaying-products/paywalls/paywalls_5.swift"
}
]
[/block]

### UIKit

1. Option 1: `PaywallView` in `UIHostingController`
[block:file]
[
{
"language": "swift",
"name": "",
"file": "code_blocks/🚀 Getting Started/displaying-products/paywalls/paywalls_6.swift"
}
]
[/block]


## Limitations

#### Platforms (support for more coming)
Expand Down