#jhon-paymentelement-subscription

1 messages · Page 1 of 1 (latest)

light pendantBOT
#

Hello! We'll be with you shortly. 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.

primal gale
#

Hi

fiery cave
#

@primal gale hello! What is your exactly and clear question? I see you came a few times here in 24 hours so please make sure to write a complete summary of your exact question all in one unique message.

primal gale
#

The examples is very poor to understand how associate payment method, customer and subscription..

#

I'm using stripe elements

#

the documentation show this

return ( <form> <PaymentElement /> <button>Submit</button> </form> ); };

fiery cave
#

Please pause

primal gale
#

it's very poor to understand how associated this submit payment method with my customer...

fiery cave
#

read what I say above: Please try to write a clear and complete end to end summary in one unique message
Please do not write really short sentences giving almost no details. I'm helping a lot of other people in parallel and I need you to help me help you by writing a clear detailed question.

primal gale
#

here you go
The examples is very poor to understand how associate payment method, customer and subscription..
I'm using stripe elements
the documentation show this :
return ( <form> <PaymentElement /> <button>Submit</button> </form> ); };
it's very poor to understand how associated this submit payment method with my customer...

So, I need help how can I associate customer and payment method ?

fiery cave
#

I'm sorry, this is not a question right now at all. All you said twice is "the doc is unclear I need help". I'm really sorry but I do need you to ask real questions with exact code and what's blocking you as a developer writing the code.

#

jhon-paymentelement-subscription

primal gale
#

here you go
The examples is very poor to understand how associate payment method, customer and subscription..
I'm using stripe elements
the documentation show this :
return (
<form>
<PaymentElement />
<button>Submit</button>
</form>
);
};
it's very poor to understand how associated this submit payment method with my customer...

***So, I need help how can I associate customer and payment method ? *** 😢

fiery cave
#

I'm sorry you keep saying the same words and absolutely no information. If I were a mechanic you'd be saying "It's hard to fix my car, my car doesn't work, how do I fix it?"

I do need you to be crisper about the problem.

primal gale
#

can assigne other persona please?

#

you don't help me at all

fiery cave
#

I can't help you, you asked nothing. And I see you've been here 4 times already today with similar vague questions.

#

If you are unable to explain your issue, you might want to hire a freelancer to help you build your integration and write the code for you

primal gale
#

I need other person

fiery cave
#

@primal gale it won't happen. I'm the person that is here. Either you take the time to explain your real issue with exact code and clear questions, or you hire a professional to build this for you.
I'm sorry, but we help dozens of developers here and you have to help us help you. Read what you wrote right now and it boils down to "help".
I'm a developer myself, I can help if you ask a real/clear question

#

I read your previous threads and you asked clearer questions then. Can you try to explain differently what

it's very poor to understand how associated this submit payment method with my customer...
means exactly?

primal gale
#

yes

#

In my checkout UI, when the customer pays for the first time. He doesn't paymet method added, right?

#

so, when my customer pay for second time, I need to add Payment method UI to add payment method to my customer

#

I wa using checkout session in mode setup but this page is other section

fiery cave
#

I'm really sorry I read your questions three times but I don't understand what this means. What do you mean "first time" and "second time" exactly?

primal gale
#

When my customer buys for the first time on my platform

#

when my customer buy and pay for fisrt time, I can add payment method for default but my customer wants change the payment method in my checkout flow

fiery cave
#

Okay I see so you mean I paid you on january 10 and today I just want to change for a different card for future Invoices?

light pendantBOT
primal gale
#

Not necessarily, the idea is that if my customer A wants to pay for a subscription then in my checkout flow (on the same screen) he can change another payment method or keep the same payment method he had previously.

proper shoal
#

Hello! I'm taking over and catching up...

#

To provide an existing customer with the option of using a previously-saved Payment Method when paying you have to build your own UI for it if you're not using Stripe Checkout.

primal gale
#

Thanks, yes

#

its the idea

#

I'm using stripe elements

proper shoal
#

Yep, you need to build this on your end.

primal gale
proper shoal
#

Elements are only for taking new payment info, they don't display existing payment info.

primal gale
#

yes, I know

proper shoal
#

If you want to display existing payment info you need to build the UI you want for that.

primal gale
#

I think the same

#

I woul like how to assciate customer with payment method ?

