In my application I have flow where user needs to add payment method and then it’s charged later in future.

So basically what I’m doing is that frontend is pinging aplication backend to create stripe setup_intent:

 def setup_intent
    if current_account.stripe_id.blank?
      render json: { data: nil, status: 'No customer ID found' }, status: :not_found
      return
    end

    options = {
      customer: current_account.stripe_id,
    }

    if params[:payment_method_type].present?
      options[:payment_method_types] = [params[:payment_method_type]]
    else
      options[:automatic_payment_methods] =  { enabled: true }
    end

    setup_intent = Stripe::SetupIntent.create(options)

    data = {
      client_secret: setup_intent.client_secret,
      id: setup_intent.id,
    }

    render json: { data: data, status: "success" }, status: :ok
  rescue Stripe::StripeError => e
    render json: { data: nil, status: "Error: #{e.message}" }, status: :unprocessable_entity
  end

With backend response frontend get client_secret which is then used to create PaymentElement available in stripe.js:

        fetch('http://localhost:3000/api/v2/payment_methods/setup_intent', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${bearerToken}`
            }
        })
        .then(response => response.json())
        .then(response => {
            const elements = stripe.elements({
                clientSecret: response.data.client_secret,
                loader: 'auto',
            });

            // https://docs.stripe.com/js/elements_object/create_payment_element
            const paymentElement = elements.create("payment", {
                layout: "auto",
            });

            paymentElement.mount('#payment');

            document.getElementById('submit').addEventListener('click', async function(event) {
                // https://docs.stripe.com/js/setup_intents/confirm_card_setup
                const response = await stripe?.confirmSetup({
                    elements,
                    redirect: 'if_required',
                    confirmParams: {
                        return_url: 'http://localhost:3000',
                    },
                });

                if (!!response?.error) {
                    alert(response.error.message);
                    return;
                }
            })
        });

Thing is that on one screen of my application I need PaymentElement which will save only card as payment options and on another one only paypal and on one only apple pay. Everyting is working fine for card and paypal but I’m stuck with apple pay.

For example when I want to display only card in PaymentElement I’m using following url:

http://localhost:3000/api/v2/payment_methods/setup_intent?payment_method_type=card

and for paypal:

http://localhost:3000/api/v2/payment_methods/setup_intent?payment_method_type=paypal

But when I want to display apple pay:

http://localhost:3000/api/v2/payment_methods/setup_intent?payment_method_type=apple_pay

I got error:

{
    "data": null,
    "status": "Error: The payment method type "apple_pay" is invalid. See https://stripe.com/docs/api/setup_intents/create#create_setup_intent-payment_method_types for the full list of supported payment method types. Please also ensure the provided types are activated in your dashboard (https://dashboard.stripe.com/account/payments/settings) and your account is enabled for any features that you are trying to use."
}

If I don’t send payment_method_type query string to route, backend will create setup_intent with automatic_payment_methods: {enabled: true} and initiating PaymentElement with that client_secret apple pay is showing fine.