#naitik0406_65706
stark wharf
please help me
swift granite
hi, could you share more context like the full code of the component you wrote and the exact version of the stripe-react-native library you're using?
stark wharf
Yes sure give me 1 min
Installed this library with version
"@stripe/stripe-react-native": "^0.35.1",
In root file added initStripe in use effect
useEffect(() => {
initStripe({
publishableKey: "pk_test_51NNaAfSAa6CbwA4IeNXvcA9SQJvl4dqt9sVYdS30AihpOwfRGhBHRvm9QSeUlIdLKjLzdpEniVCESKufTWvkxPFZ00pIys0mos",
});
}, []);
In otherscreen (checkout screen) added cardfield
<CardField
postalCodeEnabled={true}
placeholders={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
onCardChange={(cardDetails) => {
console.log('cardDetails', cardDetails);
}}
onFocus={(focusedField) => {
console.log('focusField', focusedField);
}}
/>
swift granite
can you share the full code?
like the complete contents of the "otherscreen.tsx" file or whatever
stark wharf
Yes sure
swift granite
also, did you run pod install in the ios/ directory of your project after installing the library?
stark wharf
honest axleBOT
swift granite
thanks , will look. Also, did you run pod install in the ios/ directory of your project after installing the library?
stark wharf
Getting this error in android as well
first run in android then we will check on iOS
android screenshort
swift granite
are you using a <StripeProvider> in the component above StripeIntegration?
you need to wrap all this code in a provider
https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom#stripe-initialization
stark wharf
I have warpped in root file
swift granite
maybe try removing the stripe-react-native library and re-installing it.
swift granite
then I would try doing a really simple standalone component following our docs exactly and try to create a reproduction that doesn't involve anything else in your app
stark wharf
Okay
I have one more question
I have created custom UI (simple text input) where user can enter card details.
I don't want to use cardField.
Then how can I make payment ?
swift granite
you should use the CardField(or PaymentElement) instead of your own inputs
stark wharf
I can't use my own inputs?
swift granite
it's best not to!
swift granite
our recommendation is to use our components and inputs as they are designed for customer conversion and make PCI compliance easier
stark wharf
But with the help of my own inputs how can I make payment?
how and where can I pass the code?
swift granite
I'm not sure you can, I don't think the RN SDK exposes functions to pass the raw card numbers. I'd suggest using our components! happy to try to help with the error you're getting, if you can get me a simple app that repros the issue
stark wharf
any solution?
swift granite
hmm yes we were talking about it
then I would try doing a really simple standalone component following our docs exactly and try to create a reproduction that doesn't involve anything else in your app
if it helps I'll show you what my working app does
import React, {useEffect, useState} from 'react';
import {Button, View, Text, Alert, Appearance} from 'react-native';
import {CardForm, confirmPayment} from '@stripe/stripe-react-native';
const API_URL = 'https://MYBACKEND.COM';
export default function CardFormScreen() {
const fetchPaymentIntent = async () => {
const response = await fetch(`${API_URL}/create_payment_intent`, {
method: 'POST',
});
try {
const {secret} = await response.json();
return {
secret,
};
} catch (e) {
console.error(e);
}
};
const pay = async () => {
let res = await fetchPaymentIntent();
const clientSecret = res.secret;
const {error, paymentIntent} = await confirmPayment(clientSecret, {
paymentMethodType: 'Card',
returnURL: 'my-rn-app://paymentcomplete',
//billingDetails,
// paymentMethodData:{
// paymentMethodId: "pm_card_mastercard"
// },
//setupFutureUsage: saveCard ? 'OffSession' : undefined,
});
if (error) {
Alert.alert(error.code, error.message);
return;
}
Alert.alert('Success', 'The PaymentIntent was confirmed successfully.');
setInitialized(false);
};
return (
<>
<CardForm
onFormComplete={cardDetails => {
console.log('card details are', cardDetails);
}}
style={{height: 500}}
cardStyle={
{
// fontSize: 50,
// backgroundColor: '#F9A4A9',
// borderColor: '#32a83c',
// borderWidth: 2,
// borderRadius: 10,
}
}
/>
<Button
variant="primary"
onPress={pay}
title="Pay"
accessibilityLabel="Pay"
// disabled={!isComplete}
// loading={loading}
/>
</>
);
}
well what has changed?
did you change some code/try something new?
stark wharf
Yes
swift granite
could you be more explicit? what changed, what does your code look like now...
stark wharf
do we have to add anythinh in android build gradle?
swift granite
well we mention some requirements/fields for the gradle file in the installation instructions here : https://github.com/stripe/stripe-react-native?tab=readme-ov-file#requirements
so maybe that's something to check
swift granite