fabio.valsecchi

[slate herald]

Hi there 👋 can you tell me more about what you're seeing or aren't seeing when you try that? Are you encountering an error of some sort?

[zealous sigil]

No errors at all, it seems like the paymentMethodOrder configured as above has no effect:

I was expecting to see BACS first instead of CARD

Do you think the type keywords I used are the correct ones? ('bacs_debit', 'card')

[slate herald]

Those look right, do you have a publicly accessible test site where I can take a closer look at how you're handling this?

[zealous sigil]

Unfortunately not, this is still on my localhost only. 😦

[slate herald]

Can you share a code snippet showing how you're trying to set the order then?

[zealous sigil]

I just realized that I'm still using <ElementsConsumer> that was something available in the past. I should probably get rid of that and rely only on <Elements>.

Let me make some changes and I'll get back with a snippet.

Thanks toby!

const withStripe = (props) => {
  const { total, currency, stripeApiKey } = props;

  // SET the local state
  const [stripePromise, setStripePromise] = useState();

  // SET the stripe promise ON MOUNT
  useEffect(() => setStripePromise(loadStripe(stripeApiKey)), []);

  // DO NOT RENDER the component until Stripe is ready
  if (!stripePromise) return null;

  const options = {
    currency,
    mode: 'payment',
    amount: parseFloat(total) * 100,
    paymentMethodOrder: ['bacs_debit', 'card'],
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <Checkout {...props} />
    </Elements>
  );
};

Found the issue, paymentMethodOrder should be passed to PaymentElement, not to Elements.

easy 🙂