Lbrito-update-details | Stripe Developers | Page 1

vestal cloud Apr 20, 2022, 3:56 PM

#

Hi there! Taking a look!

ashen fossil Apr 20, 2022, 3:56 PM

#

Thank you!

vestal cloud Apr 20, 2022, 3:57 PM

#

What is happening when they can't update the details?

#

Like what are they seeing on their end.

ashen fossil Apr 20, 2022, 4:00 PM

#

We catch the errors from Stripe, we can't really see which one they are getting back. It's not a card declined.

#

Wondering if those logs mean something to you

vestal cloud Apr 20, 2022, 4:07 PM

#

Doing a little digging

#

I think these are just related to our fraud prevention and analytics stuff and aren't actually influential on your ability to use Elements.

#

So I don't think those are the cause of any issue that is happening... they can mostly just be ignored.

#

By "those" I mean all errors related to r.stripe

ashen fossil Apr 20, 2022, 4:16 PM

#

Oh, ok

vestal cloud Apr 20, 2022, 4:17 PM

#

Yep I confirmed, these shouldn't be having any affect on your integration.

ashen fossil Apr 20, 2022, 4:17 PM

#

Does this one make sense?

vestal cloud Apr 20, 2022, 4:17 PM

#

Ah okay yeah that is an error from Stripe.JS so that could be impactful

#

What integration flow are you using?

#

And what styling are you trying to apply to the Element?

ashen fossil Apr 20, 2022, 4:19 PM

#

We are using these

vestal cloud Apr 20, 2022, 4:23 PM

#

Okay and what styling?

ashen fossil Apr 20, 2022, 4:23 PM

#

Not sure if it helps

vestal cloud Apr 20, 2022, 4:24 PM

#

