Saya mencoba mengintegrasikan pembayaran Braintree untuk aplikasi Flutter saya. Saya memiliki plugin untuk menangani iOS/Android dan sedang menulis implementasi khusus untuk web.

Ini adalah solusi yang cukup sederhana saya pikir, saya menggunakan Braintree Javascript SDK/Drop di UI (GitHub tutorial) untuk merender layar pembayaran menggunakan HTML. Bagian ini saya kerjakan, namun untuk memproses pembayaran ini dengan benar, saya perlu mengambil respons dari fungsi JavaScript - khususnya string nonce pembayaran.

Untuk melakukan ini, saya menggunakan beberapa metode saluran dan sihir panah untuk memanggil fungsi javascript ini

async function payment(auth) {
 braintree.dropin.create({
   authorization: auth,
   selector: '#dropin-container'
 }, function (errCreate, instance) {
    document.getElementById("submit-button").addEventListener('click', function () {
        if(errCreate) {
            console.log("Error", errCreate);
            return;
        }
        instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
            if (requestPaymentMethodErr) {
                console.log('Error', requestPaymentMethodErr);
                return;
            }
            return payload.nonce;
        });
    });
});
}

Fungsi ini tampaknya berfungsi, mengembalikan data dan nonces pembayaran dan semua itu. Dalam file dart (terpisah) tempat saya sebenarnya merender widget, saya mendeklarasikan fungsinya seperti:

// EXTERNAL JAVASCRIPT ==========================================

@JS()
external void initBraintree(auth);

@JS()
external payment(String auth);

Dan ini sepertinya berfungsi, memanggil fungsi pada klik tombol jadi itu bagus. Masalahnya adalah ketika saya memanggil fungsi async ini, ia mengembalikan janji, secara teoritis dart seharusnya tidak tahu bagaimana menangani ini, untungnya mereka memiliki metode yang disebut promiseToFuture yang seharusnya menangani ini saja. Saya telah menggunakannya seperti ini:

  Future<BraintreeDropInResult> start(BuildContext context, BraintreeDropInRequest request) async {
    // create div with html embedded
    String htmlL = """<div id="checkout-message"></div>
        <div id="dropin-container"></div>
    <button id="submit-button">Submit payment</button>""";
    var paymentDiv = html.DivElement()..appendHtml(htmlL);

    // attach to payment container
    ui.platformViewRegistry.registerViewFactory('braintree-container', (int viewId) => paymentDiv);

    // call js function
    var promise = payment(request.clientToken);
    String nonce = await promiseToFuture(promise);
 ...

Namun itu tidak bekerja. Fungsi JavaScript tampaknya mengembalikan objek janji namun fungsi janjiToFuture tidak pernah menunggunya, hanya langsung mengembalikan nol setiap kali.

Telah mengerjakan ini beberapa saat dan akhirnya merasa sangat dekat tetapi ini menjadi duri nyata di pihak saya sehingga bantuan apa pun sangat dihargai!

0
Daniel N. 4 April 2021, 19:51

1 menjawab

Jawaban Terbaik

Anda bisa melakukan sesuatu seperti ini. Yaitu membuat janji, dan setelah semuanya baik-baik saja -- dan tombol diklik -- itu akan diselesaikan dengan nonce.

Tentu saja, ini hanya akan berfungsi untuk klik pertama tombol. Karena, sekali janji diselesaikan atau ditolak, itu tidak akan mengubah status dan hasilnya lagi.

async function payment(auth) {
  return new Promise((resolve, reject) => {
    braintree.dropin.create({
        authorization: auth,
        selector: '#dropin-container'
      },
      (createError, instance) => {
        //probably there is no need to attach the eventhandler
        //if the was an error 
        if (createError) {
          console.log("Error", createError);
          return reject(createError);
        }
        document.getElementById("submit-button").addEventListener("click", 
          () => {
            instance.requestPaymentMethod((rpmError, payload) => {
              if (rpmError) {
                console.log("Error", rpmError);
                return reject(rpmError);
              }
 
              resolve(payload.nonce);
            });
          });
      }
    );
  });
}

1
derpirscher 5 April 2021, 18:24