Build: Code

Prerequisite: You should have connected Stripe before starting. More info here

We have created personalized guides to integrate with the following apps: React/Nextjs, Framer, Webflow, Wordpress, Gumroad.

Ensure you have started an experiment to the status In Progress before following the guide

CodeSandbox: You can see the exact working code to help with implementation here

Step One: Copy Embeded Code

Client Side Implementation

Insert our script tag in your website’s head tag.

<script
  src="https://widget.1price.co/script.js"
  data-1p="YOUR_WORKSPACE_ID"
  defer
></script>

The script needs to be added on your landing page, app, or any other page where you want to use 1Price. This script will add a global variable called $1Price to your window object which will categorize new users.

Replace value of YOUR_WORKSPACE_ID with your unique data_1p found on connect

Note: 1Price is not responsible for any API failures. Setup proper fallback values when implementing our API

Server Side Implementation

We HIGHLY advise AGAINST server side implementation. The 1Price script performs serveral analytics actions and has been tested thoroughly. Adding your own implementation risks the loss of important data and innacurate results.This is also a beta feature.

Fetching the 1Price Object Each time you have a new visitor, you must fetch the 1Price object and store it. We recommend storing it in a cookie for three hours.

GET https://app.1price.co/api/get1PriceObject?workspace_id=&country_code=

workspace_id

string

required

The workspace of your account found in connect

country_code

string

The country code of the user

Obtaining a country code We recommend using ipAPI to get the country code of the user. Re-Validating The Experiment To prevent duplicate analytics of a customer visting pages or reloading, if you detect a valid cookie, call the following API

GET  https://app.1price.co/api/v1/revalidate_experiment/

origin

string

The origin of the request

customer_id

string

required

The customer linked to the offer

offer_id

string

required

The offer shown for experiments

experiment_id

string

required

The experiment linked to the offer

Step Two: Dynamic Price Number

To have adaptive pricing, change the price value to correspond with the 1Price Experiment. This value will be used during pricing tables within the app and landing page.

For comprehensive tests, check out our interactive playground.

POST

fetch("https://widget.1price.co/api/v2/price_value", {
  method: "POST",
  body: JSON.stringify({
    one_price: $1Price,
    unique_id: USER_ID, // OPTIONAL
  }),
})
  .then((response) => response.json())
  .then((data) => {
    console.log("Products", data);
  })
  .catch((error) => {
    console.log(error);
  });

Replace value of USER_ID with the value of your customer’s unique id.

This endpoint returns a JSON object containing pricing details for your products, including monthly and yearly pricing options, and currency information. The response includes: Success Status Currency Product Details Use this data to dynamically populate your pricing table and ensure your visitors always see the most up-to-date pricing information.

`$1Price` Parameters:

workspace_id

string

required

The workspace of your account

customer_id

string

required

The customer linked to the offer

experiment_id

string

required

The experiment linked to the offer

offer_id

string

required

The offer shown for experiments

currency

string

Optional parameter to specify the currency for returned pricing values (e.g., “usd”, “eur”, “gbp”)

Additional parameters include:

unique_id

string

Optional parameter to maintain consistent pricing for a specific customer across multiple sessions

Sample Response

{
"success": true,
"currency": "usd",
"products": [
{
  "name": "Basic Plan",
  "monthly": {
    "price": 9.99,
    "formatted_price": "$9.99 USD",
    "interval": "month",
    "billing_scheme": "per_unit",
    "interval_count": 1,
    "stripe_price_id": "price_1ABC123XYZ",
    "metadata": {
       description: "reg offer",
       original_price_id: "price_EFA4F456UVW"
    }
   },
  "yearly": {
    "price": 99.99,
    "formatted_price": "$99.99 USD",
    "interval": "year",
    "billing_scheme": "per_unit",
    "interval_count": 1,
    "stripe_price_id": "price_2DEF456UVW",
    "metadata": {
       description: "60% off",
       original_price_id: "price_AFeF456UVW"
    }
   },
 }
]
}

Step Three: Track Purchases

To determine the success of a experiment, we track multiple data points on Results. Simply add a oneprice_cid to your Stripe Checkout Session You’ll need to send the 1Price generated priceId to your backend server when creating a Stripe subscription.

