From 12e895d22512b31bb1407545b22fd83fb4651394 Mon Sep 17 00:00:00 2001 From: Josh Holtz Date: Thu, 17 Aug 2023 14:19:07 -0500 Subject: [PATCH] Paywalls: Small fixes and examples for UIKit and modes (#288) ## Motivation / Description Improving docs from questions and examples that were given in beta tester Discord ## Changes introduced - Fixed a variable typo - Added UIKit example to full screen paywall - Added mode examples for SwiftUI and UIKit ## Jira ticket (if any) N/A ## Additional comments N/A --- .../paywalls/paywalls_1.swift" | 3 + .../paywalls/paywalls_2.swift" | 3 + .../paywalls/paywalls_3.swift" | 3 + .../paywalls/paywalls_4.swift" | 27 ++++++++ .../paywalls/paywalls_5.swift" | 27 ++++++++ .../paywalls/paywalls_6.swift" | 30 +++++++++ .../displaying-products/paywalls.md" | 63 +++++++++++++++++-- 7 files changed, 151 insertions(+), 5 deletions(-) create mode 100644 "code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_4.swift" create mode 100644 "code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_5.swift" create mode 100644 "code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_6.swift" diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_1.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_1.swift" index 4931193c..c856dc09 100644 --- "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_1.swift" +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_1.swift" @@ -1,3 +1,6 @@ +import SwiftUI + +import RevenueCat import RevenueCatUI struct App: View { diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_2.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_2.swift" index 3368e5d9..56c1e93b 100644 --- "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_2.swift" +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_2.swift" @@ -1,3 +1,6 @@ +import SwiftUI + +import RevenueCat import RevenueCatUI struct App: View { diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_3.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_3.swift" index 57769617..eef90f6e 100644 --- "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_3.swift" +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_3.swift" @@ -1,3 +1,6 @@ +import SwiftUI + +import RevenueCat import RevenueCatUI struct App: View { diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_4.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_4.swift" new file mode 100644 index 00000000..2fe8dfe4 --- /dev/null +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_4.swift" @@ -0,0 +1,27 @@ +import UIKit + +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) { + + } + +} diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_5.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_5.swift" new file mode 100644 index 00000000..83913c17 --- /dev/null +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_5.swift" @@ -0,0 +1,27 @@ +import SwiftUI + +import RevenueCat +import RevenueCatUI + +struct App: View { + + var body: some View { + VStack { + ScrollView { + VStack { + // Your custom paywall design content + }.frame(maxWidth: .infinity) + } + + Spacer() + + PaywallView(mode: .condensedCard) // or .card + } + .frame(maxWidth: .infinity, maxHeight: .infinity) + .background( + Color(white: 0.8) + .edgesIgnoringSafeArea(.all) + ) + } + +} diff --git "a/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_6.swift" "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_6.swift" new file mode 100644 index 00000000..d1e3b02a --- /dev/null +++ "b/code_blocks/\360\237\232\200 Getting Started/displaying-products/paywalls/paywalls_6.swift" @@ -0,0 +1,30 @@ +import UIKit + +import RevenueCat +import RevenueCatUI + +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) { + + } + +} diff --git "a/docs_source/\360\237\232\200 Getting Started/displaying-products/paywalls.md" "b/docs_source/\360\237\232\200 Getting Started/displaying-products/paywalls.md" index a28a1336..82baa6d4 100644 --- "a/docs_source/\360\237\232\200 Getting Started/displaying-products/paywalls.md" +++ "b/docs_source/\360\237\232\200 Getting Started/displaying-products/paywalls.md" @@ -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: @@ -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 @@ -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] @@ -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] [ { @@ -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] [ { @@ -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: +- `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)