What should be the paymentMethod for apple_pay or google_pay in Strip ExpressCheckoutElement

Question

I am using ExpressCheckoutElement

<ExpressCheckoutElement
          options={{
            wallets: {
              googlePay: 'never',
              applePay: 'always',
            },
            buttonType: {
              applePay:'donate',
            },
            paymentMethodOrder: ['googlePay', 'applePay'],
            layout: {
              maxRows: 1,
              maxColumns: 1,
              overflow: 'auto',
            },
          }}
          onConfirm={onConfirm}
        />

And in my onConfirm function I am creating and confirming a paymentIntent But to confirm a paymentIntent I need a paymentMethodId (the ones that start with "pm_")

const onConfirm = useCallback(
async (event) =\> {
if (!stripe) {
return
}
// console.log('', event)
// return

      createPaymentIntent(paymentIntentInput, {
        onSuccess: async (data) => {
          const { client_secret: clientSecret } = data
    
          confirmPayment(
            {
              payment_method: //Payment method needed here!!!
            },
            {
              onSuccess: async ({ status, message, success }) => {
             
              },
              onError: (err) => {
                
              },
            }
          )
        },
        onError: (err) => {
        
          })
        },
      })
    },
    [
      stripe,
      elements,
      user,
      amount,
      applicationFeeAmount,
      currency,
      paymentMethod,
    ]

)

I have tried to create one like I was doing for card payments

const { paymentMethod } = await stripe.createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: {
email: getValues('email'),
name: `${getValues('firstName')} ${getValues('lastName')}`,
},
})

Like this one but this is for cards not for Google pay or apple pay, I need give the cardElement to it which I don't have when using ExpressCheckoutElement which I am using for apple and google pays

I have also tried not to send a payment method but it brings an error "You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method."

Even with automatic_payment_methods: { enabled: true }, in my Elements component

Answer 1

To create a payment method in Express Checkout Element, you can follow the guide here: https://stripe.com/docs/elements/express-checkout-element/accept-a-payment#create-pm

More specifically:

expressCheckoutElement.on('confirm', async (event) => {
  ...

  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create a PaymentMethod using the details collected by the Express Checkout Element
  const {error, paymentMethod} = await stripe.createPaymentMethod({
    elements,
    params: {
      billing_details: {
        name: 'Jenny Rosen',
      }
    }
  });

  ...
}

Alternatively, I'd recommend using Payment Element (a single integration) for all the payment methods including cards, Apple Pay, Google Pay and other local payment methods instead of integrating the wallet payment separately: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&client=react