#MacDoniel - prefill

1 messages · Page 1 of 1 (latest)

mild knoll
#

Hi there. Where do you want to prefill the email? Do you have your own email field that you add?

modest ledge
mild knoll
#

Gotcha thanks. One moment. Need to check something

#

Checking to see what the React component equivalent is

modest ledge
#

At least typescript seems to think so, defaultValues does not exist in type StripePaymentElementOptions

#

And here's the referenced struct in my node_modules:

export interface StripePaymentElementOptions {
  /**
   * Override the business name displayed in the Payment Element.
   * By default the PaymentElement will use your Stripe account or business name.
   */
  business?: {name: string};

  /**
   * Override the order in which payment methods are displayed in the Payment Element.
   * By default, the Payment Element will use a dynamic ordering that optimizes payment method display for each user.
   */
  paymentMethodOrder?: string[];

  /**
   * Control which fields are displayed in the Payment Element.
   */
  fields?: FieldsOption;

  /**
   * Apply a read-only state to the Payment Element so that payment details can’t be changed.
   * Default is false.
   */
  readOnly?: boolean;

  /**
   * Control terms display in the Payment Element.
   */
  terms?: TermsOption;

  /**
   * Control wallets display in the Payment Element.
   */
  wallets?: WalletsOption;
}
mild knoll
#

So here's how you would pass in those options:

  defaultValues: {
    billingDetails: {
      email: "test@gmail.com",
    },
  },
};

return (
    <form id="payment-form" onSubmit={handleSubmit}>
      <PaymentElement id="payment-element" options={options} />
      <button disabled={isLoading || !stripe || !elements} id="submit">
        <span id="button-text">
          {isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
        </span>
      </button>
      {/* Show any error or success messages */}
      {message && <div id="payment-message">{message}</div>}
    </form>
  );
}```
modest ledge
#

I appreciate this, but it doesn't work for me. Is this a typescript issue I can patch with a type definition?

Type '{ defaultValues: { billingDetails: { email: string; }; }; }' has no properties in common with type 'StripePaymentElementOptions'

# 
react-stripe.d.ts(264, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & PaymentElementProps'
#

I've also tried @ts-ignore to remove the type error, but the option does not seem to get passed to the payment element. Is this functionality not available in the react api at all?

mild knoll
#

Ah ok I see. Yeah I'm not a typescript expert, but you should be able to patch with a type definition

modest ledge
#

No worries, thanks for your help!

mild knoll
#

Of course!

modest ledge
#

Hi, just a followup on this. I've made it work temporarily, but the "email" field in bank transfer does not actually get pre-filled, whereas "country" and "postal code" in card do get pre-filled. Does the bank transfer support pre-filling in the first place?

crimson tree
#

👋 codename_duchess had to head out, but give me a minute and I'll take a look

crimson tree
#

Sorry I missed this - just to clarify, you don't see any email populated in the UI at all when you attempt to prefill it?

modest ledge
#

Yes, even though I see other fields pre-filled

#

I'm trying settings like this:

    const e = elements.create("payment", {
      defaultValues: {
        billingDetails: {
          email: "test@gmail.com",
          address: {
            country: "United Kingdom",
            postal_code: "KY16 8BB"
          }
        }
      }
    });
    e.mount("#test");
crimson tree
#

Let me test something out real quick

#

Can you share a Setup Intent ID with me? I'm not able to reproduce on my end so trying to see what's different

modest ledge
#

Sure, which ID do you mean

#

pi_3LHxiZBRLPivEsde2xAp72aP ?

crimson tree
#

Yup! that works

#

Sorry I was mixing up some other threads and said setup intent instead of payment intent

#

Can finally reproduce it - yeah I think this is a bug (especially since I can get email prefilling to work with other payment method types)

#

Do you mind writing into support (support@stripe.com) and mentioning my discord handle (karbi)

#

That way I can let you know one it's been fixed?

modest ledge
#

Sure, that's great, thanks!

crimson tree
#

Let me know as soon as you right in so I can find it on my end