Framer

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.

[TEMPLATE] Dynamic Price

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:

For Stripe Payment Links

Add a function have all Stripe buttons tagged on the experiment.

updateButton()

<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!

On this page

Step One: Copy Embeded Code
Step Two: Dynamic Price Number
That’s it!
🧪 Test Integration:

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.

[TEMPLATE] Dynamic Price

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:

For Stripe Payment Links

Add a function have all Stripe buttons tagged on the experiment.

updateButton()

<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!

On this page

Step One: Copy Embeded Code
Step Two: Dynamic Price Number
That’s it!
🧪 Test Integration:

Step One: Copy Embeded Code

Step Two: Dynamic Price Number

That’s it!

🧪 Test Integration:

Introduction

Setup

Experiments

Integrations

Framer

Step One: Copy Embeded Code

Step Two: Dynamic Price Number

That’s it!

🧪 Test Integration:

​Step One: Copy Embeded Code

​Step Two: Dynamic Price Number

​That’s it!

​🧪 ​ Test Integration:

Introduction

Setup

Experiments

Integrations

​Step One: Copy Embeded Code

​Step Two: Dynamic Price Number

​That’s it!

​🧪 ​ Test Integration:

Step One: Copy Embeded Code

Step Two: Dynamic Price Number

That’s it!

🧪 Test Integration:

Step One: Copy Embeded Code

Step Two: Dynamic Price Number

That’s it!

🧪 Test Integration: