#binod-elements-help
frozen heath
sure
I am using @stripe/react-stripe-js library to load PaymentElement
but it doesnt render
Getting this error
you there?
silent ravine
Yes I am there, there are many other people to help not just you please be patient it's been a few minutes and I am looking
Looks like the first error message is pretty clear/specific and says you didn't pass a client secret, or not a valid one at least. So that's the part you need to debug: log that client secret and make sure it's correct
frozen heath
I have a client_secrete
in console
it's working with CardElement
but not with PaymentElement
silent ravine
The error message is clear though. It says you don't have a valid client secret
Maybe you get the client secret back too late? Can you try hardcoding it in your code? Does it work?
frozen heath
` try {
const subscription = await stripe.subscriptions.create({
customer: customerId,
items: [
{
price: priceId,
},
],
payment_behavior: "default_incomplete",
expand: ["latest_invoice.payment_intent"],
});
console.log("Sbus===>", subscription);
res.send({
subscriptionId: subscription.id,
clientSecret: subscription.latest_invoice.payment_intent.client_secret,
});
} catch (error) {
return res.status(400).send({ error: { message: error.message } });
}`
This is how im sending client_secret to frontend, am I missing anything here?
even hard code doesnt work
??
silent ravine
I mean hardcoding would 100% work if you put the right client secret
If it doesn't then you aren't running the code you think you are
what's your client-side code?
frozen heath
`import React, { useState } from "react";
import {
useStripe,
useElements,
PaymentElement,
} from "@stripe/react-stripe-js";
import { withRouter } from "react-router-dom";
const CheckoutForm = ({ location }) => {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState(null);
// const [clientSecret] = useState(location.state.clientSecret);
const clientSecret =
"pi_3L0T8iHsW9ET26Jg1kbbVMB2_secret_TzPc2HysuLe1nYx54JYavDREa";
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
const { error } = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
clientSecret,
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
setErrorMessage(error.message);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
console.log({ clientSecret });
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Submit</button>
{/* Show error message to your customers */}
{errorMessage && <div>{errorMessage}</div>}
</form>
);
};
export default withRouter(CheckoutForm);
`
am I missing something here?
silent ravine
Did you ead our docs? https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#add-and-configure-the-elements-provider-to-your-payment-page
It's completely different from the code you shared
I don't see you set the client secret anywhere in the React element
const options = {
// passing the client secret obtained in step 2
clientSecret: '{{CLIENT_SECRET}}',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
}```I have it in src/index.js
silent ravine
sure and my guess is that the clientSecret is not set properly on page load
try hardcoding it there
frozen heath
yeah, hardcoded client_secret worked. But, client_secret is dynamic right? it changes on every intent?
silent ravine
correct, but that's a good way to understand the issue
basically you are not initializing the client secret at the right time and you were looking at the wrong code
you need to figure out a way to get the client secret ready/available before the code in src/index.js runs
frozen heath
oh okay, also how do I enable Ideal payment?
silent ravine
frozen heath
not working, My intent is subscription creation
silent ravine
iDEAL doesn't work with Subscriptions for now
silent ravine
it only works for the collection_method: 'send_invoice' flow which is different
frozen heath
does it support Apple pay?
silent ravine
yes
frozen heath
how?
silent ravine
you're using PaymentElement, it will automatically render all supported payment methods. For Apple Pay you need to register the domain. Make sure to read our docs carefully, the main doc for accepting a payment covers this here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#apple-pay-and-google-pay
silent ravine
the Submit button is your own code right?
silent ravine
the submit button is yours right? return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button disabled={!stripe}>Submit</button> {/* Show error message to your customers */} {errorMessage && <div>{errorMessage}</div>} </form> )
like there's a <button> here and it's your code controlling it. You can add text before it if you want
frozen heath
I mean to replace that text above Submit button
that 'Nova Automotive' part, specifically
silent ravine
that is specific to your account name
You can disable the whole text https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-terms-card but you can't tweak the wording (other than change your account's info).
I have to run but @muted bear is going to take over
muted bear
👋
muted bear
yup!
frozen heath
muted bear
does what koopajah said make sense? You can either disable the whole text box, but you can't have that text box with your own custom text entirely
frozen heath
oh okay, so how do I disable whole text box?
muted bear
It was linked above already - https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-terms. You'd set the terms you want to disable to 'never'
frozen heath
`const stripe = useStripe();
const elements = useElements();
var paymentElement = elements.getElement("payment");
paymentElement.update({ terms: "never" });`
like this?
muted bear
No, It's be more like
paymentElement.update({ terms: {card: "never"} });
frozen heath
it doesnt work
muted bear
Hmmm. That's strange that it's not working with the update, but try passing it in during creation instead:
var paymentElement = elements.create("payment",{ terms: {card: "never"} });
muted bear
Gotcha - give me a second to check how to do this in react
frozen heath
sure
also confirmParams: { return_url: "https://example.com/order/123/complete", },
is that a success_page_url?
inside strip.confirmPayment()
??
muted bear
Yes, that's the success page URL
frozen heath
okay, did you see the react element?
muted bear
Still looking - sorry, I'm not a react expert and it's busy in the channel so it's just taking a bit longer
frozen heath
No worries. Please let me know if you find a. Solution