cpx-puff_code | Stripe Developers | Page 1

teal archBOT Sep 25, 2024, 12:44 AM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1288300085750534185

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

nerdy-puff_code, 1 day ago, 15 messages

#

brittle ridge Sep 25, 2024, 12:44 AM

#

hello here is the 2 files

#

📎 message.txt 📎 message.txt

frank pilot Sep 25, 2024, 12:48 AM

#

Hmm could you elaborate a bit more on your question?

#

What is the error or issue you are facing?

brittle ridge Sep 25, 2024, 12:49 AM

#

going though the sign in process the user is suppose to be charged 5.99 but it doesnt charge at all and kinda just gets stuck thier

frank pilot Sep 25, 2024, 12:50 AM

#

Okie, which Stripe API do you call and do you see it on https://dashboard.stripe.com/test/logs?

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

#

Suppose you are calling Create Subscription API

brittle ridge Sep 25, 2024, 12:55 AM

#

frank pilot Okie, which Stripe API do you call and do you see it on https://dashboard.stripe...

have to ask my other dev they have the log in

#

'pk_live_51Ow7goA466XWtdBifnrLrOBoMOu6VGECzCQMuMvB5faDbWBClqqQHRMoF1aXEPQVQiDX17j3gbtBtU2wmjdl7rPd002dR4kDFT'

#

this ^

frank pilot Sep 25, 2024, 1:08 AM

#

Well that's the Publishable Key,

#

Not the request that you created a Subscription. It should be req_xxx

brittle ridge Sep 25, 2024, 1:18 AM

#

#

which one?

frank pilot Sep 25, 2024, 1:23 AM

#

nothing looks like your API

brittle ridge Sep 25, 2024, 1:24 AM

#

this is the first thing that popped up for me

frank pilot Sep 25, 2024, 1:24 AM

#

// Create a subscription for the customer
            SubscriptionCreateParams params = SubscriptionCreateParams.builder()
                .setCustomer(customerId) // Customer ID returned from createCustomer
                .addItem(SubscriptionCreateParams.Item.builder()
                    .setPrice("price_1MowQULkdIwHu7ixraBm864M") // PLACEHOLDER IS HERE!!! - Your price ID for $5.99/month plan
                    .build())
                .build();

            Subscription subscription = Subscription.create(params);

#

What is subscription here returned for you?

brittle ridge Sep 25, 2024, 1:26 AM

#

jsut a sec

#

getting other dev

limber viper Sep 25, 2024, 1:28 AM

#

Hey, other dev working on this project here

#

Not exactly sure what you guys are asking for ngl?

#

How can I view the codes after their creation, can I just not?

frank pilot Sep 25, 2024, 1:51 AM

#

We want to know the exact account's secret key being used to create a Subscription like the backend code above

limber viper Sep 25, 2024, 1:55 AM

#

frank pilot nothing looks like your API

You're right, I'm assuming this means it's not being called at all?

frank pilot Sep 25, 2024, 2:08 AM

#

Yes probably? You may want to double check the used secret key

limber viper Sep 25, 2024, 2:08 AM

#

Also

#

Invalid value for createPaymentMethod: card should be an object or element. You specified: null.

#

Getting this

frank pilot Sep 25, 2024, 2:08 AM

#

add some debug log around Subscription subscription = Subscription.create(params); first

#

Is that before the backend code?

limber viper Sep 25, 2024, 2:09 AM

#

Probably yeah

limber viper Sep 25, 2024, 2:09 AM

#

frank pilot Yes probably? You may want to double check the used secret key

So to be absolutely sure

#

Which one of these should be being used in the code

frank pilot Sep 25, 2024, 2:10 AM

#

The secret key in backend, and the publishable key in frontend. But also important this is Live Key. You should use Test key for development

limber viper Sep 25, 2024, 2:13 AM

#

frank pilot The secret key in backend, and the publishable key in frontend. But also importa...

Alright

limber viper Sep 25, 2024, 2:13 AM

#

limber viper Probably yeah

