#moray-groop

1 messages · Page 1 of 1 (latest)

slim valleyBOT
muted schooner
#

👋 happy to help

timid gyro
#

Hi, thanks for your time. It seems that the request is a problem in the client library, I don't think it hits your API

muted schooner
#

Every time I try to create a payment I get "There was an unexpected error -- try again in a few seconds"./

#

could you please elaborate about this some more?

timid gyro
#

I've got the CardField element which is validating the card data fine, but when I submit the form and call createPaymentMethod, the response is always "There was an unexpected error"

muted schooner
#

could you please share a code snippet so I could have an idea how you're implementing?

timid gyro
#

It's split into two files

boreal crown
timid gyro
#

Payment.tsx

export const Payment = ({ paymentDetails }) => {
  const onSubmit = async () => {
    const stripeResponse = await  stripe.createPaymentMethod({
      paymentMethodType: 'Card',
    });
    console.log('onProcess', stripeResponse); // this is where I see the error message
    if (stripeResponse.error) // Handle
    submitPaymentRequestToApi(id, stripeResponse.paymentMethod.id); // Sends the details to our API
  };
  return (
    <PaymentView paymentDetails={paymentDetails} onSubmit={onSubmit} />
  );
};
boreal crown
#

thanks! can you share much more like, like the complete component hierachy and how this Payment component is used in its parent?

#

and the contents of the PaymentView component

timid gyro
#

PaymentView.tsx

export const PaymentView = ({ paymentDetails, onSubmit }) => {
  const stripe = useStripe();

  useEffect(() => {
    async function initialize() {
      await initStripe({
        publishableKey: Config.REACT_APP_STRIPE_PK,
        stripeAccountId: paymentDetails.stripeAccount,
      });
    }
    initialize().catch(console.error);
  });

  return (
    <View>
      <CardField
        style={styles.cardField}
        postalCodeEnabled
        onCardChange={} // A validation function to enable/disable the submit button
      />
      // ... the rest of the form
      <Button title='Pay' onPress={onSubmit} />
    </View>
  );
};
boreal crown
#

to be clear the problem here is likely that the library can't find the CardField (it automatically looks for it when you call createPaymentMethod so it can pull the card details from there), and it highly depends on how you set up your app, how you use the StripeProvider, and so on, so it really needs the full context of your app to say much

timid gyro
#

I'm using initStripe instead in PaymentView

boreal crown
#

feels to me like the problem here is you initialise Stripe inside the child component PaymentView but try to use it in the parent

timid gyro
#

I thought that might be the case, but I'd seen other issues where the CardField doesn't work if initStripe is not called in the same component

#

Or does it need to be called in both?

boreal crown
timid gyro
#

It's a bit awkward with the component structure but I can try. We can't use StripeProvider at the top level as it needs to be initialised with stripeAccountId which in our case may be different for each transaction