Интеграция Ioni c v3 с новыми StripeJS / Stripe Elements (v.7.26.0) - PullRequest
Новая
       6

Интеграция Ioni c v3 с новыми StripeJS / Stripe Elements (v.7.26.0)

0 голосов
/ 28 февраля 2020

У меня две разные проблемы при интеграции новой версии полосы в мое приложение ioni c v3 (пожалуйста, никаких предложений по обновлению до ioni c v5. Это сейчас невозможно для нашей команды!)

В моем ionDidLoad у меня есть: 

var stripe = Stripe('pk_test_OwV8RfgF7JQp1FEW3OfqmPpz');
  var elements = stripe.elements();
  var style = {
    base: {
      color: "#32325d",
    }
  };

  var card = elements.create("card", { style: style });
  card.mount("#card-element");

  card.addEventListener('change', ({error}) => {
    const displayError = document.getElementById('card-errors');
    if (error) {
      displayError.textContent = error.message;
    } else {
      displayError.textContent = '';
    }
  });

  var form = document.getElementById('payment-form');

  form.addEventListener('submit', function(ev) {
    ev.preventDefault();

    stripe.confirmCardPayment( this.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Jenny Rosen'
        }
      }
    }).then(function(result) {
      if (result.error) {
        // Show error to your customer (e.g., insufficient funds)
        console.log(result.error.message);
      } else {
        // The payment has been processed!
        if (result.paymentIntent.status === 'succeeded') {

          /****  this.postOrder(); */

          // Show a success message to your customer
          // There's a risk of the customer closing the window before callback
          // execution. Set up a webhook or plugin to listen for the
          // payment_intent.succeeded event that handles any business critical
          // post-payment actions.
        }
      }
    });
  });

Задача № 1: var stripe = Stripe ('pk_test _ ****************** * ') VSCode дает мне страшную красную волнистую линию под строкой "Stripe (' pk_test ...)". Ошибка VS Code равна "Значение типа typeof Stripe не вызывается. Вы хотели включить 'new'? Ts (2348) " У меня есть googled et c. Но я не знаю, как устранить эту ошибку. Я пытался объявить" Stripe ", но это не так помогите. Я знаю, что Stripe является ссылкой в ​​Stripe JS.

Задача № 2: stripe.confirmCardPayment (this.clientSecret, {... Опять красная волнистая линия, на этот раз в "this.clientSecret". this.clientSecret определяется в моем приложении возвратом вызова paymentIntents на мой сервер следующим образом: 

this.inStockService.paymentIntentRoutine(this.ot).subscribe(res => {
        this.clientSecret = res;
      });

Ошибка из VSCode "Свойство" clientSecret 'не существует для типа' HTMLElement'.ts (2339) ". Мне пока недостаточно разработчика, чтобы понять, что или почему это происходит.

Если кто-то может помочь мне решить эти проблемы, я был бы всегда благодарен.

1 Ответ

1 голос
/ 28 февраля 2020

Выпуск № 1:

При условии, что вы импортировали Stripe с помощью <script src="https://js.stripe.com/v3/"></script> в своем индексе. html - объект Stripe становится доступным через глобальный объект window как window.Stripe, вам нужно объявить Stripe в компонент сразу после импорта: 

> declare var Stripe: any;

Или получите доступ к полосе через окно ['Stripe'] в вашем коде, что также не очень хорошо.

Также вы можете установить типы для версии Stripe, которую вы используется для предотвращения проблем с TypeScript. Вот v3:

npm install --save @types/stripe-v3.

Выпуск № 2:

Вам необходимо использовать функции жирной стрелки, чтобы «this» не указывало на область действия вашей анонимной функции: 

form.addEventListener('submit', ev => {

    ev.preventDefault();

    stripe.confirmCardPayment( this.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Jenny Rosen'
        }
      }
    }).then( result => {
      if (result.error) {
        // Show error to your customer (e.g., insufficient funds)
        console.log(result.error.message);
      } else {
        // The payment has been processed!
        if (result.paymentIntent.status === 'succeeded') {

          /****  this.postOrder(); */

          // Show a success message to your customer
          // There's a risk of the customer closing the window before callback
          // execution. Set up a webhook or plugin to listen for the
          // payment_intent.succeeded event that handles any business critical
          // post-payment actions.
        }
      }
    });
  });
...