[Bug]: Stripe Configuration

MakeTooRRSS commented 3 months ago

What happened?

I am trying to connect stripe on my localhost but currently it is not showing up when I hit Upgrade Plan, I modified the .env file with the following lines:

NEXT_PUBLIC_ENV=local NEXT_PUBLIC_BACKEND_URL=http://localhost:5050 NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 NEXT_PUBLIC_SUPABASE_ANON_KEY=lDMblYTn_I0 NEXT_PUBLIC_CMS_URL=https://cms.quivr.app NEXT_PUBLIC_FRONTEND_URL=http://localhost:* NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=(ID) NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=(KEY) NEXT_PUBLIC_AUTH_MODES=password

stripe

What do I have to do to display the table of products that I made in stripe, thank you.

Relevant log output

No response

Twitter / LinkedIn details

No response

linear[bot] commented 3 months ago

TICK-34 [Bug]: Stripe Configuration

dosubot[bot] commented 3 months ago

Hey there, @MakeTooRRSS! 👋 I'm here to help you with any bugs, questions, or contributions. Let's squash those bugs together!

To display the table of products that you made in Stripe, ensure that your environment variables are correctly set, particularly NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY. Here are the steps to follow:

Verify Environment Variables: Ensure that the following environment variables are correctly set in your .env file:
```
NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=(ID)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=(KEY)
```
Check for Errors: Look for any specific error messages or logs in the console or network tab when attempting to load the Stripe pricing table. This can provide clues about what might be going wrong.
SQL Query: Use the following SQL query to retrieve and display the products from the public.products table:
```
SELECT * FROM public.products;
```

Frontend Component: Use a frontend component to display the products in a modal. Here is an example using a StripePricingModal component in a React application:

import { StripePricingTable } from "./components/PricingTable/PricingTable";
import { Modal } from "../../ui/Modal/Modal";

type StripePricingModalProps = {
 Trigger: JSX.Element;
};

export const StripePricingModal = ({
 Trigger,
}: StripePricingModalProps): JSX.Element => {
 return (
   <Modal Trigger={Trigger} CloseTrigger={<div />} unforceWhite={true}>
     <StripePricingTable />
   </Modal>
 );
};

Custom Element Declaration: Ensure that your project supports the stripe-pricing-table custom element. Here is an example of how to declare this custom element in TypeScript:

import * as React from "react";

declare global {
 namespace JSX {
   interface IntrinsicElements {
     "stripe-pricing-table": React.DetailedHTMLProps<
       React.HTMLAttributes<HTMLElement>,
       HTMLElement
     >;
   }
 }
}

StripePricingTable Component: Implement the StripePricingTable component as follows:

import { MessageInfoBox } from "@/lib/components/ui/MessageInfoBox/MessageInfoBox";

import styles from "./PricingTable.module.scss";

const PRICING_TABLE_ID = process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID;
const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;

export const StripePricingTable = (): JSX.Element => {
 return (
   <>
     <div className={styles.info_content}>
       <MessageInfoBox type="info" unforceWhite={true}>
         <div>
           {"The free tier allows you to have"}
           <span className={styles.bold}> 3 brains </span>
           {"and"}
           <span className={styles.bold}> 25 chat credits </span>
           {
             "per month. You can upgrade to unlock more brains, more chat credits and access to premium models."
           }
         </div>
       </MessageInfoBox>
     </div>
     <div className="p-2">
       <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
       <stripe-pricing-table
         pricing-table-id={PRICING_TABLE_ID}
         publishable-key={PUBLISHABLE_KEY}
       ></stripe-pricing-table>
     </div>
   </>
 );
};

By following these steps, you should be able to display the table of products that you made in Stripe on your localhost ^[1]^[2]^[3]^[4].

To continue talking to Dosu, mention @dosu.

MakeTooRRSS commented 2 months ago

The only way I have been able to get stripe to come up after checking everything you suggested is as follows:

file .env

#### QUIVR Configuration
# This file is used to configure the Quivr stack. It is used by the `docker-compose.yml` file to configure the stack.

# OPENAI. Update this to use your API key. To skip OpenAI integration use a fake key, for example: tk-aabbccddAABBCCDDEeFfGgHhIiJKLmno
OPENAI_API_KEY=sk-proj-LTiA0Zlvz

# LOCAL
# OLLAMA_API_BASE_URL=http://host.docker.internal:11434 # Uncomment to activate ollama. This is the local url for the ollama api

########
# FRONTEND
########

NEXT_PUBLIC_ENV=local
NEXT_PUBLIC_BACKEND_URL=http://localhost:5050
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUiJzdXBhYmFzm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjDMblYTn_I0
NEXT_PUBLIC_CMS_URL=https://cms.quivr.app
NEXT_PUBLIC_FRONTEND_URL=http://localhost:*
#NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=YKh6
#NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_o5e
NEXT_PUBLIC_AUTH_MODES=password

########
# BACKEND
########

LOG_LEVEL=INFO
SUPABASE_URL=http://host.docker.internal:54321
SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1p7fsn3W0YpN81IU
PG_DATABASE_URL=postgresql://postgres:postgres@host.docker.internal:54322/postgres
PG_DATABASE_ASYNC_URL=postgresql+asyncpg://postgres:postgres@host.docker.internal:54322/postgres
ANTHROPIC_API_KEY=null
JWT_SECRET_KEY=super-secret-jwt-token-with-at-least-32-characters-long
AUTHENTICATE=true
TELEMETRY_ENABLED=true
CELERY_BROKER_URL=redis://redis:6379/0
CELEBRY_BROKER_QUEUE_NAME=quivr-preview.fifo
QUIVR_DOMAIN=http://localhost:3000/
BACKEND_URL=http://localhost:5050
#COHERE_API_KEY=CHANGE_ME

#RESEND
RESEND_API_KEY=<change-me>
RESEND_EMAIL_ADDRESS=onboarding@resend.dev
RESEND_CONTACT_SALES_FROM=contact_sales@resend.dev
RESEND_CONTACT_SALES_TO=<change-me>

CRAWL_DEPTH=1

PREMIUM_MAX_BRAIN_NUMBER=3
PREMIUM_MAX_BRAIN_SIZE=10000000
PREMIUM_DAILY_CHAT_CREDIT=0

file PricingTable.tsx

import { MessageInfoBox } from "@/lib/components/ui/MessageInfoBox/MessageInfoBox";

import styles from "./PricingTable.module.scss";

//const PRICING_TABLE_ID = process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID;
//const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;

export const StripePricingTable = (): JSX.Element => {
  return (
    <>
      <div className={styles.info_content}>
        <MessageInfoBox type="info" unforceWhite={true}>
          <div>
            {"The free tier allows you to have"}
            <span className={styles.bold}> 3 brains </span>
            {"and"}
            <span className={styles.bold}> 25 chat credits </span>
            {
              "per month. You can upgrade to unlock more brains, more chat credits and access to premium models."
            }
          </div>
        </MessageInfoBox>
      </div>
      <div className="p-2">
        <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
        <stripe-pricing-table
          pricing-table-id="ID"
          publishable-key="KEY"
        ></stripe-pricing-table>
      </div>
    </>
  );
};

I had to do it that way for it to work, I know it is not correct to do it that way but I don't know why it doesn't recognize it when I have the api in .env

Can someone help me?

dosubot[bot] commented 2 months ago

This is a tough nut to crack, could really use your help on this, @StanGirard.

To continue talking to Dosu, mention @dosu.

QuivrHQ / quivr