Question

我正在尝试将Stripe Elements与我的反应应用程序集成。下面是我提交付款表格的js页面，我在网上通过各种示例拼凑而成。当我在表单上按提交时，我确实收到了令牌，但是至少根据我的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

您无法使用Publishable Key在客户端创建费用;你需要在服务器端使用你的密钥（它永远不应该被共享，所以永远不应该在客户端发布）。

您需要将相应的详细信息发送到某些服务器端代码（可能是您提交的形式）并创建收费服务器端：https://stripe.com/docs/charges

使用React向Stripe提交费用

1 个答案: