标签: react-stripe-elements

我正在寻找一种方法来自定义“卡号”“到期日期”和“CCV”字段的布局，当使用条纹元素并card.mount('#card-element');按照本页第一个示例中所述注入这些字段https://stripe.com/文档/条纹-js

它将所有卡片字段放在一行中，我想更改该布局并将它们放在不同的行中。

有任何想法吗？

提前致谢

我想在我的React应用程序中实现条带元素,看起来我可以使用一个很好的包装器.

但是,在文章中,作者说我们必须使用StripeProvider它并在根应用程序组件级别实现它 - 请参阅https://github.com/stripe/react-stripe-elements#getting-started

我需要使用自己的提供商连接到我的商店.如何在组件中使用两个提供程序？我甚至不确定这是不是一个好主意.

我当前的渲染方法如下所示:

render(
    <Provider store={store}>
        <App>
            <SomeComponentInMyApp />
        </App>
    </Provider>,
    document.getElementById('content-wrapper')
);

我会将一个提供商包裹在另一个吗？

我正在使用 react-stripe-elements 创建一个用于支付的令牌。但是，根据文档，当卡片形式包含在 Elements 组件中时，它应该自动选择要标记化的条纹元素。

但是，在这种情况下，我们会遇到错误

You must provide a Stripe Element or a valid token type to create a Token.

这是代码：

import React from 'react';
import {CardCVCElement, CardExpiryElement, CardNumberElement, PostalCodeElement, StripeProvider, Elements} from 'react-stripe-elements';

class CheckoutForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(ev) {
    ev.preventDefault();

    this.props.stripe.createToken({email: 'test@test.com'}).then(({token }) => {console.log('Received Stripe token:', token)});
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Card details
          <CardNumberElement />
          <CardExpiryElement />
          <CardCVCElement />
          <PostalCodeElement />
        </label>
        <button>Confirm order</button>
      </form> …

我有我的 Stripe 表格，如下所示，加载得很好

  render() {
    const createOptions = (fontSize: string) => {
      return {
        style: {
          base: {
            fontSize,
            color: '#424770',
            letterSpacing: '0.025em',
            fontFamily: 'Source Code Pro, monospace',
            '::placeholder': {
              color: '#aab7c4',
            },
          },
          invalid: {
            color: '#9e2146',
          },
        },
      };
    };

    return (
      <div className={styles.cardsection}>
        <form onSubmit={this.handleSubmit}>
        <label>
        Card Details
            <CardElement {...createOptions(this.props.fontSize)} />
          </label>
          <button>
            {this.state.paid === 'waiting' ? 'Please wait...' : 'Confirm order'}
          </button>
        </form>
      </div>
    );
  }
}

export default injectStripe(CheckoutForm);

我有我的 style.less 文件：

