mkoenke

[swift violet]

It looks like there isn't an option in the elements options themselves but you would still be able to pass this in when calling create, right?

[final rock]

we do not call create

[swift violet]

Oh because this is react

[final rock]

yeah, we use const paymentElement = elements.getElement('payment') to access the payment element. pretty sure the mode: 'payment' is what creates the payment element

[swift violet]

Is there a specific doc that you were referring to for setting up this payment element? I was not aware that it was possible to get an element without creating it, I may be missing some context

[final rock]

hold on one sec, ill find it

[swift violet]

Alternatively can you send your code for how you mount this element?

[final rock]

sure

  const { amount, currency } = props;

  const stripe = stripePromise;

  const getStripeElements = () => {
    // Waiting for Stripe to load
    if (amount && currency) {
      return (
        <Elements
          stripe={stripe}
          locale={props.intl.locale}
          options={{
            mode: 'payment',
            amount: amount,
            currency: currency,
            paymentMethodCreation: 'manual',
          }}
        >
          <ElementsConsumer>
            {({ stripe, elements }) => (
              <PaymentForm stripe={stripe} elements={elements} {...props} />
            )}
          </ElementsConsumer>
        </Elements>
      );
    } else {
      return null;
    }
  };

  return (
    <>
      <TitleContainer>
        <Title
          type='header'
          copy={formatMessage({
            id: 'paymentPanel.title',
            defaultMessage: 'Payment details',
          })}
        />
      </TitleContainer>
      {getStripeElements()}
    </>
  );
};```

when PaymentForm is rendered, we have the payment element

payment form is massive, but basically we can render ```import React from 'react';

import { CardElement, PaymentElement } from '@stripe/react-stripe-js';
import {
StripeCardElementChangeEvent,
StripeElementStyle,
} from '@stripe/stripe-js';

type StripeElementProps = {
disabled?: boolean;
handleOnChange?: (event: StripeCardElementChangeEvent) => void;
paymentElementEnabled: boolean;
styles: StripeElementStyle;
};

const StripeElement = ({
styles,
disabled,
handleOnChange,
paymentElementEnabled,
}: StripeElementProps) => {
if (paymentElementEnabled) {
return <PaymentElement />;
} else {
return (
<CardElement
onChange={handleOnChange}
options={{
style: styles,
disabled: disabled,
}}
/>
);
}
};

export default StripeElement;

[swift violet]

You should be able to pass in another options hash to the <PaymentElement /> component and that options hash can have any option that is in the create call https://stripe.com/docs/stripe-js/react#element-components

[final rock]

ahhhhh ok, let me try that\

[swift violet]

Unfortunately with it not being in the update call I don't think you can change that after it is initialized but I can put in a request for that

[final rock]

awesome, thats working. Thanks so much for your help