Build: Code
Integrate 1Price into your application in 15 mins
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
Insert our script tag in your website’s head tag.
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
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.
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:
The workspace of your account
The customer linked to the offer
The experiment linked to the offer
The offer shown for experiments
Optional parameter to specify the currency for returned pricing values (e.g., “usd”, “eur”, “gbp”)
Additional parameters include:
Optional parameter to maintain consistent pricing for a specific customer across multiple sessions
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.
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
🧪 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:
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!