Use Corrily SDK to render a complete Paywall with plans & prices coming from Corrily
Corrily no-code Paywalls are used to minimize effort required for Pricing Page implementation by providing ready-to-use front-end Paywall component. Simply install Corrily SDK and render the complete paywall with a few lines of code.
Please, read Paywalls Overview before following the integration guide below.
Corrily Paywalls works through a ReactJS SDK. If your use another framework, please, send implementation request to hello@corrily.com.
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 />
with PaywallWrapper
in the code above:
and define PaywallWrapper
component itself:
Use custom CSS styles to change the appearance of Paywall elements.
All elements inside Paywall have corrily--
prefix to separate Paywall classes from your front-end classnames.
In case you want to change Product card layout, use CardComponent
property of the <Paywall />
.
Here is an example:
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:
"dev": true
at the time of testing to disable DB writes"experiment_id": ...
to enforce a specific experiment being used"arm_id": ...
to enforce a specific arm"override": true
to ignore previously stored user price and recompute prices from scratchCheck the full list of parameters available in API Reference in body params section.
Code example with custom params:
Check the Implementation Examples Repo to see the examples of React SDK usage: https://github.com/corrily/integration-examples/tree/main/react-sdk-integration
Use Corrily SDK to render a complete Paywall with plans & prices coming from Corrily
Corrily no-code Paywalls are used to minimize effort required for Pricing Page implementation by providing ready-to-use front-end Paywall component. Simply install Corrily SDK and render the complete paywall with a few lines of code.
Please, read Paywalls Overview before following the integration guide below.
Corrily Paywalls works through a ReactJS SDK. If your use another framework, please, send implementation request to hello@corrily.com.
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 />
with PaywallWrapper
in the code above:
and define PaywallWrapper
component itself:
Use custom CSS styles to change the appearance of Paywall elements.
All elements inside Paywall have corrily--
prefix to separate Paywall classes from your front-end classnames.
In case you want to change Product card layout, use CardComponent
property of the <Paywall />
.
Here is an example:
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:
"dev": true
at the time of testing to disable DB writes"experiment_id": ...
to enforce a specific experiment being used"arm_id": ...
to enforce a specific arm"override": true
to ignore previously stored user price and recompute prices from scratchCheck the full list of parameters available in API Reference in body params section.
Code example with custom params:
Check the Implementation Examples Repo to see the examples of React SDK usage: https://github.com/corrily/integration-examples/tree/main/react-sdk-integration