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.
3scale / porta / app / javascript / src / PaymentGateways / stripe / components / StripeCardForm.jsx View on Github 
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: billingAddressDetailsconst 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
