Iconate-cardForm | Stripe Developers | Page 1

twin scarab Apr 11, 2022, 5:49 PM

#

Hey there! Can you provide your code snippet for setting style here?

turbid grail Apr 11, 2022, 5:50 PM

#

Sure- I am not super privy with RN stuff, so i may be doing something trivially wrong here

#

in styles.xml

    <item name="android:textColor">#000000</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="android:windowTranslucentStatus">true</item>
  </style>

#

Im also injecting this into someones application and trying not to set Material as the Default, and just maintain their current theme

twin scarab Apr 11, 2022, 5:52 PM

#

And can you share your cardForm component?

turbid grail Apr 11, 2022, 5:53 PM

#

Just trying to initialize it

    <SafeAreaView style={styles.container}>
      <StripeProvider

        publishableKey={publishableKey}
        urlScheme={urlScheme}
        merchantIdentifier={merchantIdentifier}
      >
        <CardForm />
      </StripeProvider>
    </SafeAreaView>

#

is the render

#

import {StripeProvider, useStripe, CardForm} from "@stripe/stripe-react-native";

twin scarab Apr 11, 2022, 5:55 PM

#

Okay so to be clear, you aren't trying to style cardForm itself... when you add cardForm you are seeing your styling break?

turbid grail Apr 11, 2022, 5:56 PM

#

Correct, im just trying to use the CardForm provided https://github.com/stripe/stripe-react-native#android

GitHub

GitHub - stripe/stripe-react-native: React Native library for Stripe.

React Native library for Stripe. Contribute to stripe/stripe-react-native development by creating an account on GitHub.

#

I just need to have a CC input field in order to generate paymentMethods. So if there is a different component I should be using, im all for that as well

twin scarab Apr 11, 2022, 5:59 PM

#

No that field is fine. Give me a few minutes to dig into why this might be breaking.

turbid grail Apr 11, 2022, 6:00 PM

#

I have implementation 'com.google.android.material:material:1.4.0' in my app/build.gradle dependencies for reference

#

Hmmm <CardField /> Seems to also produce what I want in the UI, as long as I can get a payment method ID from it it might also work

#

        <CardField
          placeholder={{
            number: '4242 4242 4242 4242',
          }}
          cardStyle={{
            backgroundColor: '#FFFFFF',
            textColor: '#000000',
          }}
          style={{
            width: '100%',
            height: 50,
            marginVertical: 30,
          }}
          onCardChange={(cardDetails) => {
            console.log(cardDetails)
            setCard(cardDetails)
          }}
          onFocus={(focusedField) => {
            console.log('focusField', focusedField);
          }}
        />

#

But Unlike the web where it attaches the actual element, im not sure how to use

  const onPressThing = async () => {
    console.log('on press')

    const { paymentMethod, error } = await createPaymentMethod({
      type: 'Card',
      billingDetails: {
        email: 'email@stripe.com',
      }, // optional
    });

    console.log(paymentMethod, error)
  }

#

[Mon Apr 11 2022 14:12:20.289]  LOG      undefined {"code": "Failed", "declineCode": null, "localizedMessage": "Card details not complete", "message": "Card details not complete", "stripeErrorCode": null, "type": null}

#

sweet, I think I got it working

{"AuBecsDebit": {"bsbNumber": null, "fingerprint": null, "last4": null}, "BacsDebit": {"fingerprint": null, "last4": null, "sortCode": null}, "Card": {"brand": "Visa", "country": "US", "expMonth": 4, "expYear": 2024, "funding": "credit", "last4": "4242"}, "Fpx": {"accountHolderType": null, "bank": null}, "Ideal": {"bankIdentifierCode": null, "bankName": null}, "SepaDebit": {"bankCode": null, "country": null, "fingerprint": null, "last4": null}, "Sofort": {"country": null}, "Upi": {"vpa": null}, "billingDetails": {"address": {"city": null, "country": null, "line1": null, "line2": null, "postalCode": "90210", "state": null}, "email": "email@stripe.com", "name": null, "phone": null}, "customerId": null, "id": "pm_1KnRkjB88RUu9OnVo6WnLOZu", "livemode": false, "type": "Card"}

wooden pulsar Apr 11, 2022, 6:14 PM

#

Hello 👋
Taking over for @twin scarab here
Can you give me a brief summary of what's blocking you while I read up?

turbid grail Apr 11, 2022, 6:14 PM

#

Getting this response now 👍 which is all I want

wooden pulsar Apr 11, 2022, 6:15 PM

#

Oh cool! 🙂

turbid grail Apr 11, 2022, 6:15 PM

#

Hey Hanzo, So I was trying to use CardForm, but it wasnt loading due to style.xml issues

But then I just tried the CardField component and I seem to be having luck now

#

in android RN specifically

wooden pulsar Apr 11, 2022, 6:16 PM

#

Ah okay, cool! As long as you're unblocked 😄

turbid grail Apr 11, 2022, 6:16 PM

#

Seems like it ! thanks for your time

wooden pulsar Apr 11, 2022, 6:17 PM

#

NP! We appreciate your patience 🙂 Good luck
Have a good one

#Iconate-cardForm