Создание пользовательской формы Stripe с помощью React - PullRequest
Новая
       4

Создание пользовательской формы Stripe с помощью React

1 голос
/ 17 апреля 2020

То, что я пытаюсь сделать, - это создать пользовательскую форму полосы в ReactJS, я не хочу использовать react-stripe-elements, я уже создал пользовательскую форму, и после некоторого поиска я нашел решение, которое соответствует моим потребностям но решение было ванильным Javascript, поэтому он добавляет script к body и создает переменную global Stripe, которую можно использовать для доступа к API Stripe 

import React from "react";

const loadStripe = () => {
  if (!window.document.getElementById("stripe-script")) {
    var s = window.document.createElement("script");
    s.id = "stripe-script";
    s.type = "text/javascript";
    s.src = "https://js.stripe.com/v2/";
    s.onload = () => {
      window["Stripe"].setPublishableKey(
        "PUBLIC_KEY_HERE"
      );
    };
    window.document.body.appendChild(s);
  }

  return window.Stripe;
};

export default loadStripe;

и затем я использую его как 

let Stripe = loadStripe();
const onSubmit = (cardNumber,exp_month,exp_year,CVC) =>{

Stripe.card.createToken(
  {
    number: cardNumber,
    exp_month: exp_month,
    exp_year: exp_year,
    cvc: CVC,
  },
  (status, response) => {
    console.log(status);
    console.log(response);}
  }
}

. Очевидно, что вышеприведенное решение действительно работает, но я надеялся, что кто-то может указать мне правильное направление, чтобы я мог избавиться от компонента loadStripe и использовать что-то вроде npm package или решения React Specifi c (потому что, насколько я знаю, я не должен создавать и добавлять скрипты в теле, используя JS)

Любая помощь будет высоко ценится:)

1 Ответ

1 голос
/ 17 апреля 2020

Я надеялся, что кто-то может указать мне правильное направление, чтобы я мог избавиться от компонента loadStripe и использовать что-то вроде пакета npm или решения React Specifi c

Если вы ищете пакет npm, Stripe недавно выпустил собственную официальную библиотеку для загрузки Stripe. js, которую вы можете найти здесь:

https://www.npmjs.com/package/@stripe / stripe - js

На самом деле, @stripe/stripe-js работает во многом так же, как пользовательская функция loadStripe, которую вы сейчас имеете, как вы можете видеть здесь:

https://github.com/stripe/stripe-js/blob/master/src/shared.ts#L7 -L24

Должен заметить, что добавление скриптов в тело совершенно нормально, используя JavaScript, если вы хорошо разбираетесь в том, как скрипт загружается (то есть через asyn c обещаний).

При этом использование вашей loadStripe или официальной функции Stripe (@stripe/stripe-js) не является обязательным требованием. Контроль как и когда вводить Stripe. js в DOM очень полезен при рендеринге на стороне сервера (0). Но если это не то, что вы делаете, вы можете просто включить Stripe. js вручную (1) в <head> вашего html следующим образом: 

<html>
  <head>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

То, что я пытаюсь сделать, - это создать собственную форму полосы в ReactJS, я не хочу использовать response-stripe-elements

Если вы используете React v16.8 или выше, Официальная рекомендация будет использовать нашу новую библиотеку React, которую вы можете найти здесь:

https://www.npmjs.com/package/@stripe / Reaction-Stripe- js

Но если ваше сердце если вы не используете @stripe/react-stripe-js или более старую библиотеку react-stripe-elements, то определенно можно выполнить собственную интеграцию. Вот очень простой пример того, как вы могли бы сделать это:

https://codesandbox.io/s/eager-cdn-krumt

Я включаю Stripe. js здесь: https://codesandbox.io/s/eager-cdn-krumt?file= / public / index. html: 1062-1116

И интегрировать его в компонент здесь: https://codesandbox.io/s/eager-cdn-krumt?file= / src / Checkout. js

Обязательно замените pk_test_xyz своим собственным публикуемым ключом перед тестированием.

Надеюсь, это поможет!

[0] https://alligator.io/react/server-side-rendering/
[1] https://stripe.com/docs/js/including

...