.cardsection {
  width: …

我目前正在尝试使用Laravel Cashier在React应用程序中处理Billing。使用要求3D安全的测试卡（直接从Stripes文档中提取）（4000000000003220）时，我会IncompletePayment exception抛出异常。

如文档中所述，这显然是正常的：https : //laravel.com/docs/6.x/billing#payments-requiring-additional-confirmation

try {
    $subscription = $user->newSubscription('default', $planId)
                            ->create($paymentMethod);
} catch (IncompletePayment $exception) {
    return redirect()->route(
        'cashier.payment',
        [$exception->payment->id, 'redirect' => route('home')]
    );
}

现在，Laravel建议我在这种情况下转到他们的“确认”页面。但是，这就是我的困惑所在。首先，我已经通过我的React应用程序中的Stripe Elements向客户询问了他们的信用卡，因此转发到从Laravel生成的服务器端页面可能很难。我想在我的React Application中优雅地处理所有这些。

在将任何内容发送到服务器之前（通过Stripe Elements javascript已经为我处理过），我还已经通过上述弹出窗口确认了该卡对3D安全有效。因此文档说明：

在付款确认页上，将提示客户再次输入其信用卡信息，并执行Stripe要求的任何其他操作，例如“ 3D Secure”确认。

似乎无论如何这都是重复。有人可以指导我在这种情况下需要做什么吗？松散地在我的React App中，我做了以下工作：

生成服务器端的意图，然后将其触发以做出反应：在计费过程中：

stripe.confirmCardSetup(
            billingStatus.paymentIntent.client_secret,
            { 
              payment_method: {
                card: card,
                billing_details: {
                  name: 'Jenny Rosen'
                }
              }
            }
          )
            .then((res)=>{
              console.log(res);
              processPayment(  res );
            });

流程Payment方法命中服务器：

 var data = new FormData();
            data.append( "coreId", plan.id );
            data.append( "productId", plan.product_id );
            data.append( "planId", …

我正在尝试设置 React-Stripe-Elements，虽然我能够获得要渲染的基本表单，但它以一种非常时髦的方式进行。我什至尝试从我在网上找到的表单中添加 CSS，但它无法在 CardElement 中正确呈现。我怎样才能让 React-Stripe-Elements 使用正确的 UI 或 UI 呈现，甚至远程类似于文档上的 UI？

CardElement 当前渲染如下：

我的卡片元素文件如下所示：

import React from 'react';
import {CardElement} from 'react-stripe-elements';

class CardSection extends React.Component {
  render() {
    return (
      <label>
        Card details
        <CardElement style= {{ base: { color: '#fff',
    fontWeight: 500,
    fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
    fontSize: '15px',
    fontSmoothing: 'antialiased' }}} />
        </label>
    );
  }
};

export default CardSection;

我在有关如何使用react-stripe-elements创建自定义字段（如电话号码）的文档中迷失了。我已经获得了一个使用该<CardElement>组件收集卡信息的快速示例，但是我看不到任何地方如何向要令牌化的数据中添加电话号码的另一个输入。

我知道我可以从内置字段中接收带有卡信息的令牌，然后将该令牌以及未令牌化的电话号码传递给我的服务器，但我希望尽可能对所有数据进行分条令牌化。

此示例页面显示了许多收集电话号码的表格，但是源代码似乎主要显示了它们如何设置样式，并且无论哪种方式都没有使用react-stripe-elements，因此该示例不会像我一样镜像想要。

编辑：我发现这个问题的GitHub是提到实现自己的组件提供其他支持的参数，如他们的网页上name，adress_line1等看着被返回的道理，似乎phone根本不是一个支持的领域，所以我只需要以非令牌格式将该信息发送到服务器。如果那只是需要完成的方式，那么我对此表示完全满意。只是想确保我使用正确的方法进行操作。

我以前在这方面工作得很好，但我现在对发生的事情感到困惑。我将 Next.js 用于 SSR，我的 Pay 元素如下所示：

class Pay extends React.Component {
  constructor() {
    super();
    this.state = { stripe: null };
  }

  componentDidMount() {
    console.log(window.Stripe)
    this.setState({
      stripe: window.Stripe('pk_test_123'),
    });
  }

  render() {
    console.log(this.state)
    return (
      <StripeProvider apiKey={this.state.stripe}>
        <Elements>
          <InjectedCheckoutForm />
        </Elements>
      </StripeProvider>
    );
  }
}

以上抛出错误：

请将“apiKey”或“stripe”传递给 StripeProvider。如果您正在使用 'stripe' 但还没有 Stripe 实例，请显式传递 'null'。

不过，我在这里感到困惑的是，由于页面抛出 500 错误，因此窗口和状态都不会被记录。如果我删除 StripeProvider 组件，window.Stripe 会正常注销，而 this.state 包含我的 Stripe 状态，所以我不明白为什么会抛出错误。

我正在尝试使用 react-stripe-elements 在我的 React JS 应用程序中创建一个 Stripe 支付表单。当我使用该组件时，我收到以下消息。

错误：引发了跨域错误。React 无权访问开发中的实际错误对象。

如果我使用单个元素组件（即CardExpiryElement, CardCVCElement, PostalCodeElement），我就不会出错。

有人有什么想法吗？谢谢。

我正在使用react-stripe-elements，但自述文件并未解释如何添加自定义字体。

我有一个容器：

  <StripeProvider apiKey={stripePubkey}>
    <Elements>
      <Checkout {...this.props} />
    </Elements>
  </StripeProvider>

然后在我的Checkout中，我有一个包装信用卡输入：

<form id="payment-form" onSubmit={this.onSubmit}>
   <CreditCardInput />
</form>

然后我的包装信用卡输入是：

  <label>
    Card info
    <CardElement onChange={this.onCardChange} style={style} />
    <div id="card-errors" role="alert">{this.state.error.message}</div>
  </label>

传递给的样式<CardElement />：

const style = {
  base: {
    color: '#232e35',
    fontFamily: '"Podkova", "Courier New", serif',
    fontSize: '16px',
    '::placeholder': {
      color: '#9ab4b0'
    }
  },
  invalid: {
    color: '#cf3100',
    iconColor: '#cf3100'
  }
};