How to use @stripe/react-stripe-js - 2 common examples

To help you get started, we’ve selected a few @stripe/react-stripe-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github 3scale / porta / app / javascript / src / PaymentGateways / stripe / components / StripeCardForm.jsx View on Github external
const StripeCardForm = ({ setupIntentSecret, billingAddressDetails, successUrl, isCreditCardStored }: StripeCardFormProps): React.Node => {
  // eslint-disable-next-line flowtype/no-weak-types
  const formRef = useRef(null)
  const [cardErrorMessage, setCardErrorMessage] = useState(null)
  const [isStripeFormVisible, setIsStripeFormVisible] = useState(!isCreditCardStored)
  const [stripePaymentMethodId, setStripePaymentMethodId] = useState('')
  const [formComplete, setFormComplete] = useState(false)

  const stripe = useStripe()
  const elements = useElements()

  const toogleVisibility = () => setIsStripeFormVisible(!isStripeFormVisible)

  const handleSubmit = async event => {
    event.preventDefault()
    setFormComplete(false)

    if (!stripe || !elements) {
      return
    }

    const { error, setupIntent } = await stripe.confirmCardSetup(setupIntentSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
        billing_details: {
          address: billingAddressDetails
github 3scale / porta / app / javascript / src / PaymentGateways / stripe / components / StripeCardForm.jsx View on Github external
const StripeCardForm = ({ setupIntentSecret, billingAddressDetails, successUrl, isCreditCardStored }: StripeCardFormProps): React.Node => {
  // eslint-disable-next-line flowtype/no-weak-types
  const formRef = useRef(null)
  const [cardErrorMessage, setCardErrorMessage] = useState(null)
  const [isStripeFormVisible, setIsStripeFormVisible] = useState(!isCreditCardStored)
  const [stripePaymentMethodId, setStripePaymentMethodId] = useState('')
  const [formComplete, setFormComplete] = useState(false)

  const stripe = useStripe()
  const elements = useElements()

  const toogleVisibility = () => setIsStripeFormVisible(!isStripeFormVisible)

  const handleSubmit = async event => {
    event.preventDefault()
    setFormComplete(false)

    if (!stripe || !elements) {
      return
    }

    const { error, setupIntent } = await stripe.confirmCardSetup(setupIntentSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
        billing_details: {

@stripe/react-stripe-js

React components for Stripe.js and Stripe Elements

MIT
Latest version published 14 days ago

Package Health Score

92 / 100
Full package analysis