JavaScript SDK

Include the Pelcro.js script on every page of your site. To ensure you always receive the latest features and security updates, you must load the Pelcro.js script directly from https://js.pelcro.com . Do not bundle the script or host it yourself, as this will prevent you from receiving critical updates.

⚠️

To protect the security and stability of our platform, we reserve the right to block traffic from outdated and unsupported versions of the SDK. Self-hosting or bundling the script will eventually lead to your integration becoming outdated, which could cause it to stop working without notice.

Including Pelcro.js

To install the SDK, copy and paste the code below on every page of your site. You can find your configured script on the integration page from the settings of the platform.

<script>
  window.Pelcro = {};
  window.Pelcro.siteid = 1232;
  window.Pelcro.environment = {
    domain: "https://www.pelcro.com",
    ui: "https://ui.pelcro.com/bundle.js",
    stripe: "pk_live_Wdef2LjEQXsgFWult6IVFobB"
  };
</script>
<script async src="https://js.pelcro.com/sdk/main.min.js" type="text/javascript"></script>

Reference

Browser Support

We strive to support all recent versions of major browsers on both desktop and mobile. For the sake of security and providing the best experience, we do not support browsers that are no longer receiving security updates.

We are committed to supporting the latest versions of Chrome, Firefox, Safari, and Edge on all platforms. Please note that we do not support Internet Explorer 11.

For browsers not explicitly supported, we require a modern environment that includes support for TLS 1.2 and JavaScript Promises. While the platform may work on other browsers, we do not proactively test them but will respond to bug reports.

If you have an issue with our JavaScript SDK on a specific browser, please contact us so we can improve its support.

Events

Listen to triggered events from the SDK and add your own reactions. You can use these events to customize reactions for different events, integrate them with an analytics provider, or customize the user experience based on them.

Helpers

getURLParameter

Gets a specific URL parameter value from the current URL.

Example

const giftCode = window.Pelcro.helpers.getURLParameter("gift_code");
console.log(giftCode);

loadSDK

Loads JavaScript into the document.

Example

window.Pelcro.helpers.loadSDK(
  "https://js.stripe.com/v3",
  "pelcro-sdk-stripe"
);

loadCSS

Loads CSS into the document.

Example

Pelcro.helpers.loadCSS(
  "https://js.stripe.com/v3/integrations/812.css",
  "pelcro-css-stripe"
);

Authentication Token & JWT Expiry

• The pelcro.user.auth.token cookie has a lifetime of 60 days and is extended every time the user reloads the page.
• The JWT (JSON Web Token) TTL is also 60 days, but it does not get extended on page reloads.

As a result, even if the cookie is extended, the JWT will expire exactly 60 days after the user first logs in, requiring them to re-authenticate.

Customizable Membership Status Access

The JS SDK gives you more control over who can access your gated content. You can define which membership statuses should be allowed access by using the new Pelcro.uiSettings.membershipSubscriptionStatusAccess setting.

If you don’t configure this setting, the SDK will default to the following allowed statuses:
["active", "extended", "trialing", "past_due"]

To customize which statuses are allowed, simply update your configuration like so:

Pelcro.uiSettings = { membershipSubscriptionStatusAccess: ["active"] // Only allow active members to view content };

FAQ

What should I do if I want to use Pelcro's SDK only without the UI?

Simply replace the UI environment property with empty whitespace.

window.Pelcro.environment.ui = " ";

How do I deal with errors coming from calling Pelcro's SDK methods?

Requests will be validated by the API using server-side validations. Error messages returned by the API are accessible as follows:

window.Pelcro.user.login({
    email: "[email protected]",
    password: "INVALID_PASSWORD",
}, (error, response) => {
    if (error) {
    	console.log("error", error.response.data.error.message); // "Invalid credentials! Please try again."
    	console.log("error", error.response.data.error.status); // 404
    }
})

API status for errors will be either 4xx or 5xx depending on the severity of the error. Validation errors will be 4xx while server errors will be 5xx.