Setup for future payments with Google Pay and Apple Pay

[saboradu94]

Is your feature request related to a problem? Please describe. In our Ionic 5 + Capacitor app, we can't seem to make Google Pay and Apple Pay work and have customers use those payment options to set up their account, using a setupIntent. It is possible to charge the customer an upfront amount and the payment method will get saved, but that is not feasible in our use case.

Describe the solution you'd like We want to be able to provide our customers the option to set up their accounts using Google Pay and Apple Pay, without charging them an amount upfront and to have the ability to charge them after that, using those payment methods, when a certain event happens.

Describe alternatives you've considered We tried Stripe Elements, embedded stripe form, and this capacitor-community/stripe plugin. We believe this plugin is the best way to eventually achieve what we want, but in case it's not, we are looking for any suggestions that could help us.

[DwieDima]

Also would love to see that feature. If already possible, this could be added to the docs.

[DwieDima]

@rdlabo is this already possible or does it need to be implemented?

[krisloekkegaard]

We are doing what you are describing using this plugin, but we had to slightly modify the Android part of the plugin. I submitted a PR #216 with the change required.

If that is merged, you can just pass your setup intent client secret as you would with a payment intent. Note that the setup intent passed to the functions below we create on the server side.

For Apple Pay:

async confirmApplePaySetup(setupIntent: SetupIntent, currency: string): Promise<SetupIntent> {
  await CapacitorStripe.createApplePay({
    paymentIntentClientSecret: setupIntent.client_secret,
    currency,
    countryCode: 'US', // Your Stripe account country
    merchantIdentifier: 'merchant.com.company.xyz', // Your merchant identifier
    paymentSummaryItems: [{ label: 'Payment verification', amount: 0 }],
  });

  const result = await CapacitorStripe.presentApplePay();

  if (result.paymentResult !== ApplePayEventsEnum.Completed) {
    throw new Error('Apple Pay failed');
  }

  return setupIntent;
}

And for Google Pay:

async confirmGooglePaySetup(setupIntent: SetupIntent, currency: string): Promise<SetupIntent> {
  await CapacitorStripe.createGooglePay({
    paymentIntentClientSecret: setupIntent.client_secret,
    currency,
  });

  const result = await CapacitorStripe.presentGooglePay();

  if (result.paymentResult !== GooglePayEventsEnum.Completed) {
    throw new Error('Google Pay failed');
  }

  return setupIntent;
}

[DwieDima]

@krisloekkegaard wow thank you for sharing this!

[saboradu94]

@krisloekkegaard Will absolutely give this a try and see if it solves the problem for us! Thanks a lot!

[krisloekkegaard]

To those following here, PR #216 has been merged and version 4.0.1 was released, which now supports setup intents for both Google and Apple Pay using the approach I outlined above. Thank you @rdlabo for the quick response 🙏

[rdlabo]

Thank you very much for your great work. Thanks to everyone, this plugin has taken a step forward. Have a great tomorrow everyone🎉