proper shoal
#

What have you tried that didn't work?

primal gale
#

`const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

function App() {
const options = {
mode: 'subscription',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/.../},
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};`

#

this example, I don't understand how can I associate customer with payment method ?

proper shoal
#

Yeah, you keep saying that. I'm not sure why you think saying that over and over again will change things.

primal gale
#

I don't understand how works subscription and payment method in this example

proper shoal
#

How do you want to associate them?

primal gale
#

the title say:

Collect payment details before creating an Intent

proper shoal
#

Yep.

primal gale
#

the tab is : Create a subscription

proper shoal
#

Yep.

primal gale
#

so, how Collect payment details before create subscription ?

proper shoal
#

You follow that guide.

primal gale
#

this code example

proper shoal
primal gale
#

those lines of code do nothing

proper shoal
#

Woah, let's not jump ahead.

#

Did you have any issues with Step 2?

primal gale
#

no, no issue

#

the step 2 is clear

proper shoal
#

Okay, so in Step 3 it sounds like you're wondering how to associate the Customer there, in that step?

primal gale
#

step 2 is understood

primal gale
proper shoal
#

You don't.

#

The Customer is not involved in Step 3.

#

The Customer doesn't come in until Step 5.

primal gale
#

I may be the only person in the world who doesn't understand step 3.

#

😢

proper shoal
#

What don't you understand about it?

#

I need more details about why you're having trouble with it to help you.

primal gale
#

step 3 only hsow this

proper shoal
#

Yes.

primal gale
#

no more, no action, no events..

proper shoal
#

What action are you expecting?

#

What event are you expecting?

primal gale
#

What is step 3 for?

proper shoal
#

Collecting payment details.

primal gale
#

When I click on the button it doesn't do anything

proper shoal
#

What button?

primal gale
#

how does he do that?

primal gale
proper shoal
#

What button are you clicking on that doesn't do anything?

primal gale
#

<form>
<PaymentElement />
<button>Submit</button>
</form>

proper shoal
#

You can't stop at Step 3 and expect it to work, you need to follow the entire guide all the way to the end and then it will work.

primal gale
#

<button>Submit</button>

proper shoal
#

The button depends on the functionality and code you implement in later steps.

primal gale
#

`.....
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}

const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();

if (!stripe) {
  // Stripe.js hasn't yet loaded.
  // Make sure to disable form submission until Stripe.js has loaded.
  return;
}

setLoading(true);

// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
  handleError(submitError);
  return;
}

// Create the subscription
const res = await fetch('/create-subscription', {
  method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

// Confirm the Intent using the details collected by the Payment Element
const {error} = await confirmIntent({
  elements,
  clientSecret,
  confirmParams: {
    return_url: 'https://example.com/order/123/complete',
  },
});

if (error) {
  // This point is only reached if there's an immediate error when confirming the Intent.
  // Show the error to your customer (for example, "payment details incomplete").
  handleError(error);
} else {
  // Your customer is redirected to your `return_url`. For some payment
  // methods like iDEAL, your customer is redirected to an intermediate
  // site first to authorize the payment, then redirected to the `return_url`.
}

};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button type="submit" disabled={!stripe || loading}>
Submit Payment
</button>
{errorMessage && <div>{errorMessage}</div>}
</form>
);
}`

#

the finl code example, should be this ?

proper shoal
#

We can't provide code reviews here. The best way to know if this code works and does what you expect is to run it in test mode.

primal gale
proper shoal
#

Did you run it in test mode?

primal gale
#

no

proper shoal
#

You should try doing that.

primal gale
#

but if I follow the steps, step 3 (the code) and the last step (the code) are very confusing, they are not the same

#

For that reason I am confused, it is not about running and testing. If the documentation is not clear it causes confusion, I waste your time and I waste my time too 😦

proper shoal
#

Here's the thing: I can't help you if you just tell me something is confusing to you. I can help you with specific questions, though. If you try and run this code in test mode it will either work or it won't. If it works you can ask me about specific parts of it that you're confused about. If it doesn't work you can say "I ran this code and X happened, but I expected Y to happen. Why did X happen?"

#

But if you just write the code out and never run it you're going to be stuck in this limbo where there's nothing but uncertainty.

primal gale
#

ok, thanks!

#

try run no more