title: In Reactjs using stripe i need to include netbanking, UPI, debitcard and credit card payment
body: <p>In React js I need to include netbanking, UPI, debitcard and credit card payment. As per Stripe docs I have included credit card payment. But I am not able to get any reference for internet banking, UPI. please suggest me if any sample is available.</p>
  <p>Thanks in Advance.</p>
  <p>I am able to display below payment page format</p>
  <p><a href="https://i.stack.imgur.com/Ex8LA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ex8LA.jpg" alt="enter image description here" /></a></p>
  <p>The above pic it displays cardnumber, expiry date and cvv in same line. Is there anyway to display first Row card number and in second Row expiry and CVV ? and also do we can add labels?</p>
  <p>PaymetProvider: -</p>
  <pre><code>import React from 'react'
  import {Elements} from '@stripe/react-stripe-js';
  import {loadStripe} from '@stripe/stripe-js';
  import MyCheckoutForm from './CheckOutForm';
  
  const stripePromise = loadStripe('pk_test_51JWBuuSB2HdD9HME7g...sFfz8O6bY00d1NcxaxX');
  
  export default function PaymentProvider() {
      return (
        &lt;Elements stripe={stripePromise}&gt;
          &lt;MyCheckoutForm /&gt;
        &lt;/Elements&gt;
      );
    };
  </code></pre>
  <p>CheckOutForm: -</p>
  <pre><code>import React, { useState } from 'react'
  import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js'
  import axios from 'axios'
  
  const CARD_OPTIONS = {
      iconStyle: &quot;solid&quot;,
      style: {
          base: {
              iconColor: &quot;#c4f0ff&quot;,
              color: &quot;#fff&quot;,
              fontWeight: 500,
              fontFamily: &quot;Roboto, Open Sans, Segoe UI, sans-serif&quot;,
              fontSize: &quot;16px&quot;,
              fontSmoothing: &quot;antialiased&quot;,
              &quot;:-webkit-autofill&quot;: { color: &quot;#fce883&quot; },
              &quot;::placeholder&quot;: { color: &quot;#87bbfd&quot; }
          },
          invalid: {
              iconColor: &quot;#ffc7ee&quot;,
              color: &quot;#ffc7ee&quot;
          }
      }
  }
  
  export default function MyCheckoutForm() {
      const [success, setSuccess] = useState(false)
      const stripe = useStripe()
      const elements = useElements()
  
      const handleSubmit = async (e) =&gt; {
          e.preventDefault()
  
          const { error, paymentMethod } = await stripe.createPaymentMethod({
              type: &quot;card&quot;,
              card: elements.getElement(CardElement)
  
          })
  
          if (!error) {
              try {
                  const { id } = paymentMethod
                  const response = await axios.post(&quot;http://localhost:3000/payment&quot;, {
                      amount: 1000,
                      id
                  })
  
                  if (response.data.success) {
                      console.log(&quot;Payment successful&quot;)
                      setSuccess(true)
                  }
              } catch (error) {
                  console.log(&quot;Error: &quot;, error)
              }    
          } else {
              console.log(&quot;error&quot;, error.message)
          }
      }
      
      return (
          &lt;&gt;
              {!success ? 
                  &lt;form onSubmit={handleSubmit}&gt;
                      &lt;fieldset className=&quot;FormGroup&quot;&gt;
                          &lt;div className=&quot;FormRow&quot;&gt;
                              &lt;CardElement options={CARD_OPTIONS} /&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
                      &lt;button className=&quot;Stripebutton&quot;&gt; Pay&lt;/button&gt;
                  &lt;/form&gt;
              :
                  &lt;div&gt;
                      &lt;h2&gt;You just bought a sweet &lt;/h2&gt;
                  &lt;/div&gt;
              }
          &lt;/&gt;
      )
  }
  </code></pre>