The following is a guide on how to integrate 1Price with Framer to have dynamic pricing.
Ensure you have started an experiment to the status In Progress before
following the guide
Step One: Copy Embeded Code Navigate to the website settings and insert our script tag in the Custom Code section.
< script src = "https://widget.1price.co/script.js" data-1p = "YOUR_WORKSPACE_ID" defer ></ script > Replace value of YOUR_WORKSPACE_ID with your unique data_1p found on
connect We recommend only placing the script in the /pricing page of your website
(or any place you have pricing) rather than the entire website. This will
ensure more accurate results.
Step Two: Dynamic Price Number You can create Code Components on Framer in the Assets Tab by clicking +.
Then, use can the 1Price API to change the price value to match with your experiment.
Here is a template you can copy and paste to include as part of your Code Component.
import * as React from "react" export function PriceDisplay ( props ) { const [ priceDetails , setPriceDetails ] = React . useState ( "" ) React . useEffect (() => { async function fetchDynamicPrice () { try { const response = await fetch ( "https://widget.1price.co/api/v2/price_value" , { method: "POST" , body: JSON . stringify ({ one_price: $1Price , }), } ) const data = await response . json () // VARIES BASED ON PRICE EXPERIMENT const price = data ?. products [ 0 ]?. monthly ?. price . toString () setPriceDetails ( price ) } catch ( error ) { console . error ( "Error fetching US price:" , error ) setPriceDetails ( "10" ) // TO CHANGE: FALLBACK PRICE } } fetchDynamicPrice () }, []) return ( < div style = {{ fontSize : "50px" , fontWeight : "bold" , fontFamily : "Inter, sans-serif" , color : "#333333" , }} > $ { priceDetails } </ div > ) } That’s it! There is no need, to track checkout sessions since your users will likely purchase within your app, not on your landing page .
The following are a couple other cases you might fall in:
Add a function have all Stripe buttons tagged on the experiment. < script > function updateButtonUrls() { var buttons = document . querySelectorAll ( 'a[href^="https://buy.stripe.com"]' ); if ( window . $1Price ) { for ( var i = 0 ; i < buttons.length; i ++) { var btn = buttons [ i ]; if ( btn . href . indexOf ( "client_reference_id" ) === - 1 ) { btn . href = btn . href + '?client_reference_id=' + window . $1Price ; } } } } setTimeout(updateButtonUrls, 1000); setTimeout(updateButtonUrls, 1900); setTimeout(updateButtonUrls, 2600); window.addEventListener("$1Price_ready", function() { if ( window . $1Price ) { updateButtonUrls (); } } ); </ script > 🧪 Test Integration:
Start an experiment on 1Price
Make a test purchase on your website
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.
You can always contact us via live chat or email and we can
set up a price experiment together! 
