reactjs - Constructorul ApplePaySession din Braintree-Web este nedefinit


Încerc să implementez Apple Pay la finalizarea comenzii într-un proiect React folosind Typescript. Am instalat pachetul braintree-web și am urmat instrucțiunile de pe site-ul Braintree pentru a inițializa ApplePaySession. Deși Typescript îmi permite să compilez proiectul, în browser apelul meu la new ApplePaySession(3, paymentRequest); este undefined. M-am zbătut, dar nu pot înțelege ce nu merge bine. Iată un fragment de cod pentru modul în care am inițializat ApplePay.

import { applePay, ApplePayStatusCodes, ApplePaySession } from 'braintree-web';

...

beginApplePay() {
    if (!this.btApplePayInstance) {
      //throw an erro
    }

    const paymentRequest = this.createPaymentRequest();
    const session = this.createSession(paymentRequest);

    session && session.begin();
  }

  createSession(
    paymentRequest: braintree.ApplePayPaymentRequest
  ): braintree.ApplePaySession | null {
    let session: braintree.ApplePaySession;
    console.log('creating session');
    console.log('Sample payment request: ', paymentRequest);
    console.log(
      'Supports API v3: ' + window.ApplePaySession.supportsVersion(3)
    );


    try {
      debugger;
      session = new ApplePaySession(3, paymentRequest); //this is where it fails
      console.log(session);
    } catch (err) {
      console.log(err);
      //throw an error
      return null;
    }

Acesta este mesajul pe care îl afișează browserul meu: TypeError: undefined nu este un constructor (evaluarea 'new braintree_web__WEBPACK_IMPORTED_MODULE_1__["ApplePaySession"](3, paymentRequest)')

Orice informație despre ceea ce merge prost ar fi foarte apreciată.

Răspuns #1

Actualizare: Am descoperit că aceasta este o problemă specifică TypeScript. În definițiile de tip pentru braintree-web, ei definesc un tip de ApplePaySession. Când proiectul este construit, browserul consideră că ApplePaySession este o referință la o anumită clasă din braintree-web, când de fapt este o referință la ApplePaySession nativ în browserul Safari.

Soluția pe care am găsit-o a fost să folosesc tipurile pentru ApplePayWebJS și să fac referire la ApplePaySession furnizat acolo. Totuși, acest lucru a produs unele probleme mai târziu când am încercat să fac ca tipurile celor două pachete să funcționeze bine împreună.

Răspunsul #2

Am descoperit că adăugarea

<script src="https://js.braintreegateway.com/web/3.55.0/js/apple-pay.min.js"></script>

Fișierul Js de la nivelul superior a funcționat pentru mine, apoi am folosit pur și simplu @ts-ignore când foloseam sesiunea.

Știu, este o soluție provizorie urâtă... Dacă ai găsit o soluție mai bună, te rog să o împărtășești.