Yeah that does, in the future you can post that directly inline here using three ` so that the code is more accessible (as opposed to a screenshot)

#

Let me give it a look

ashen fossil Apr 20, 2022, 4:29 PM

#

import React from 'react';
import PropTypes from 'prop-types';
import {
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
  ElementsConsumer,
} from '@stripe/react-stripe-js';

import c from './cardDetails.scss';
import FormInput from '@atoms/FormInput';
import PaymentContext from 'contexts/PaymentContext';
import { Notification } from '@molecules';

const style = {
  base: {
    fontSize: '16px',
    color: '#373838',
    fontFamily: "'Roboto Mono', monospace",
    fontSmoothing: 'antialiased',
    '::placeholder': {
      fontFamily: "'Roboto', sans-serif",
      color: '#808383',
    },
    ':focus': {
      '::placeholder': {
        color: '#c9cdcd',
      },
    },
    '::-ms-clear': {
      display: 'none',
    },
  },
  invalid: {
    color: '#D20000',
    ':focus': {
      color: '#303238',
    },
  },
  complete: {},
};

const cardBrandToPaymentClass = {
  visa: 'card-icon-visa',
  mastercard: 'card-icon-mastercard',
  amex: 'card-icon-amex',
  discover: 'card-icon-discover',
  diners: 'card-icon-diners',
  jcb: 'card-icon-jcb',
  unknown: 'card-icon-standard',
};
class CardDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardNumberFocused: false,
      cardNumberError: false,
      cardExpiryFocused: false,
      cardExpiryError: false,
      cardCVCFocused: false,
      cardCVCError: false,
      brandClassName: 'card-icon-standard',
      errorMessage: '',
      userInfo: {
        firstname: '',
        lastname: '',
      },
    };

#

this.setCardNumberFocused = this.setCardNumberFocused.bind(this);
    this.setCardExpiryFocused = this.setCardExpiryFocused.bind(this);
    this.setCardCVCFocused = this.setCardCVCFocused.bind(this);
    this.setFocused = this.setFocused.bind(this);
    this.handleCardNumberChange = this.handleCardNumberChange.bind(this);
    this.handleCardExpiryChange = this.handleCardExpiryChange.bind(this);
    this.handleCardCVCChange = this.handleCardCVCChange.bind(this);
    this.setBrandIcon = this.setBrandIcon.bind(this);
    this.hasError = this.hasError.bind(this);
  }

  setFocused(key, focused) {
    this.setState({ [key]: focused });
  }

  setCardNumberFocused(focused) {
    return () => {
      this.setFocused('cardNumberFocused', focused);
    };
  }

  setCardExpiryFocused(focused) {
    return () => {
      this.setFocused('cardExpiryFocused', focused);
    };
  }

  setCardCVCFocused(focused) {
    return () => {
      this.setFocused('cardCVCFocused', focused);
    };
  }

  setBrandIcon(brand) {
    var brandClassName = 'card-icon-standard';
    if (brand in cardBrandToPaymentClass) {
      brandClassName = cardBrandToPaymentClass[brand];
    }
    this.setState({ brandClassName });
  }

  handleCardNumberChange(payload) {
    const hasError = payload.error && payload.error.type === 'validation_error';
    this.setState({
      cardNumberError: hasError,
      errorMessage: payload.error ? payload.error.message : '',
    });
    if (payload.brand) {
      this.setBrandIcon(payload.brand);
    }
    if (this.props.setCardFieldsComplete) {
      this.props.setCardFieldsComplete({
        cardNumberComplete: payload.complete,
      });
    }
  }

#


  handleCardExpiryChange(payload) {
    const hasError = payload.error && payload.error.type === 'validation_error';
    this.setState({
      cardExpiryError: hasError,
      errorMessage: payload.error ? payload.error.message : '',
    });
    if (this.props.setCardFieldsComplete) {
      this.props.setCardFieldsComplete({
        cardExpiryComplete: payload.complete,
      });
    }
  }

  handleCardCVCChange(payload) {
    const hasError = payload.error && payload.error.type === 'validation_error';
    this.setState({
      cardCVCError: hasError,
      errorMessage: payload.error ? payload.error.message : '',
    });
    if (this.props.setCardFieldsComplete) {
      this.props.setCardFieldsComplete({
        cardCVCComplete: payload.complete,
      });
    }
  }

  hasError() {
    return this.state.cardCVCError || this.state.cardExpiryError || this.state.cardNumberError;
  }

  render() {
    const { firstname, lastname, showHeader, showNameAndSurname } = this.props;

    const numberClasses =
      `${this.state.cardNumberFocused ? c['card-details__input--focused'] : ''} ` +
      `${this.state.cardNumberError ? c['card-details__input--error'] : ''} ` +
      `${
        this.props.cardFieldCompleteStates.cardNumberComplete
          ? c['card-details__input--complete']
          : ''
      }`;

    const expiryClasses =
      `${this.state.cardExpiryFocused ? c['card-details__input--focused'] : ''} ` +
      `${this.state.cardExpiryError ? c['card-details__input--error'] : ''} ` +
      `${
        this.props.cardFieldCompleteStates.cardExpiryComplete
          ? c['card-details__input--complete']
          : ''
      }`;

#

Does it help? There is a short limit on characters

steep monolith Apr 20, 2022, 4:31 PM

#

Hi 👋 I'm stepping in for @vestal cloud

ashen fossil Apr 20, 2022, 4:31 PM

#

Hey

steep monolith Apr 20, 2022, 4:32 PM

#

Well that's an awful lot of context! Gimme a minute to catch up 🙂

ashen fossil Apr 20, 2022, 4:32 PM

#

Hahahah thanks

steep monolith Apr 20, 2022, 4:37 PM

#

Okay so you are rendering the individual Card component elements. And I can see where you are passing the base style.

#

And this error is occurring when your users attempt to update their card information?

ashen fossil Apr 20, 2022, 4:39 PM

#

Yes

steep monolith Apr 20, 2022, 4:39 PM

#

So they can use the same form to enter the information?

ashen fossil Apr 20, 2022, 4:40 PM

#

What do you mean enter the information?

#

They click update, but they get an error back from Stripe

steep monolith Apr 20, 2022, 4:41 PM

#

Okay so it doesn't happen when they are entering the information, only once they click the update button?

ashen fossil Apr 20, 2022, 4:42 PM

#

Yeah

steep monolith Apr 20, 2022, 4:42 PM

#

And which part of the above code handles the action that triggers?

#

For reference, here is the example from our react-stripe-js Github repository that I am referencing to compare with your code. I've highlighted the function that handles the Submit event: https://github.com/stripe/react-stripe-js/blob/master/examples/class-components/2-Split-Card.js#L45-L86

ashen fossil Apr 20, 2022, 4:49 PM

#

Sorry it's taking me a awhile, following the trail

steep monolith Apr 20, 2022, 4:50 PM

#

You and me both 😅

ashen fossil Apr 20, 2022, 4:52 PM

#

So we do this:

  handleCardNumberChange(payload) {
    const hasError = payload.error && payload.error.type === 'validation_error';
    this.setState({
      cardNumberError: hasError,
      errorMessage: payload.error ? payload.error.message : '',
    });
    if (payload.brand) {
      this.setBrandIcon(payload.brand);
    }
    if (this.props.setCardFieldsComplete) {
      this.props.setCardFieldsComplete({
        cardNumberComplete: payload.complete,
      });
    }
  }
``` on the card number which I guess might trigger that error? Even though the user says it's only on submit

