vineet_api

[timid ravine]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1356375171862368397

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

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.

• vineet_api, 1 hour ago, 3 messages

[astral tiger]

Hi there

[shut dove]

Hello

[astral tiger]

It should be one of the options for the ExpressCheckoutElement. Could you share that part of your code?

[shut dove]

const options = {
    applePay: {
      deferredPaymentRequest: {
        paymentDescription: 'My deferred payment',
        managementURL: 'https://example.com/billing',
        deferredBilling: {
          amount: 2500,
          label: 'Deferred Fee',
          deferredPaymentDate: new Date('2026-01-05'),
        },
      },
    },
  };
...

 <ExpressCheckoutElement
          onConfirm={(event) => handleConfirm(event.billingDetails, event)}
          onClick={handleClick}
          options={options}
        />

Where it gives me an error

Type '{ applePay: { deferredPaymentRequest: { paymentDescription: string; managementURL: string; deferredBilling: { amount: number; label: string; deferredPaymentDate: Date; }; }; }; }' has no properties in common with type 'StripeExpressCheckoutElementOptions'.

And when I look at the definition of StripeExpressCheckoutElementOptions I see

export interface StripeExpressCheckoutElementOptions {
  /**
   * Manually sets the height of the buttons shown.
   */
  buttonHeight?: number;

  /**
   * Controls the color of each button.
   */
  buttonTheme?: ButtonThemeOption;

  /**
   * Specifies the type of each button.
   */
  buttonType?: ButtonTypeOption;

  /**
   * Specifies how buttons should be laid out in relation to each other.
   */
  layout?: LayoutOption;

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

  /**
   * Control payment method display in the Express Checkout Element.
   */
  paymentMethods?: ExpressCheckoutPaymentMethodsOption;

  /**
   * @deprecated
   * Use `paymentMethods` instead.
   *
   * Control wallets display in the Express Checkout Element.
   */
  wallets?: ExpressCheckoutWalletsOption;
}

I see paymentMethods has applePay as an option under it but it only lets me set 'always', 'auto' and 'never' but there is no option for 'deferredPaymentRequest'

export type ExpressCheckoutPaymentMethodOptionWithAlways =
  | 'always'
  | ExpressCheckoutPaymentMethodOption;
export type ExpressCheckoutPaymentMethodOption = 'auto' | 'never';

export type ExpressCheckoutPaymentMethodsOption = {
  amazonPay?: ExpressCheckoutPaymentMethodOption;
  applePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
  googlePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
  link?: ExpressCheckoutPaymentMethodOption;
  paypal?: ExpressCheckoutPaymentMethodOption;
};

[astral tiger]

Hm, I see. Give me a few more minutes

I think you can ignore the type error in this case. When you run this, is the ExpressCheckoutElement rendered on the page?

[shut dove]

let me confirm

oh okay yeah i guess it works if I ignore the error

Very interesting - my end goal is to make the $50 look more like a hold and less like something that will be charged right away. Do you have any other ideas on how I can do that with my current approach?

[astral tiger]

That's really it, unfortunately. You could make your description more detailed so when a customer taps on the "Deferred fee" line, they'll see more details

[shut dove]

Okay thank you for the help!