rares-m_api

[stone forge]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1232306013655535639

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[celest socket]

This is the code we use, is there a way to get the payment method id from here

import { useState } from 'react';
import { useStripe } from '@stripe/stripe-react-native';
import Toast from 'react-native-toast-message';

import { useStore } from './useStore';
import { useLegacyEffect } from './useLegacyEffect';

export const usePaymentSheet = () => {
  const [loading, setLoading] = useState(false);
  const {
    userStore: { updateCurrentUser },
    paymentStore: { createSetupIntent, addCard, getPaymentMethod },
  } = useStore();
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  const initializePaymentSheet = async () => {
    setLoading(true);
    const setupIntentResponse = await createSetupIntent();

    if (!setupIntentResponse) return;

    const {
      intent: { customer, ephemeralKey, setupIntent },
      stripeCustomerId,
    } = setupIntentResponse;

    updateCurrentUser({ stripeCustomerId });

    const { error } = await initPaymentSheet({
      merchantDisplayName: 'Encore Inc',
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      setupIntentClientSecret: setupIntent,
      returnURL: 'https://buyencore.com',
    });

    if (error) {
      Toast.show({ type: 'error', text1: error.message });
    }
    setLoading(false);
  };

  const onTriggerPaymentSheet = async () => {
    const result = await presentPaymentSheet();

    // fetch payment method after payment sheet is presented in case user removes the card
    // we need to update the UI to reflect that, and remove the card from the user entity
    const payment = await getPaymentMethod();
    if (!payment) {
      updateCurrentUser({ card: undefined });
    }

    if (result.error) {
      Toast.show({ type: 'error', text1: result.error.message });
    } else {
      addCard();
    }
  };

  useLegacyEffect(() => {
    initializePaymentSheet();
  });

  return { onTriggerPaymentSheet, loading, initializePaymentSheet };
};

[violet arrow]

hi there!

I also want to use the native stripe sheet to change / add new payment methods.
are you aware of the CustomerSheet? https://docs.stripe.com/elements/customer-sheet?platform=react-native

[celest socket]

No wasn't aware of this, looks like what we need, we need to manage all the saved payment methods

Are there any implementation examples / guides ?

[violet arrow]

you'll need to contact Stripe support to get added to the beta, and then you'll be able to access the technical documentation related to this

to request access: https://support.stripe.com/contact

[celest socket]

Hmm ok, isn't there any other solution for react native then ? I will contact suppot for the beta program but we're in a tight schedule unfortunately