javascript - 使用 React 向 Stripe 提交费用

Question

我正在尝试将 Stripe Elements 与我的 React 应用程序集成。下面是我提交付款表格的 js 页面，这是我从各种在线示例中拼凑而成的。当我在我的表单上按下提交时，我确实得到了一个 token ，但是收费永远不会被创建，至少根据我的 Stripe 仪表板是这样。

提前谢谢你，

// CheckoutForm.js
import React, { Component } from 'react'
import {injectStripe} from 'react-stripe-elements'
import CardSection from './CardSection'

class CheckoutForm extends Component {
  handleSubmit = (ev) => {
    console.log(ev)
    // We don't want to let default form submission happen here, which would refresh the page.
    ev.preventDefault();

    // Within the context of `Elements`, this call to createToken knows which Element to
    // tokenize, since there's only one in this group.
    this.props.stripe.createToken({name: 'Jenny Rosen'}).then(({token}) => {
      console.log('Received Stripe token:', token)
      const stripeTokenHandler = (token) => {
        // Insert the token ID into the form so it gets submitted to the server
        const form = document.getElementById('stripe-form');
        const hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();

        this.props.stripe.charges.create({
          amount: this.props.price,
          currency: "usd",
          description: "irl Map Fine Print",
          source: token,
        }, function(err, charge) {
          // asynchronously called
        });
      }
    })
  }

  render() {
    return (
      <form id='stripe-form' onSubmit={this.handleSubmit}>
        <div className='stripe-section'>
          <div className='stripe-row'>
            <label id='stripe-name'>Name</label>
            <input id='stripe-name' type='text' placeholder='Jane Doe'/>
          </div>
          <div className='stripe-row'>
            <label id='stripe-email'>Email</label>
            <input id='stripe-email' type='email' placeholder='janedoe@gmail.com' required/>
          </div>
        </div>
        <div className='stripe-section'>
          <div className='stripe-row'>
            <label id='stripe-address'>Address</label>
            <input id='stripe-address' type='text' placeholder='2345 Mission St.'/>
          </div>
          <div className='stripe-row'>
            <label id='stripe-city'>City</label>
            <input id='stripe-city' type='text' placeholder='San Francisco'/>
          </div>
          <div className='stripe-row'>
            <label id='stripe-state'>State</label>
            <input id='stripe-state' type='text' placeholder='CA'/>
          </div>
          <div className='stripe-row'>
            <label id='stripe-zip'>ZIP</label>
            <input id='stripe-zip' type='text' placeholder='94110'/>
          </div>
        </div>
        <div className='stripe-section'>
          <CardSection />
        </div>
        <button>Pay ${this.props.price}</button>
      </form>
    )
  }
}

export default injectStripe(CheckoutForm);

Answer 1

您不能使用您的可发布 key 创建收费客户端；您需要使用您的 key 在服务器端执行此操作(绝不能共享，因此绝不能在客户端发布)。

您需要将适当的详细信息发送到某些服务器端代码 - 可能是您在那里提交的表单 - 并在服务器端创建费用:https://stripe.com/docs/charges