ApplePay using stripe-react-native show Payment Not Completed while return payment method result-CodePudding

I'm having trouble integrating ApplePay using stripe-react-native lib to my app. I followed the guide in stripe doc and manage to open the payment sheet. But when proceed to payment the UI loading for a bit then show 'Payment Not Completed!' then close the sheet. However the payment function still return the success result (payment method info). Fail payment on UI

My implementation code:

App.js

return (
    <Provider store={store}>
      <StripeProvider     publishableKey="pk_test_51L6AWmGROtrteUVR8vR4WLpcNT1KFiHJjWYjGYiYB0Fwh0HdRDkbj9fy4Hlp88z1S76TufwTL755QUnWswWUUhOT00UijEYwS3"
        merchantIdentifier="merchant.com.adamo.dropr"
      >
        <PersistGate persistor={persistor}>
          <StackNavigation />
          <FlashMessage position="top" floating={true} hideStatusBar={false} />
          <GlobalUI ref={GlobalService.globalUIRef} />
        </PersistGate>
      </StripeProvider>
    </Provider>
  );

open payment sheet file:

const pay = async () => {
    // ...
    const { paymentMethod, error } = await presentApplePay({
      cartItems: [
        {
          label: "Example item name",
          amount: "100.00",
          isPending: false,
          paymentType: "Immediate",
        },
      ],
      country: "GB",
      currency: "GBP",
      shippingMethods: [
        {
          amount: "20.00",
          identifier: "DPS",
          label: "Courier",
          detail: "Delivery",
          isPending: true,
        },
      ],
      requiredShippingAddressFields: ["emailAddress", "phoneNumber"],
      requiredBillingContactFields: ["phoneNumber", "name"],
    });
    console.log(paymentMethod);

    if (error) {
      console.log(error);
    } else {
      console.log("success");
    }
    // ...
  };

{isApplePaySupported && (
              <ApplePayButton
                onPress={pay}
                type="plain"
                buttonStyle="black"
                borderRadius={8}
                style={{
                  marginTop: Spacing.height5,
                  width: Spacing.width157,
                  height: Spacing.height52,
                }}
              />
            )}

And I already had the apple pay certificate added to the Stripe dashboard. Stripe dashboard

Please tell me if I missing something in the configuration or did something wrong with the implementation.

CodePudding user response：

there are two parts in the Apple Pay flow.

The first part is to call presentApplePay() to present the Apple PaymentSheet to your customer, so that they can choose the payment method for this payment. You've implemented the first part correctly.

The second part is to call confirmApplePayPayment() to submit the payment to Stripe, and this is missing in your flow. You should first send a request to your backend to create a PaymentIntent, and pass the PaymentIntent's client_secret back to your iOS app, so that you can call confirmApplePayPayment() with the returned client_secret.

You can refer to this doc and learn how to submit payment to Stripe. This guide also provides example code that you can directly use in your project.