Блог

Главная - Вопросы по программированию - React-Native, элемент Stripe card не отображается для текущего ключа API

React-Native, элемент Stripe card не отображается для текущего ключа API

#javascript #html #react-native #stripe-payments #react-native-webview

#javascript #HTML #react-native #stripe-платежи #react-native-webview

Вопрос:

В моем проекте, основанном на react, я использовал react-native-webview и stripe js (https://js.stripe.com/v3 )

Используя stripe js, я создаю элемент card для сбора сведений о карте

 var elements = stripe.elements()
var card = elements.create('card');
card.mount('#card-element');

когда пользователь нажимает кнопку отправки, я вызываю
функцию stripe.confirmPaymentIntent() для завершения платежа.

Но я сталкиваюсь с проблемой, когда я использую ПРОИЗВОДСТВЕННЫЙ элемент PUBLIC_KEY card, который не отображается, для правильного отображения тестового элемента PUBLIC_KEY card.

Есть решение?

Мои данные о проекте

  • «реагировать»: «16.9.0»
  • «react-native»: «0.61.5»
  • «react-native-webview»: «10.3.2»

версия xcode — 12.1 Версия IOS — 14.1

 function stripeCheckoutRedirectHTML(PUBLIC_KEY) {
  return `<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<body>
  <!-- Load Stripe.js on your website. -->
  <script src="https://js.stripe.com/v3"></script>
  <h1 id="error-message"></h1>
  <form method="post" id="payment-form">
    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div id="card-element">
        <!-- A Stripe Element will be inserted here. -->
      </div>
    </div>
    <button>Submit Payment</button>
  </form>
  <script>
    var stripe = Stripe(${PUBLIC_KEY});
    var elements = stripe.elements();
    var card = elements.create('card');
    card.mount('#card-element');
  </script>
</body>

</html>`;
}
  
 export default function Payment({route, navigation}) {
  return (
    <View style={styles.container}>
      <View style={styles.body} showsVerticalScrollIndicator={false}>
        <WebView
          originWhitelist={['*']}
          source={{
            html: stripeCheckoutRedirectHTML(Config.PUBLIC_KEY),
          }}
        />
      </View>
    </View>
  );
}

Ответ №1:

Stripe.js требуется, чтобы вы запускали свой сайт через HTTPS в рабочей среде. Чтобы упростить тестирование, это ограничение снимается при использовании тестовых ключей API, поэтому оно работало у вас раньше. React Native по умолчанию будет обслуживать любой необработанный HTML about:blank . Итак, когда вы переключились с вашего теста на живой публикуемый ключ, Stripe выдал бы сообщение об ошибке, в котором говорится, что live Stripe.js при интеграции должен использоваться протокол HTTPS. Есть два варианта исправить это:

  • Вместо предоставления необработанного HTML для компонента WebView вы можете разместить свой сайт по протоколу HTTPS и передать его в качестве исходного URI при создании экземпляра компонента.
  • Вы можете указать параметр baseUrl, который указывает на сайт, обслуживаемый по протоколу https. React Native about:blank заменит этот URL, и любые неабсолютные ссылки в необработанном HTML будут относиться к этому URL. Например:
 export default function Payment({route, navigation}) {
  return (
    <View style={styles.container}>
      <View style={styles.body} showsVerticalScrollIndicator={false}>
        <WebView
          originWhitelist={['*']}
          source={{
            html: stripeCheckoutRedirectHTML(Config.PUBLIC_KEY),
            baseUrl: 'https://example.com',
          }}
        />
      </View>
    </View>
  );
}