Полосой способ оплаты. Использовать карточку [split-form] не работает. Не могу получить срок действия номера карты и номер cv c - PullRequest
Новая
       17

Полосой способ оплаты. Использовать карточку [split-form] не работает. Не могу получить срок действия номера карты и номер cv c

1 голос
/ 19 апреля 2020

Я использую полосу с реакцией и узлом. но я не получаю эти значения 

    <CardNumberElement/>
    <CardExpiryElement/> 
    <CardCvcElement/>

Без его значения я не могу получить токен и не могу брать деньги.

, если я использую только cardElement, но cardElement - один поле ввода строки, но я хочу разделить его. вот почему я использовал CardNumberElement, CardExpiryElement и CardCvcElement для разделения. Код внутреннего интерфейса идеален, но ошибка находится внутри внешнего интерфейса, поскольку мы не можем точно передать значения для создания токена полосы для платежа.

Код внешнего интерфейса: 

import React from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
    Elements,
    CardElement,
    useStripe,
    useElements,
    CardNumberElement,
    CardExpiryElement,
    CardCVCElement,
    injectStripe,
    StripeProvider,
    CardCvcElement
} from "@stripe/react-stripe-js";
import axios from "axios";
import { ServiceBooking } from "../../services/service-booking"


const CheckoutForm = ({ success }) => {
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async event => {
        event.preventDefault();
        let number = elements.getElement(CardNumberElement);
        let cvc = elements.getElement(CardCvcElement);
        console.log("farrukh",number)
        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: {
                number: number,
                exp_month: 4,
                exp_year: 2021,
                cvc: cvc,
              }
        });

        if (!error) {
            const { id } = paymentMethod;

            try {
                const data = await ServiceBooking.charge(id, 1099);
                console.log(data);
                success();
            } catch (error) {
                console.log(error);
            }
        }
    };

    return (
        <form
            onSubmit={handleSubmit}
            style={{ maxWidth: "400px", margin: "0 auto" }}
        >
            <h2>Price: $10.99 USD</h2>
            <CardNumberElement/>
            <CardExpiryElement/> 
            <CardCvcElement/>
            <button type="submit" disabled={!stripe}>
                Pay
      </button>
        </form>
    );
};

// you should use env variables here to not commit this
// but it is a public key anyway, so not as sensitive
const stripePromise = loadStripe("pk_test_wSvr6guTJvkKmv21jVqVd2D20049BVPKHP");

const Checkout = () => {
    const [status, setStatus] = React.useState("ready");

    if (status === "success") {
        return <div>Congrats on your empanadas!</div>;
    }

    return (
          <Elements stripe={stripePromise}>
              <CheckoutForm
                  success={() => {
                  setStatus("success");
                 }}
              />
          </Elements>
    );
};

export default Checkout;

Код сервера: 

router.post(
    "/charge",
    asyncHandler(async function (req, res) {
        const { id, amount } = req.body;

  try {
    const payment = await stripe.paymentIntents.create({
      amount,
      currency: "USD",
      payment_method: id,
      confirm: true
    });

    console.log(payment);

    return res.status(200).json({
      confirm: "abc123"
    });
  } catch (error) {
    console.log(error);
    return res.status(400).json({
      message: error.message
    });
  }
    })
);

Я пытался, но не смог зарядить (оплатить) успешно

1 Ответ

1 голос
/ 20 апреля 2020

в Stripe. js, вам просто нужно передать CardElement на stripe.createPaymentMethod вызов. Вам не нужен номер карты, и вы не можете получить номер карты по соображениям безопасности. 

let number = elements.getElement(CardNumberElement);
...
const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: number
        });

Вы можете спросить, как мне сдать в cvc и expiry date? Ответ в том, что вам не нужно, Stripe. js автоматически найдет CV C и автоматически истечет время ввода на той же странице.

См. Ссылку на https://stripe.com/docs/stripe-js/react

...