Блог

В React js мне нужно включить netbanking, UPI, оплату дебетовыми и кредитными картами. Согласно документам Stripe, я включил оплату кредитной картой. Но я не могу получить никаких рекомендаций по интернет-банкингу, UPI. пожалуйста, предложите мне, если какой — либо образец доступен.

заранее спасибо.

Я могу отобразить формат страницы оплаты ниже

На приведенном выше рисунке он отображает номер карты, дату истечения срока действия и cvv в одной строке. Есть ли в любом случае возможность отображать номер карты в первой строке, а во второй строке срок действия и CVV ? а также можем ли мы добавлять ярлыки?

Поставщик платежных средств: —

 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 (
      <Elements stripe={stripePromise}>
        <MyCheckoutForm />
      </Elements>
    );
  };
 

Форма выписки: —

 import React, { useState } from 'react'
import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js'
import axios from 'axios'

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "#c4f0ff",
            color: "#fff",
            fontWeight: 500,
            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
            fontSize: "16px",
            fontSmoothing: "antialiased",
            ":-webkit-autofill": { color: "#fce883" },
            "::placeholder": { color: "#87bbfd" }
        },
        invalid: {
            iconColor: "#ffc7ee",
            color: "#ffc7ee"
        }
    }
}

export default function MyCheckoutForm() {
    const [success, setSuccess] = useState(false)
    const stripe = useStripe()
    const elements = useElements()

    const handleSubmit = async (e) => {
        e.preventDefault()

        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardElement)

        })

        if (!error) {
            try {
                const { id } = paymentMethod
                const response = await axios.post("http://localhost:3000/payment", {
                    amount: 1000,
                    id
                })

                if (response.data.success) {
                    console.log("Payment successful")
                    setSuccess(true)
                }
            } catch (error) {
                console.log("Error: ", error)
            }    
        } else {
            console.log("error", error.message)
        }
    }
    
    return (
        <>
            {!success ? 
                <form onSubmit={handleSubmit}>
                    <fieldset className="FormGroup">
                        <div className="FormRow">
                            <CardElement options={CARD_OPTIONS} />
                        </div>
                    </fieldset>
                    <button className="Stripebutton"> Pay</button>
                </form>
            :
                <div>
                    <h2>You just bought a sweet </h2>
                </div>
            }
        </>
    )
}