unexpected error when trying stripe with apple pay using ionic capacitor

Question

i am using https://github.com/capacitor-community/stripe to integrate in my ionic-angular app with apple pay.

the payload and code looks like below

const Stripe = Plugins.Stripe as StripePlugin;
Stripe.setPublishableKey({ key: 'xxxx' }); //test key
const clientSecret: string = 'xxxx'; //test secret

pay(){
 await Stripe.confirmPaymentIntent({
      clientSecret,
      applePayOptions: {
        // options here
        merchantId: 'merchant.xxx.xxx',
        country: 'US',
        currency: 'USD',
        items: [
          {
            label: 'my desc',
            amount: 1, // amount in dollars
          }
        ]
      },
    })
}

this shows the apple pay sheeet nicely but when i double click to confirm the payment it thorws error that i can see in the xcode console as below

ERROR MESSAGE: {"message":"payment failed: There was an unexpected error -- try again in a few seconds","errorMessage":"There was an unexpected error -- try again in a few seconds"}

i have tried it on device and with live keys as well but no luck

Answer 1

The code below worked for me. Note that it is 1 for $1 but stripe uses 100 for $1.

try {
  const paymentIntent = await this.stripeService.createPaymentIntentOnServer(100);

  const result = await StripePlg.confirmPaymentIntent(
    { clientSecret: paymentIntent.client_secret,
      applePayOptions: {
      merchantId: 'merchant.app.myapp',
      items: [{ label: 'Bread sticks', amount: 1, },],
      currency: 'NZD',
      country: 'NZ', 
    }, 
  });

  // then call finalizeApplePayTransaction with the result to dismiss the UI modal
  StripePlg.finalizeApplePayTransaction({ success: true });
} catch (err) {
  console.log(err);
  StripePlg.finalizeApplePayTransaction({ success: false })
}

// Server
// createPaymentIntentOnServer - this returns the client_secret
const paymentIntent = await stripe.paymentIntents.create({
  amount: paymentAmount, // 100
  currency: 'nzd',
  payment_method_types: ['card'],
  customer: customer.id,  // I use a Stripe Customer here which I create first
  expand: ['invoice'] 
});