#kevin_code

1 messages ยท Page 1 of 1 (latest)

supple fulcrumBOT
#

๐Ÿ‘‹ 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/1436292476800335912

๐Ÿ“ 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.

clever chasm
#

Without the customer attributes / With the customer attributes

plucky river
#

hey there ๐Ÿ‘‹ looking into your question now

clever chasm
#

Thank you ๐Ÿ˜„

plucky river
#

could you share the customerSessionClientSecret or the customerSessionID please?

clever chasm
#

Of course!
Secret: cuss_secret_TNXRmF4td4Qy2hqRHd2RvXaMk5lgAAMArXbK5t3iojVd9k1
ID: cus_SrJAFioZ1xYb14

plucky river
#

thanks!

#

can you confirm if there are any errors that show up in the console when you render the payment element with the customer session attached?

clever chasm
#

There is no error in the console unfortunately, even loadingError from useEmbeddedPaymentElement returns null :/

#

So IDK what's wrong and how to debug

plucky river
#

hmm yeah seems like a tricky one, consulting with some colleagues on my end

#

ok this seems like something that we'll likely need to spend some time understanding your setup and reproducing the issue, so I'm afraid we'll need you to write in directly to open a case with us

#

just to confirm, are you testing this in a simulator or on an actual mobile device?

clever chasm
#

I'm testing this on an iOS simulator, haven't tried on Android yet

plucky river
#

useEmbeddedPaymentElement is the React Native hook that you're using to mount the element, so we'd expect that to not contain errors for this - but if there were any errors we'd expect them to come up in the actual iOS/Androind code

#

ah ok, interesting - we'd normally expect a simulator to raise any errors that were thrown

clever chasm
#

Yes of course but no error or warning are thrown in the console :/

plucky river
#

hmm yeah that's definitely strange

