Customized Animated Paywalls - RevenueCat

individualPage

subTitle

date

Jan 6, 2024

isFolder

slug

swiftui_5.0_customized_paywalls_jan24

status

tags

iOS 17

Animations

summary

This video explains how to create a customised animated paywall with the help of RevenueCat paywalls using SwiftUI.

type

SwiftUI 5.0

video

https://youtu.be/1rc7jjCyNO4

RevenueCat Paywalls allow you to remotely configure your whole paywall view without requiring any code modifications or app updates.

Furthermore, it offers a feature called Offering Metadata, which allows us to attach a custom JSON object and use it to customise the paywall in any way we want. By combining both of them, I created this animated paywall.

JSON Configuration


{
  "headerImage": "https://images.pexels.com/photos/10752104/pexels-photo-10752104.jpeg",
  "points": [
    {
      "color": "Green",
      "content": "Unlock premium art tutorial and resources",
      "symbol": "checkmark.circle.fill"
    },
    {
      "color": "Red",
      "content": "Downloadble art materials",
      "symbol": "square.and.arrow.down.fill"
    },
    {
      "color": "Yellow",
      "content": "Supports the creative work",
      "symbol": "star.circle.fill"
    }
  ],
  "reviews": [
    {
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
      "name": "iJustine",
      "rating": 5
    },
    {
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "name": "Jenna",
      "rating": 5
    },
    {
      "content": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
      "name": "Tim",
      "rating": 5
    },
    {
      "content": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
      "name": "Kaviya",
      "rating": 4
    },
    {
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
      "name": "Revenue Kit",
      "rating": 5
    }
  ],
  "showDefaultView": false,
  "showReviews": true,
  "stickyHeader": true,
  "stickyHeaderTitle": "Subscription",
  "stretchyHeader": true,
  "subTitle": "Unlock our full gallery of premium resources",
  "title": "Your creativity Journey Starts here"
}

For more information about the implementation, please refer to the YouTube video.

Download Code