const session = await stripe.checkout.sessions.create({
  success_url: "https://example.com/success",
  cancel_url: "https://example.com/cancel",
  metadata: { oneprice_cid: YOUR_1PRICE_CID },
  line_items: [{ price: YOUR_PRICE_ID, quantity: 1 }],
  mode: "subscription",
});

Replace value of YOUR_1PRICE_CID with the value of your $1Price.customer_id and the value of YOUR_PRICE_ID with the dynamic price_id (from your response request).

Example above is with Javascript, but it is the same with every language. You just need to send the oneprice_cid from client side to your backend server either with params, query, or body and then send it to Stripe with metadata when a stripe checkout session.Also note, we can only track Checkout Sessions at the moment. Subscription Creations is in beta. Message us for access

If the Stripe API is called on the client side, you will need to use the 1Price Global variation from either $1Price or window.$1Price

Handling Subscription Upgrades

We recommend having your own billing pages given the structure of price experiments. However, for customers who use the Stripe billing portal, our beta /v3/price_value endpoint contains a stripeCheckoutSubscriptionUpdate property. To retrieve this property simply follow the Step 2 and access the stripeCheckoutSubscriptionUpdate property. When creating your Stripe portal sessions you will first need to create a custom session. The following is an example of how to create a custom session using the NodeJS library.

const configuration = await stripe.billingPortal.configurations.create({
        features: {
            subscription_update: {
                enabled: true,
                default_allowed_updates: ['price'],
                // The object retrieved from the v3 endpoint
                products: stripeCheckoutSubscriptionUpdate  
            },
        },
        business_profile: {
            privacy_policy_url: 'https://example.com/privacy',
            terms_of_service_url: 'https://example.com/terms',
        },
    })

Once your configuration is made you can create your custom session using the following code.

const session = await stripe.billingPortal.sessions.create({
        customer: stripeCustomerID,
        return_url: req.nextUrl.origin,
        configuration: configuration.id, // The configuration ID you created
    })

🧪 Test Integration:

Start an experiment on 1Price
Make a test purchase on your website/app
Ensure transaction was tracked on dashboard

BONUS: You can create a 100% off coupon on Stripe and use that code to make the test purchase, so you do not get charged.

FAQs

Why do get the error: ‘Start an experiment to activate script’? This error appears when there are no active experiments in your workspace. To resolve this, go to your dashboard and set at least one experiment’s status to In Progress. The script will automatically activate once you have an active experiment. What’s the difference between data-1p and workspace_id? These are two references to the same identifier. data-1p is used when embedding the script tag, while workspace_id is used when accessing it programmatically through $1Price.workspace_id. Both contain the same unique workspace identifier. Do I need to specify the uniqueId and currency? The uniqueId parameter is optional and can be used to maintain consistent pricing for a specific customer across multiple sessions. The currency parameter is also optional and can be used to specify the currency for returned pricing values. How can I preview what a specific customer segment sees? You can preview the pricing for any offer by making a GET request to:

http://widget.1price.co/api/v2/price_value?offer_id=YOUR_OFFER_ID

This is useful for verifying the pricing that different customer segments will see. I have additional questions, how can I contact you? You can always contact us via live chat or email and we can set up a price experiment together!

Introduction

Setup

Experiments

Integrations

Step One: Copy Embeded Code

Client Side Implementation

Server Side Implementation

Step Two: Dynamic Price Number

`$1Price` Parameters:

Additional parameters include:

Step Three: Track Purchases

Handling Subscription Upgrades

🧪 Test Integration:

FAQs

Introduction

Setup

Experiments

Integrations

​Step One: Copy Embeded Code

​Client Side Implementation

​Server Side Implementation

​Step Two: Dynamic Price Number

​$1Price Parameters:

​Additional parameters include:

​Step Three: Track Purchases

​Handling Subscription Upgrades

​🧪 ​ Test Integration:

​FAQs

Step One: Copy Embeded Code

Client Side Implementation

Server Side Implementation

Step Two: Dynamic Price Number

`$1Price` Parameters:

Additional parameters include:

Step Three: Track Purchases

Handling Subscription Upgrades

🧪 Test Integration:

FAQs