Почему Stripe.js не загружается в React с реакцией stripe-elements?

Question

Я играю с Stripe Elements, используя response-stripe-elements. В очень простом тестовом приложении я добавил тег сценария Stripe в раздел head моего файла index.html:

<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/) на этой странице, чтобы использовать реактивные элементы-полоски».

ПочемуStripe.js не обнаружен, даже если я скопировал / вставил ссылку в голове? Есть один похожий вопрос о StackOverflow, но ответ, похоже, «нестабильное подключение к Интернету» - что я не думаю, имеет место в моейситуация.

Answer 1

Оказывается, все это происходило, потому что я использовал свой секретный ключ вместо своего публикуемого ключа при использовании элемента StripeProvider. Как только я заменил секретный ключ на публикуемый ключ, все работало нормально.