Stripe elements - issue with apple pay - payment window appear and disappear in a second

Viewed 697

I connected Stipe payments to the site using js API v3 and stripe elements. Everything works (including google pay) expect apple pay. When a user clicks on apple pay button - payment window appears just for a brief second and then disappear. The site domain was verified according to Stripe wiki for js v2, v3 doesn't have such page. Can't find any errors. Will be grateful for any hints or even direction. Thank you.

Code sample:

          paymentRequest = stripe.paymentRequest({
          country: 'GB',
          currency: 'gbp',
          total: {
              label: 'Upgrade',
              amount: 11400,
          },
          requestPayerName: false,
          requestPayerEmail: true,
      });

      var prButton = elements.create('paymentRequestButton', {
          paymentRequest: paymentRequest,
      });

      paymentRequest.canMakePayment().then(function (result) {
                  if (result) {
                      prButton.mount('#payment-request-button');
                  } else {
                      document.getElementById('payment-request-error').innerHTML = "Your browser doesn't support Google or Apple Wallet";
                      document.getElementById('payment-request-button').style.display = 'none';
                  }

                  paymentRequest.on('paymentmethod', function (ev) {
                      stripe.confirmCardPayment(
                          clientSecret, {
                              payment_method: ev.paymentMethod.id
                          }, {
                              handleActions: false
                          }
                      ).then(function (confirmResult) {
                          if (confirmResult.error) {
                              ev.complete('fail');
                          } else {
                              ev.complete('success');
                              if (confirmResult.paymentIntent.status === "requires_action") {
                                  stripe.confirmCardPayment(clientSecret).then(function (result) {
                                      if (result.error) {
                                          alert("Error, try new payment method");
                                      } else {
                                          orderComplete(confirmResult.paymentInten.id);
                                      }
                                  });
                              } else {
                                  orderComplete(confirmResult.paymentInten.id);
                              }
                          }
                      });
                  });
                
                  /*
                  Some code
                  */
                 
                  // update request price if user select diffirent price
                  paymentRequest.update({
                      total: {
                          label: 'Upgrade',
                          amount: finalPrice * 100,
                      },
                  })
1 Answers

Does Apple Pay work for you in the example in the docs? Do you have an example of your implementation available online somewhere to access, or can you reproduce this in a JSFiddle or CodeSandbox?

Two suggestions to try:

  1. In your calls to orderComplete you appear to have a typo on paymentInten**t**.id -- missing the t at the end in both instances.
  2. I wonder if your paymentRequest.update is causing issues. I'm not familiar with the behaviour of this part of the API so I'd recommend disabling to simplify diagnostics.
Related