createPaymentSheet does not return

[ChurikiTenna]

Platform

• [✅ ] Web
• [ ] iOS
• [ ] Android

Describe the bug When I call createPaymentSheet, it does not return anything.

To Reproduce Steps to reproduce the behavior: Call startPayment on the code below

import Stripe from 'stripe';
import { Stripe as Stripee, PaymentSheetEventsEnum } from '@capacitor-community/stripe';

export const myStripe = async ({
    email
}: {
    email: string
}) => {

    const secretKey = '<my secret key>'
    const publishableKey = '<my publishable key>''
    const stripe = new Stripe(secretKey, {
        apiVersion: '2022-11-15',
        httpClient: Stripe.createFetchHttpClient(),
    });
    async function createCustomer() {
        const params: Stripe.CustomerCreateParams = {
          description: email,
          email: email
        };
        const customer: Stripe.Customer = await stripe.customers.create(params);
        console.log('createCustomer',customer.id);
        return customer.id
      }
      async function createEphemeralKey(customerId: string) {
        const params: Stripe.EphemeralKeyCreateParams = {
            customer: customerId
        }
        const options: Stripe.RequestOptions = {
            apiKey: secretKey,
            apiVersion: '2022-11-15'
        }
        const key: Stripe.EphemeralKey = await stripe.ephemeralKeys.create(params, options)
        console.log('createEphemeralKey',key.id);
        return key.id
      }
      async function createIntent(amount: number, customerId: string) {
        const params: Stripe.PaymentIntentCreateParams = {
            customer: customerId,
            amount: amount,
            currency: 'jpy'
        }
        const intent: Stripe.PaymentIntent = await stripe.paymentIntents.create(params)
        console.log('createIntent',intent.id);
        return intent.id
      }
      await Stripee.initialize({
        publishableKey: publishableKey
        })
      Stripee.addListener(PaymentSheetEventsEnum.Completed, () => {
        console.log('PaymentSheetEventsEnum.Completed');
      });

    return {
        startPayment: async (amount: number) => {
            var customerId = await createCustomer()
            var ephemeralKey = await createEphemeralKey(customerId)
            var paymentIntent = await createIntent(amount,customerId)

            console.log('createPaymentSheet')
            try {
                await Stripee.createPaymentSheet({
                    paymentIntentClientSecret: paymentIntent,
                    customerId: customerId,
                    customerEphemeralKeySecret: ephemeralKey,
                }).catch((e) => {
                    console.log('createPaymentSheet.error',e)
                }).then(() => {
                    console.log('createPaymentSheet.done')
                });
                console.log('presentPaymentSheet')
                const result = await Stripee.presentPaymentSheet();
                console.log('result',result)
                if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
                    // Happy path
                }
            } catch(e) {
                console.log('Stripee',e)
            }
        }
    }
}

On console, there is nothing shows up after createPaymentSheet. Neither createPaymentSheet.error or createPaymentSheet.done.

Expected behavior Show a payment sheet.

[rdlabo]

Thanks for the issue. Did you install @stripe-elements/stripe-elements and difined?

https://stripe.capacitorjs.jp/docs/vanilla-js

[rdlabo]

This Issue is closed because the information has not been updated. Thank you.

[roblog]

Try Stripee.initialize() without the "await". Other than that your code works for me on Android but not Web.