Khalid Al-Awady | Stripe Developers | Page 1

azure pewterBOT Jun 21, 2023, 5:09 PM

#

opaque violet Jun 21, 2023, 5:09 PM

#

Hey there

#

There are various reasons that this might happen as different Payment Method Types have different requirements and then it also depends on how you create the SetupIntent and such.

#

Are you using automatic_payment_methods or setting payment_method_types when you create the SetupIntent?

solemn mason Jun 21, 2023, 5:10 PM

#

ok so I've created the SetupIntent as such

params := &stripe.SetupIntentParams{
        Customer:           stripe.String(c.GetString(AuthedAccountStripeID)),
        Usage:              stripe.String("off_session"),
        PaymentMethodTypes: []*string{stripe.String("card"), stripe.String("us_bank_account"), stripe.String("ideal")},
        PaymentMethodOptions: &stripe.SetupIntentPaymentMethodOptionsParams{
            USBankAccount: &stripe.SetupIntentPaymentMethodOptionsUSBankAccountParams{
                VerificationMethod: stripe.String("instant"),
            },
        },
    }

opaque violet Jun 21, 2023, 5:10 PM

#

Also if you have an example I can look at then that might be easier.

solemn mason Jun 21, 2023, 5:11 PM

#

and if you want I can provide the response. For some reason the US Bank Account option is not showing up and it only defaults to cards

opaque violet Jun 21, 2023, 5:11 PM

#

Can you give me the SetupIntent ID?

solemn mason Jun 21, 2023, 5:12 PM

#

sure thing seti_1NLSw7KjI0M1O6BO5xgN1cAZ

opaque violet Jun 21, 2023, 5:13 PM

#

Thanks looking

#

Can you show me how you are rendering Payment Element?

solemn mason Jun 21, 2023, 5:16 PM

#

of course

<PaymentElement
      options={ {
        defaultValues: {
          billingDetails: {
            name: customer.billingName(),
            email: customer.billingEmail(),
            address: customer.billingAddress(),
          },
        },
        fields: {
          billingDetails: {
            address: 'never',
          },
        },
        terms: termOptions,
      } }
      onChange={ event => {
        setPaymentType({ type: event.value.type, changed: false });

        if (event.complete) {
          setPaymentType({ type: event.value.type, changed: true });
        }
      } } />

opaque violet Jun 21, 2023, 5:18 PM

#

Hmm strange. All this looks fine to me....

azure pewterBOT Jun 21, 2023, 5:18 PM

#

opaque violet Jun 21, 2023, 5:20 PM

#

Can you show me a screenshot of exactly what you see?

solemn mason Jun 21, 2023, 5:22 PM

#

The first image is showing a loading state before I assume failing and then reverting to card only

opaque violet Jun 21, 2023, 5:23 PM

#

Is there a URL where I can repro?

opaque pumice Jun 21, 2023, 5:27 PM

#

👋 hopping in here as well

#

You shared your code for rendering PaymentElement, but can you also share the options you're passing in to intialize <Elements>?

#

Deleted that message since it had your personal email in there

solemn mason Jun 21, 2023, 5:35 PM

#

ah no worries, its all garbage data for testing

#

as for the Element render

<Elements stripe={ getStripe() } options={ {
      mode: 'setup',
      currency: 'usd',
      payment_method_types: CONFIG.STRIPE.ENABLED_PAYMENT_METHODS,
      appearance: {
        labels: 'above',
        // theme: 'none',
        variables: {
          colorPrimary: '#51a33d',
          borderRadius: '2px',
          focusBoxShadow: '0px',
          focusOutline: 'none',
          fontFamily: '"Source Sans Pro", sans-serif',
          spacingGridRow: '16px',
        },
        rules: {
          '.Input': {
            border: '1px solid #ccc',
            padding: '10px',
            fontSize: '13px',
            color: '#333',
          },
          '.Input:focus-visible': {
            outline: 'none',
          },
          '.Input:focus': {
            boxShadow: 'none',
            borderColor: '#51a33d',
          },
          '.Input--empty': {
            boxShadow: 'none',
          },
          '.Input--invalid': {
            borderColor: '#D0404B',
          },
          '.Label': {
            textTransform: 'uppercase',
            marginBottom: '5px',
            fontWeight: '600',
            color: '#333',
            lineHeight: '14px',
            fontSize: '11px',
          },
        },
      },
    } }>
      { props.children }
    </Elements>

where getStripe is a function that returns window.stripe

opaque pumice Jun 21, 2023, 5:38 PM

#

When you print CONFIG.STRIPE.ENABLED_PAYMENT_METHODS what do you get?

solemn mason Jun 21, 2023, 5:41 PM

#

["card", "us_bank_account"]

#

so I removed card entirely from the config and the PaymentElement no longer renders...

opaque pumice Jun 21, 2023, 5:45 PM

#

Yeah don't remove card

#

The issue here is that us_bank_account isn't currently supported with the deferred flow (we call that out here https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=setup#enable-payment-methods)

#

If you want to be added to the beta you should write in and request access

solemn mason Jun 21, 2023, 5:50 PM

#

ok so if I want us_bank_account enabled then I need to go through the payment intent work flow, is that correct?

opaque pumice Jun 21, 2023, 5:51 PM

#

You can still use Seupt Intents, you just need to provide the Setup Intent client secret up-front when you render Elements (like this https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements#collect-payment-details)

solemn mason Jun 21, 2023, 5:56 PM

#

I'm sorry I'm a bit confused, the current setup for SetupIntents is correct but because us_bank_account isn't currently supported I cannot use it. If I were to provide the Setup Intent client secret then I would (I assume) still have the same issue?

opaque pumice Jun 21, 2023, 6:01 PM

#

us_bank_account isn't supported when you provide options like mode, currency, and payment_method_types. We call this the deferred flow, and it specifically doesn't support us_bank_account

#

If you were to provide client_secret in options like I shared in the doc then that IS supported by us_bank_account

#Khalid Al-Awady