SDK configuration
Paywall API Usage
You can now embed Glassfy Paywall functionality in your app with our new API!
For more information about paywalls, please have a look here.
Display Paywall
On any platforms, you can display a paywall with a single call to our SDK:
import Glassfy
do {
let viewController = try await Glassfy.paywallViewController(
remoteConfigurationId: remoteConfigId
)
// Presentation code
} catch {
print("Error loading paywall: \(error)")
}
#import <Glassfy/Glassfy.h>
[Glassfy paywallViewControllerWithRemoteConfigurationId:remoteConfigId
completion:^(UIViewController * _Nullable viewController, NSError * _Nullable error) {
if (viewController) {
// Presentation code
} else {
NSLog(@"Error loading paywall: %@", error);
}
}];
import io.glassfy.paywall.GlassfyPaywall
GlassfyPaywall.fragment(remoteConfigId, context, listener) { paywallFragment, error ->
paywallFragment?.show(supportFragmentManager, "paywall")
}
import 'package:glassfy_flutter/paywall.dart';
try {
final paywallListener = PaywallListener(
onCloseCallback: (GlassfyTransaction? transaction, dynamic error) {
debugPrint("Paywall is closing");
});
GlassfyPaywall.showPaywall(
remoteConfig: remoteConfigId,
listener: paywallListener);
// The paywall is automatically presented
} catch (error) {
debugPrint("Error fetching paywall: $error");
}
import { GlassfyPaywall, PaywallListener } from 'capacitor-plugin-glassfy/src';
try {
GlassfyPaywall.showPaywall({remoteConfig: remoteConfigId});
// The paywall is automatically presented
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
import { GlassfyPaywall, PaywallListener } from 'react-native-glassfy-module';
try {
GlassfyPaywall.paywall(remoteConfig: remoteConfigId);
// The paywall is automatically presented
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
Under the hood, this method will:
- Fetch the paywall
- Download the paywall index.html
- Create a view controller or fragment
Await Loading
Once shown, the paywall UI will display a native-looking activity indicator while the actual contents of the paywall are downloaded (such as images not embedded in the html, and so on).
You can delay the display of the callback until the paywall is fully loaded by setting the optional parameter awaitLoading
to true
:
import Glassfy
do {
let viewController = try await Glassfy.paywallViewController(
remoteConfigurationId: remoteConfigId,
awaitLoading: true
)
// Presentation code
} catch {
print("Error loading paywall: \(error)")
}
#import <Glassfy/Glassfy.h>
[Glassfy paywallViewControllerWithRemoteConfigurationId:remoteConfigId
awaitLoading:awaitLoading
completion:^(UIViewController * _Nullable viewController, NSError * _Nullable error) {
if (viewController) {
// Presentation code
} else {
NSLog(@"Error loading paywall: %@", error);
}
}];
import io.glassfy.paywall.GlassfyPaywall
GlassfyPaywall.fragment(remoteConfigId, context, true) { paywallFragment, error ->
paywallFragment?.show(supportFragmentManager, "paywall")
}
import 'package:glassfy_flutter/paywall.dart';
try {
GlassfyPaywall.showPaywall(remoteConfig: remoteConfigId, awaitLoading: true, listener: paywallListener););
// The paywall is automatically presented
} catch (error) {
debugPrint("Error fetching paywall: $error");
}
import { GlassfyPaywall, PaywallListener } from 'capacitor-plugin-glassfy/src';
try {
GlassfyPaywall.showPaywall({remoteConfig: remoteConfigId, awaitLoading: true});
// The paywall is automatically presented
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
import { GlassfyPaywall, PaywallListener } from 'react-native-glassfy-module';
try {
GlassfyPaywall.paywall(remoteConfig: remoteConfigId, awaitLoading: true);
// The paywall is automatically presented
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
Preloading
In certain situations, you might want to preload all contents of the paywall ahead of time, before any user interactions, or without creating a view controller or fragment, you can do this in iOS and Android:
// Load the paywall object
let paywall = try await Glassfy.paywall(remoteConfigurationId: remoteConfigId)
// You can also manually handle loading
paywall.setContentAvailableHandler { viewController, error in }
// Create a view controller from it
paywall.viewController()
// Load the paywall object
[Glassfy paywallWithRemoteConfigurationId:remoteConfigId completion:^(GYPaywall * _Nullable paywall, NSError * _Nullable error) {
if (error) {
// Handle error
} else {
// You can also manually handle loading
[paywall setContentAvailableHandler:^(GYPaywallViewController * _Nullable viewController, NSError * _Nullable error) {
// Handle content availability
}];
// Create a view controller from it
GYPaywallViewController * viewController = [paywall viewController];
}
}];
// Load the paywall object
Glassfy.paywall(remoteConfigurationId) { paywall, error
// You can also manually handle loading
paywall.onContentAvailable {
// ...
}
// Create a fragment from it
GlassfyPaywall.fragment(context, paywall)
}
Handle Paywall Events
The paywall UI will automatically handle events such as button presses, purchases and restoration.
You can listen to this events and override them:
private func customizePaywall(_ vc: Glassfy.PaywallViewController) {
vc.setPurchaseHandler { sku in
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}
vc.setRestoreHandler {
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
}
vc.setLinkHandler { url in
// User taps on a link.
// Implement this to handle your custom link-handling logic.
}
vc.setCloseHandler { transaction, err in
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
}
}
- (void)customizePaywall:(GYPaywallViewController *)vc {
[vc setPurchaseHandler:^(GYSku * sku) {
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}];
[vc setRestoreHandler
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
}];
[vc setLinkHandler:^(NSURL *url) {
// User taps on a link.
// Implement this to handle your custom link-handling logic.
}];
[vc setCloseHandler:^(GYTransaction *transaction, NSError *err) {
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
}];
}
GlassfyPaywall.paywall(remoteConfigId) { fragment, error ->
fragment?.setCloseHandler { transaction, error ->
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
}
fragment?.setPurchaseHandler { sku ->
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}
fragment?.setLinkHandler { url ->
// User taps on a link.
// Implement this to handle your custom link-handling logic.
}
fragment?.setRestoreHandler {
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
}
fragment?.show(activity.supportFragmentManager, "paywall")
}
// Implement your own listener.
// All methods already have a default implementation.
const listener = PaywallListener(
onCloseCallback: (transaction, error) {
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
},
onLinkCallback: (url) {
// User taps on a link.
// Implement this to handle your custom link-handling logic.
},
onRestoreCallback: () {
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
},
onPurchaseCallback: (sku) {
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}
)
try {
Glassfy.showPaywall(
remoteConfig: remoteConfigId,
paywallListener: paywallListener
);
} catch (error) {
debugPrint("Error showing paywall: $error");
}
import { GlassfyPaywall, PaywallListener } from 'capacitor-plugin-glassfy/src';
const paywallListener: PaywallListener = {
onClose(transaction, error) {
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
},
onLink(url) {
// User taps on a link.
// Implement this to handle your custom link-handling logic.
},
onRestore() {
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
},
onPurchase(sku) {
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}
}
const showPaywall = async (remoteConfigId: String) => {
try {
GlassfyPaywall.showPaywall({remoteConfig: remoteConfigId, listener: paywallListener});
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
}
import { GlassfyPaywall, PaywallListener } from 'react-native-glassfy-module';
const paywallListener: PaywallListener = {
onClose(transaction, error) {
// User taps on close or a purchase/restore is completed.
// This callback is executed while the paywall is dismissed.
},
onLink(url) {
// User taps on a link.
// Implement this to handle your custom link-handling logic.
},
onRestore() {
// User taps on restore button.
// Implement this to handle your custom restore-handling logic.
},
onPurchase(sku) {
// User taps on purchase button
// Implement this to handle your custom purchase-handling logic.
}
}
const showPaywall = async (remoteConfigId: String) => {
try {
GlassfyPaywall.paywall({remoteConfig: remoteConfigId, listener: paywallListener});
} catch (e) {
console.log(`Failed to show paywall: ${e}`);
}
}
Programmatically Close Paywall
With our native iOS and Android SDKs, you are provided with a View Controller or Fragment instance which you can manually pop or dismiss, like any other object of that kind.
Four our Capacitor, Flutter and React Native SDKs instead, you can simply call a dedicated method:
// If presented
paywallViewController.dismiss(animated: true, completion: nil)
// If pushed
paywallViewController.navigationController?.popViewController(animated: true)
// If presented
[paywallViewController dismissViewControllerAnimated:YES completion:nil];
// If pushed
[paywallViewController.navigationController popViewControllerAnimated:YES];
paywallFragment.dismiss()
import 'package:glassfy_flutter/paywall.dart';
GlassfyPaywall.close();
import { GlassfyPaywall } from 'capacitor-plugin-glassfy/src';
GlassfyPaywall.close();
import { GlassfyPaywall } from 'react-native-glassfy-module';
GlassfyPaywall.close();
Updated about 1 year ago