#zerox20044

1 messages · Page 1 of 1 (latest)

old pollenBOT
lime geyser
#

@swift night Can you give me a bit more details? You say "custom screen" and "SDK" without much context or details.

swift night
#

we are using react native SDK

#

and this is what we are trying to accomplish

image.png
#

i got try this from some web example but those fields are not available to create the card details import { StripeProvider, CardField, useStripe } from '@stripe/stripe-react-native';

const YourComponent = () => {
const { createPaymentMethod } = useStripe();

const handlePaymentMethodCreation = async () => {
try {
// Get the card details from your form or user input
const cardDetails = {
number: '4242424242424242', // Credit card number
expMonth: 12, // Expiry month (1-12)
expYear: 2024, // Expiry year
cvc: '123', // Card verification code (CVV)
postalCode: '12345', // Billing postal code
};

  // Create a payment method using the card details
  const paymentMethod = await createPaymentMethod({
    type: 'Card',
    card: {
      number: cardDetails.number,
      expMonth: cardDetails.expMonth,
      expYear: cardDetails.expYear,
      cvc: cardDetails.cvc,
    },
  });

  // Handle the created payment method (e.g., send it to your server)
  console.log('Payment method created:', paymentMethod);
} catch (error) {
  // Handle error, e.g., display an error message to the user
  console.error('Error creating payment method:', error);
}

};

return (
// Your component JSX here
<YourFormComponent onSubmit={handlePaymentMethodCreation} />
);
};

glass escarp
#

Hello. are those fields CardField or are they some UI you implemented by yourself?

swift night
#

those are ui implemented by me, but is there a way to adapt the card filed to that design?

glass escarp
#

Okie so first advice is ... you shouldn't do this. it will expose you to PCI DSS. You should always use our SDK provided UI components

#

The recommended component is PaymentSheet, then CardField (and PaymentSheet is really way better)

swift night
#

ok but our app work in the way that we save cards to user account and then on purchase we just use the default paymnet method of the user to do the purchase, so the payment sheet does not seems to work for us

glass escarp
#

Yes that makes sense 🙂 But you can do that with our SDK components too. You can use a SetupIntent for PaymentSheet, it will save the details and provide you a PaymentMethod Id pm_xxx