could you please use the link above to write into us, and if possible, share a complete minimal reproduction of the issue (i.e. a RN project that reproduces the bug but doesn't contain any secret info)?

supple fulcrumBOT
#

We wish we could help, but you need to talk to Stripe support

We can only help on Discord if all of the following are true:

  • ๐Ÿง‘โ€๐Ÿ’ป You must be a developer
  • ๐Ÿ› ๏ธ Your question must be about building a Stripe integration
  • โš™๏ธ Your question must be technical/developer focused
  • โฑ๏ธ You must be available to respond in realtime
  • ๐Ÿ‘ฅ You must be comfortable receiving help in public (this is a public server)

If any of those aren't true please contact Stripe support.

If all of those are true we may have misunderstood your question; please provide more details below.

Note that using an inappropriate button or submitting inappropriate information is a violation of our rules. You will be removed from this server if you repeatedly create invalid threads.

plucky river
#

you can ignore the link in the bot auto-message - the one I shared above is best for this scenario ๐Ÿ™‚

clever chasm
#

Thanks, I'll use it ๐Ÿ˜ƒ

plucky river
#

great, thanks!

clever chasm
#

Oh I've also got a small TypeScript question, maybe if you can help me ๐Ÿ˜ƒ

plucky river
#

sure, let me know!

clever chasm
#

The intent configuration has this type IntentConfiguration where mode is either PaymentMode | SetupMode

So PaymentMode is equal to this

type PaymentMode = {
  /* Amount intended to be collected in the smallest currency unit (e.g. 100 cents to charge $1.00). Shown in Apple Pay, Google Pay, Buy now pay later UIs, the Pay button, and influences available payment methods.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-amount */
  amount: number;
  /*  Three-letter ISO currency code. Filters out payment methods based on supported currency.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-currency */
  currencyCode: string;
  /* Indicates that you intend to make future payments.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-setup_future_usage */
  setupFutureUsage?: FutureUsage;
  /* Controls when the funds will be captured.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-capture_method */
  captureMethod?: CaptureMethod;
  /** Additional payment method options params.
  Seealso: https://docs.stripe.com/api/payment_intents/create#create_payment_intent-payment_method_options */
  paymentMethodOptions?: PaymentMethodOptions;
};

And SetupMode is equal to this

type SetupMode = {
  /*  Three-letter ISO currency code. Filters out payment methods based on supported currency.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-currency */
  currencyCode?: string;
  /*  Indicates that you intend to make future payments.
  Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-setup_future_usage */
  setupFutureUsage: FutureUsage;
};
#

So they have shared params such as setupFutureUsage and currencyCode and for example amount is only useful for Payment intent so I did this

const STRIPE_SETUP_FUTURE_USAGE: Record<
  PotentialPaymentSession['setup_future_usage'],
  IntentConfiguration['mode']['setupFutureUsage']
> = {
  on_session: 'OnSession',
  off_session: 'OffSession',
};
const STRIPE_CAPTURE_METHOD: Record<PotentialPaymentSession['capture_method'], CaptureMethod> = {
  automatic: CaptureMethod.Automatic,
  automatic_async: CaptureMethod.AutomaticAsync,
  manual: CaptureMethod.Manual,
};

    const intentConfigMode: Partial<IntentConfiguration['mode']> =
      intentStrategy === 'payment_intent'
        ? { amount: totalPrice, captureMethod: STRIPE_CAPTURE_METHOD[captureMethod] }
        : {};
    const newIntentConfig: IntentConfiguration = {
      mode: {
        ...intentConfigMode,
        setupFutureUsage: STRIPE_SETUP_FUTURE_USAGE[setupFutureUsage],
        currencyCode: getCurrentCurrency(),
      },
      paymentMethodTypes: supportedPaymentModes,
      confirmHandler: async (paymentMethod, shouldSavePaymentMethod, intentCreationCallback) => {
        // You'll implement this in the "Confirm the payment" section below
      },
    };

But when hovering mode from newIntentConfig , it says that amount should be number and not number | undefined
But we don't need amount for setup intent, what's the best way to fix that TS error? I'm not adding amount for setup intent currently so IDK why this error is shown

#

I've just sent the request BTW ๐Ÿ˜„

plucky river
#

the amount is being inherited from totalPrice, which I don't see in your code - how is this being computed?

clever chasm
#

Oh totalPrice is a number, it's never undefined

#

IDK how to make understand TS that I'm not giving amount in case of setup intent but only for payment intent

#

In Stripe Elements in web context it was more easier for TS to understand this as I could directly give mode attribute

mode?: 'payment' | 'setup' | 'subscription';
#

I can also doing it this way but it adds me 3 constants

const defaultModeAttributes = {
      setupFutureUsage: STRIPE_SETUP_FUTURE_USAGE[setupFutureUsage]!,
      currencyCode: getCurrentCurrency(),
    };
    const paymentMode: PaymentMode = {
      ...defaultModeAttributes,
      amount: totalPrice,
      captureMethod: STRIPE_CAPTURE_METHOD[captureMethod],
    };
    const setupMode: SetupMode = defaultModeAttributes;

    const newIntentConfig: IntentConfiguration = {
      mode: intentStrategy === 'payment_intent' ? paymentMode : setupMode,
      paymentMethodTypes: supportedPaymentModes,
      confirmHandler: async (paymentMethod, shouldSavePaymentMethod, intentCreationCallback) => {
        // You'll implement this in the "Confirm the payment" section below
      },
    };
plucky river
#

It looks like the issue is this part: Partial<IntentConfiguration['mode']>

this TS utility type makes the properties of the type optional, so that's where the undefined is coming from

#

if you 'cast' this using 'as' instead, it should allow you to have the amount be omitted for setup, and not for payment

#

`const intentConfigMode: Partial<IntentConfiguration['mode']> =
intentStrategy === 'payment_intent'
? { amount: totalPrice, captureMethod: STRIPE_CAPTURE_METHOD[captureMethod] }
: {}

const newIntentConfig: IntentConfiguration = {
mode: {
...intentConfigMode,
setupFutureUsage: STRIPE_SETUP_FUTURE_USAGE[setupFutureUsage],
currencyCode: getCurrentCurrency(),
} as IntentConfiguration['mode'],
}`

#

something like this should work^

#

defining the intent config as 'mode'

clever chasm
#

Ah yes, I don't like to force the type with as but good remark about the Partial
I'll check what I can do, thanks a lot, we can close this thread I think, I hope the bug about the customer session client secret / ID can be found ^^

#

How much time do you take to answer the bugs? (usually)

tropic lynx
#

Alternatively if you don't want to cast the type you can omit Partial and try a spread operator:

  mode: {
    ...(intentStrategy === 'payment_intent' 
      ? { amount: totalPrice, captureMethod: STRIPE_CAPTURE_METHOD[captureMethod] }
      : {}),
    setupFutureUsage: STRIPE_SETUP_FUTURE_USAGE[setupFutureUsage],
    currencyCode: getCurrentCurrency(),
  },
  paymentMethodTypes: supportedPaymentModes,
  confirmHandler: async (paymentMethod, shouldSavePaymentMethod, intentCreationCallback) => {},
}```
clever chasm
#

Will try, thanks ๐Ÿ™

#

And do you know how much time it'll take about the issue I created? I'm asking so that I can communicate a date for my team

plucky river
#

We'll respond to you today but the resolution time could depend on whether may need to request more information or engage with internal teams

supple fulcrumBOT
clever chasm
#

Oh okay thanks a lot, perfect, the thread can be closed ๐Ÿ™