Please, read Paywalls Overview before following the integration guide below.
Integrating ReactJS SDK
-
Install
@corrily/react-sdk
package:For React version lower, than 17.0.2: -
Get Corrily API Key from Resources page and store it in
.env.local
: -
Embed Paywall into your code:
-
Define “on-click” behaviour for selected product in
ProductList.tsx
. To do that replace<Paywall />
withPaywallWrapper
in the code above:and definePaywallWrapper
component itself:
Customization
Applying custom styles to Paywall elements
Use custom CSS styles to change the appearance of Paywall elements. All elements inside Paywall havecorrily--
prefix to separate Paywall classes from your front-end classnames.
Custom Product component
In case you want to change Product card layout, useCardComponent
property of the <Paywall />
.
Here is an example:
Additional Parameters
Under the hood Paywall SDK will send API request to fetch products and calculate prices for a given user. In some cases you might want pass additional parameters to that API request. Common usecases are:- send
"dev": true
at the time of testing to disable DB writes - send
"experiment_id": ...
to enforce a specific experiment being used - send
"arm_id": ...
to enforce a specific arm - send
"override": true
to ignore previously stored user price and recompute prices from scratch