为什么 Stripe.js 没有使用 react-stripe-elements 在 React 中加载？答案

【问题标题】：Why is Stripe.js not loading in React with react-stripe-elements?为什么 Stripe.js 没有使用 react-stripe-elements 在 React 中加载？
【发布时间】：2020-02-26 10:29:35
【问题描述】：

我正在使用 react-stripe-elements 使用 Stripe Elements。在一个非常基本的测试应用程序中，我在 index.html 文件的 head 部分添加了 Stripe 脚本标签：

<script crossorigin src="https://js.stripe.com/v3/"></script>

我的 App.js 文件几乎遵循 Stripe 教程：

import React from 'react';
import './App.css';
import CheckoutForm from './CheckoutForm.js' 
import {Elements, StripeProvider} from 'react-stripe-elements';


function App() {
  return (
      <div>
        <StripeProvider apiKey="...my API key...">
          <div className="example">
            <h1>React Stripe Elements Example</h1>
            <Elements>
              <CheckoutForm />
            </Elements>
          </div>
        </StripeProvider>
      </div> 
  );
}

export default App;

但是，我收到一条错误消息：“错误：请在此页面上加载 Stripe.js (https://js.stripe.com/v3/) 以使用 react-stripe-elements。”

为什么即使我在头部复制/粘贴了链接，也没有检测到 Stripe.js？ StackOverflow 上有一个类似的问题，但答案似乎是“不稳定的互联网连接”——我认为我的情况并非如此。

【问题讨论】：

标签： reactjs stripe-payments

【解决方案1】：

事实证明，这一切都是因为我在使用 StripeProvider 元素时使用的是我的密钥而不是我的可发布密钥。一旦我用可发布的密钥替换了密钥，一切正常。

【讨论】：