#

Looking for the submit code

steep monolith Apr 20, 2022, 4:55 PM

#

The error message you are receiving leads me to think it has to do with changing inline styling in a way that is considered unsafe. This code snippet seams to handle notifying the user if they have mis-entered their card info (not enough numbers, etc.). I'm curious if your submit handler does any modification to inline styling

ashen fossil Apr 20, 2022, 5:01 PM

#

#

Doesn't seem to

steep monolith Apr 20, 2022, 5:03 PM

#

So is the ChangeCard the form that is being rendered? In that case I would think the this.onChangeCardClick function would be a good place to look

ashen fossil Apr 20, 2022, 5:04 PM

#

#

#

No styling as far as I can find

#

Just state

steep monolith Apr 20, 2022, 5:05 PM

#

Okay so this is where I'd put some logging. I'd put log statements around each of the functions just to see which get executed and where it breaks.

#

That would at least give you a place to start digging

#

Can you recreate the user failure locally?

ashen fossil Apr 20, 2022, 5:06 PM

#

Nope

steep monolith Apr 20, 2022, 5:07 PM

#

Well that's going to make finding any resolution kind of a shot in the dark. I haven't run across this before myself. I don't use React but the react-stripe-js package is just a React wrapper around Stripe.js functionality.

ashen fossil Apr 20, 2022, 5:08 PM

#

Yeah :/

steep monolith Apr 20, 2022, 5:09 PM

#

However it would not be the first time that I've seen less than helpful error messages. If you can figure out how recreate the error (create some fake customers using the Testmode API key) then I'd start logging around those state changes and see how far the code execution gets

ashen fossil Apr 20, 2022, 5:10 PM

#

Ok, yeah have been trying to find a way to reproduce, but nothing from the user journey stands out

#

Thanks for the tips, I guess I will give it another go

steep monolith Apr 20, 2022, 5:12 PM

#

Yeah my best bet would be to try and replicate fake users in your front-end and test with a bunch of our Test Cards: https://stripe.com/docs/testing#cards

#

Does the error occur with all users or only a subset?

ashen fossil Apr 20, 2022, 5:13 PM

#

The specific one only one user is complaining

#

But we have been having a few having difficulties updating their card information with Stripe errors, not all give us logs though

steep monolith Apr 20, 2022, 5:14 PM

#

Yeah, if the errors are occurring in Stripe.js then it won't reach the API and we won't have logs.

ashen fossil Apr 20, 2022, 5:15 PM

#

Ok

#

Yeah our other issues seem to be SCA related, some users are not being prompted with the extra authentication

steep monolith Apr 20, 2022, 5:18 PM

#

In that case you'll want to test with our 3DS cards: https://stripe.com/docs/testing#regulatory-cards

ashen fossil Apr 20, 2022, 5:18 PM

#

Yeah we have being using them

#

It only seems to affect a few users

steep monolith Apr 20, 2022, 5:19 PM

#

And this might be a larger lift in terms of effort but you could consider using the newer PaymentELement instead of the individual Card elements. https://stripe.com/docs/stripe-js/react#element-components

#

We have a breakdown of the differences here: https://stripe.com/docs/payments/payment-card-element-comparison

ashen fossil Apr 20, 2022, 5:20 PM

#

Yeah I have come across them, indeed the code needs a revamp

#

Thanks for the help

steep monolith Apr 20, 2022, 5:21 PM

#

Sorry we couldn't get to a quick win. Some problems need more digging.

ashen fossil Apr 20, 2022, 5:21 PM

#

Yeah, no worries. At least we can check that styling more carefully and can be an extra argument to apply time to update the code

#Lbrito-update-details