---
updatedAt: 2026-02-13T10:41:05.000Z
agentTools:
  projectIndex: https://docs.pelcro.com/v2.4/llms.txt
---

# Setting Up 

![2952](https://files.readme.io/925fb17-getting-startedd-02.jpg "getting-startedd-02.jpg")

<br />

> 👍 Our support team is right there for you!
>
> Contact us at <support@pelcro.com> and we're happy to assist with any questions or concerns.

# Category

**Tutorial** — Learn Pelcro by setting it up end-to-end for staging and production.

# Overview

In this guide, you’ll configure Pelcro from account creation through site integration.\
The same setup flow applies to both **staging** and **production**, with environment-specific differences clearly called out where relevant.

**By the end of this guide, you will have:**

* A configured Pelcro site
* Products, plans, customers, and subscriptions set up
* Pelcro installed and running on your website

***

# Prerequisites

* Access to your website’s codebase
* A domain (staging or production)

***

# How to set up your Pelcro account

Follow the steps below to set up Pelcro from account creation through site integration.\
The same flow applies to both **staging** and **production**, with environment-specific differences called out where relevant.

## Step 1: Create Your Pelcro Account

Create a Pelcro account using the appropriate environment:

* **Staging:** <https://staging.pelcro.com/>
* **Production:** [https://www.pelcro.com/](https://www.pelcro.com/admin/register)

Click **Don’t have an account?**, complete the registration form, and you’ll be redirected to the admin dashboard.

<Image align="center" src="https://files.readme.io/218ac34e19f106ed2d4e769646eb86c273cf42b3daf7a9e684fb91fce913177e-Screenshot_2025-09-05_at_8.20.48_PM.png" />

## Step 2: Configure the Payment Gateway

After registration, you’ll be prompted to configure a payment gateway.

### Backend-Only Usage

If you are using Pelcro strictly as a **backend system**:

* Click **Skip payment gateway**

### Frontend + Backend Usage

If you plan to use Pelcro’s frontend UI (checkout, customer portal, and hosted flows), connect a payment gateway.

1. Click **Connect** next to your preferred payment gateway (e.g. Stripe or any other supported gateway)
2. Complete the gateway connection flow

> **Environment notes**
>
> * In **staging**, click **Connect Stripe** to enable testing. You can then **skip the Stripe form**, which will automatically create a **Pelcro-owned dummy Stripe account** so you can proceed with the setup steps below.\
>   Alternatively, if you already have a **Stripe test account**, you may connect it instead.
> * In **production**, you must connect a live payment gateway account to process real payments.
> * If you connect Stripe in **staging**, you can test your checkout flows using Stripe test cards.\
>   For more information, see:\
>   👉 <https://docs.pelcro.com/docs/stripe#testing-checkout-with-stripe-test-cards>

<br />

<Image align="center" src="https://files.readme.io/4af545114332a302eac094b107e628a47c59d6e341bcbaa00849af4c2f28abbe-Screenshot_2026-02-12_at_3.19.51_PM.png" />

<Image align="center" src="https://files.readme.io/9958bf7a32ec1c14de645b67426ef138e9d26d1ffc105e285056767aa3aebf78-Screenshot_2026-02-12_at_3.22.29_PM.png" />

## Step 3: Configure Your Site

From the admin dashboard, navigate to **Settings → Site** and configure:

* **Site logo**
* **Site name**
* **Fully qualified domain URL** (e.g. `https://www.mysite.com`)
* **Support email** (used as the reply-to address for automated emails)

These settings apply to both staging and production.

<br />

![1901](https://files.readme.io/934606b-site-settings.png "site-settings.png")

<br />

![1919](https://files.readme.io/2eaa983-site-settings-2.png "site-settings-2.png")

## Step 4: Create Products and Plans

Before selling anything, you must create at least one product and one plan.

* **Products** define *what* you sell (subscriptions, memberships, services)
* **Plans** define *how* you sell them (price, interval, currency)

You must create a product before creating its plans, here is the order:

* Create a product
* Create an associated plan
* Configure the product purchase flow

![1919](https://files.readme.io/1fb2adc-create-a-product.png "create-a-product.png")

## Step 5: Add Customers

Customers can be created in two ways:

* Manually from the Pelcro admin
* Automatically when users sign up through your website or app

Use this step to create test customers in staging or real customers in production.

<Image align="center" src="https://files.readme.io/3b99daf99bd0f0225452235cd8a547d5fc414ff7e2f836506b22df9ce2486117-Screenshot_2026-02-12_at_10.51.55_PM.png" />

## Step 6: Create Subscriptions

Subscriptions connect:

* A **customer**
* A **plan**
* A **product**

Creating a subscription grants the customer access to your content or services.

<Image align="center" src="https://files.readme.io/8a0ec6f698ed5c02230f558023b2a53b912f25ceae8d566690d6f949d48290ba-Screenshot_2026-02-12_at_10.52.52_PM.png" />

## Step 7: Install the Pelcro Integration Script

To enable Pelcro on your site:

1. Go to **Settings → Integration**
2. Copy the provided integration script
3. Paste it into your site’s HTML (typically before the closing `</head>` tag)

> **Best practice**\
> Install and validate the integration on your **staging site first**, then repeat the same steps on production.

### Example: Pelcro Integration Script (Staging)

Below is an example of a Pelcro integration script configured for a **staging environment**:

```html
<script>
  var Pelcro = window.Pelcro || (window.Pelcro = {});
  Pelcro.siteid = 1090;
  Pelcro.environment = {};
  Pelcro.environment.stripe = "pk_test_aThAAdvPHgIdAziZweywBWNk";
  Pelcro.environment.domain = "https://staging.pelcro.com";
  Pelcro.environment.ui = "https://ui.pelcro.com/staging/bundle.js";
</script>
<script src="//js.pelcro.com/sdk/staging/main.min.js" type="text/javascript"></script>
```

![1902](https://files.readme.io/ad95273-site-settings-integration.png "site-settings-integration.png")

<br />

![1905](https://files.readme.io/183094d-script-integration.png "script-integration.png")

## Step 8: Customize the Interface

You can customize Pelcro’s UI to match your brand.

### Option A: Platform-Based Design Settings

* Go to **Settings → Design**
* Configure colors for headers, buttons, and text

### Option B: Custom CSS Overrides

* Override Pelcro’s CSS for full control over fonts, colors, and layout

<Image align="center" width="400px" src="https://files.readme.io/832487f8f656e819ab521efc10015649b1229a192a27bbddf53108d39da81baf-Screenshot_2026-02-12_at_11.02.51_PM.png" />

<Image align="center" width="400px" src="https://files.readme.io/47c163682436d8b715c58451d4e7bbd005fb65183be044d675edc336a886b351-Screenshot_2026-02-12_at_11.00.12_PM.png" />

<br />

## Next Steps

Once your setup is complete, you can continue by:

* Testing end-to-end user flows in staging
* Preparing your production environment for launch, see [here](https://docs.pelcro.com/update/docs/go-live-preparation) for more details.

<br />

> 📘 Check out these helpful articles for more information on our blog
>
> * [Your Guide to Getting Started Part 1](https://blog.pelcro.com/pelcro-your-guide-to-getting-started/)
> * [Your Guide to Getting Started Part 2](https://blog.pelcro.com/pelcro-your-guide-to-getting-started-pt-2/)
> * [Setup Identity, Authorization, and Billing in 5 minutes using JavaScript!](https://blog.pelcro.com/setup-identity-authorization-and-billing-with-subscription-javascript/)

# Sibling pages

* [Overview](https://docs.pelcro.com/v2.4/docs/overview.md)
* [Preparing Your Team](https://docs.pelcro.com/v2.4/docs/preparing-your-team.md)
* [Migrating Your Data](https://docs.pelcro.com/v2.4/docs/migrating-your-data.md)
* [Going Live](https://docs.pelcro.com/v2.4/docs/going-live.md)

# What’s Next

* [Migrating Your Data](https://docs.pelcro.com/v2.4/docs/migration.md)
* [Preparing Your Team](https://docs.pelcro.com/v2.4/docs/support-team-guide.md)