98% sure that error is front end code

frank pilot Sep 25, 2024, 2:15 AM

#

Okie. Then you would want to start debugging frontend first

#

That did it ever send an AJAX request to your backend or not

limber viper Sep 25, 2024, 2:17 AM

#

frank pilot That did it ever send an AJAX request to your backend or not

Also I was a bit confused on the use of this backend code in general

#

Since were also using Firebase for backend

#

And were initially trying to use the Firebase extension

limber viper Sep 25, 2024, 3:37 AM

#

frank pilot Okie. Then you would want to start debugging frontend first

I mean I know what the error is

#

We've been known

#

Nothing is fixing it

frank pilot Sep 25, 2024, 3:38 AM

#

Have you tried putting some breakpoint around the createPaymentMethod code?

limber viper Sep 25, 2024, 3:39 AM

#

idk if he ever sent the error but

teal archBOT Sep 25, 2024, 4:15 AM

#

limber viper Sep 25, 2024, 4:23 AM

#

limber viper idk if he ever sent the error but

oh whoops holy moly

#

I forgot to send it

#

#

It just keeps cycvling different versions of this same error over, and over, and over

#

Coming from right here as well

#

if I make the constant not an object, spews that it should be an object, and that is null

#

if I make it an object, createPaymentMethod says that "card" is missing

subtle basin Sep 25, 2024, 4:25 AM

#

👋 Taking over this thread, catching up now

#

Which line was the error of CardElement not found thrown?

limber viper Sep 25, 2024, 4:31 AM

#

limber viper

When hitting the code shown herw

subtle basin Sep 25, 2024, 4:32 AM

#

Could you share your latest code? I don't have the full picture of your integration with partial code

limber viper Sep 25, 2024, 4:35 AM

#

📎 SignUp.js

#

📎 StripeSubscription.java

#

/* SignUp.css */
.sign-up-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}


h1, h2 {
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  width: 100%;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
}

.cost-breakdown {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* styles.css */
.card-element-container {
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.card-element {
  transition: all 0.2s ease;
}

.card-element:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#

📎 App.js

#

.App {
  text-align: center;
}

.container {
    display: flex;
    font-family: "Aldrich";
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    height: 100vh;
    padding: 20px;
}

.aldrich-regular {
  font-family: "Aldrich", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-link {
  font-family: 'Aldrich';
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
  
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f0f0;
}

.mainContent {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
} 

.footer {
  padding: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

/* App.css or InsideLayout.css */

/* Style for the header containing Back and Logout buttons */
.Back {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: left;
  padding: 10px;
  z-index: 1000; 
}
.Logout {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: left;
  padding: 10px;
  z-index: 1000;
  color:darkred;
}

/* Style for Back button */
.back-button {
  margin-right: 10px;
  top: 0;
  right: 0;
  position: fixed;
}

/* Style for Logout button */
.logout-button {
  margin-right: 10px;
}

/* Ensure the InsideLayout content is not hidden by fixed positioning */
.InsideLayout {
  padding-top: 60px; /* Adjust based on header height */
}

#

this should be any and all relevant code

subtle basin Sep 25, 2024, 4:41 AM

#

Is the error thrown from this line?

const ElementalOfTheCard = { cardElement: elements.getElement(CardElement) };

If so, could you try to log elements.getElement(CardElement) to check if the returned element is empty?

limber viper Sep 25, 2024, 4:41 AM

#

it is, it either returns nothing or null

subtle basin Sep 25, 2024, 4:43 AM

#

Could you put following inside the handleSignUp() function? Will this work?

const stripe = useStripe();
const elements = useElements();

limber viper Sep 25, 2024, 4:48 AM

#

src/SignUp.js
Line 25:20: React Hook "useStripe" is called in function "handleSignUp" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

subtle basin Sep 25, 2024, 4:51 AM

#

Oh right! Forgot that useStripe() can only be used on a React component. Can you try creating a separate React component for CardElement? I suspect the issue is with useElements() returns the elements before CardElement is mounted

#cpx-puff_code