#facerix - Payment Element
sharp cargo
Hello!
how can I customize the fields that appear for e.g. card? I tried passing the fields parameter when I create the <Elements> object, but it looks like it's being ignored
How do you want to customize them exactly?
Does PaymentElement have any kind of callback API I can listen to for events like "onUpdate", i.e. so I know when to enable the "Pay" button?
That's not really how the Payment Element works. If you're displaying the Payment Element the customer should be ready to pay. Can you provide more details?
languid sleet
Hello! Thanks for the reply -- One thing I wanted to do would be to suppress the billing details fields, as we collect them prior to the "Pay" step of our flow. https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-customized_fields suggests this is possible, but I gather it's only when you manually create the element via elements.create(), rather than via the React equivalent.
On the second note, we have a "Pay now" button immediately below the PaymentElement, and when we were using <CardElement>, we could pass it an onChange handler, and control whether that button was disabled or not:
onChange={(changeEvent: StripeCardElementChangeEvent): void => {
if (changeEvent.error) {
setError(changeEvent.error.message);
onValidate(false);
} else {
setError('');
if (changeEvent.complete) {
setFormValues({
...formValues,
brand: changeEvent.brand,
stripePaymentMethodId: 'READY',
});
onValidate(!!formValues.card_holder_name);
}
}
}}
Those same options should still be available in React.
languid sleet
ah, you'd think so, but it's ignoring them
perhaps it's a version problem?
or something about how we're creating the paymentIntent?
sharp cargo
Can you share the code that's setting those properties when the Payment Element is created?
Or are you only changing them in an update?
languid sleet
it's a stripped-down React component at the moment:
const StripePaymentForm = ({ stripe, intent }: { stripe: Stripe; intent: string }): ReactElement => {
const theme: WrenchThemeType = useTheme();
const options: StripeElementsOptions = {
clientSecret: intent,
appearance: {
theme: 'stripe',
variables: {
colorDanger: theme.palette.warning.main,
colorDangerText: theme.palette.warning.contrast,
},
},
fields: {
billingDetails: 'never'
}
};
return (
<Elements stripe={stripe} options={options}>
<PaymentElement />
</Elements>
);
};
FWIW Typescript flags the fields attribute as not existing in the StripeElementsOptions type
sharp cargo
I'm not very familiar with React, but hang on, let me see what I can find...
I will say that fields doesn't exist where you're trying to put it. It's not an Elements option, it's a Payment Element option.
In other words fields does not go in the same object alongside stuff like appearance, which are Elements-wide options, but instead should be passed to the Payment Element specifically.
The options in your code now correspond to this stuff, and fields doesn't exist there: https://stripe.com/docs/js/elements_object/create
languid sleet
ahh, that makes sense
sharp cargo
You need to specify fields here, with these things: https://stripe.com/docs/js/elements_object/create_payment_element
I just don't know how to do that in React.
languid sleet
hot dang, I moved it the the <PaymentElement> and it worked! Thank you! ❤️
sharp cargo
Ah, awesome!
languid sleet
any suggestions on the onChange bit?