Stripe Elements React - как получить данные чередования от родительского компонента? - PullRequest
Новая
       10

Stripe Elements React - как получить данные чередования от родительского компонента?

0 голосов
/ 26 мая 2018

Я настроил форму оплаты элемента Stripe в компоненте _CardForm и хочу выполнить процесс оплаты в компоненте Checkout, который является родительским компонентом _CardForm.

Однако я не могуполучить данные полосы из компонента _CardForm.Как получить данные чередования от дочернего компонента? 

const {
  CardElement,
  StripeProvider,
  Elements,
  injectStripe,
} = ReactStripeElements

class _CardForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.userPay}>
        <CardElement />
        <button>Pay</button>
      </form>
    )
  }
}
const CardForm = injectStripe(_CardForm)

class Checkout extends React.Component {
  userPay(){
    // PROBLEM: Can't get stripe data from <CardElement />
    console.log(this.props.stripe) // undefined
    this.props.stripe.createToken().then(payload => console.log(payload))
  }
  render() {
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
        <Elements>
          <CardForm userPay={this.userPay.bind(this)} />
        </Elements>
      </div>
    )
  }
}

const App = () => {
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
      <Checkout />
    </StripeProvider>
  )
}
ReactDOM.render(<App />, document.querySelector('.App'))

1 Ответ

0 голосов
/ 26 мая 2018

Этот код мне сложно протестировать, но он должен прояснить некоторые вещи, которые не показаны в документации.

Кроме того, само собой разумеется, что вы должны правильно загрузить Stripe впервое место.Я также могу дать некоторые указания в этой области, но мне нужно знать больше о том, как вы пытаетесь загрузить его. 

const {
  CardElement,
  StripeProvider,
  Elements,
  injectStripe,
} = ReactStripeElements

class CardForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.userPay}>
        <CardElement onReady={this.props.cardRef} />
        <button>Pay</button>
      </form>
    );
  }
}

class Checkout extends React.Component {
  userPay = (event) => {
    const testName = "John Doe";

    if (this.cardElement) {
      this.props.stripe
        .createToken(
          this.cardElement,
          { name: testName } // add additional information here, such as name and address, if outside card element
        )
        .then(({ token }) => {
          const tokenString = token.id; // you actually want token.id to send to your server and then to the stripe API
          // code to send tokenString to your server, which will then send it to stripe's API
        });
    }
  };

  cardRef = (element) => {
    if (element) {
      this.cardElement = element;
    }
  };

  render() {
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
          <CardForm
            cardRef={this.cardRef}
            userPay={this.userPay}
          />
      </div>
    );
  }
}

const StripeCheckout = injectStripe(Checkout);

const App = () => {
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
        <Elements>
          <StripeCheckout />
        </Elements>
    </StripeProvider>
  );
};
ReactDOM.render(<App />, document.querySelector('.App'))
...