Question

我正在使用react-stripe-elements来玩Stripe Elements。在一个非常基本的测试应用程序中，我已经在index.html文件的头部添加了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上也有一个类似的问题，但答案似乎是“网络连接不稳定”-我认为我的情况并非如此。

Answer 1

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

为什么Stripe.js无法通过react-stripe-elements加载到React中？

1 个答案: