react-nativein-app-purchasereact-native-iap

react-native-iap showing empty popup when adding new payment method

I have a problem, can anyone help?

I'm using react-native-iap for my app. iOS is working well but for android, on beta and store versions, the UI is strange.

When there is no payment method yet, if the user chooses a payment method, an empty popup shows instead of the credit card info input form.

enter image description here enter image description here

THis is my code of showing payment request

const _requestPurchase = async () => {
    const sku = selected.production_id
    try {
      showCustomDialog(
        <ActivityIndicator color={color.palette.black} size={"large"} />,
        { transparentBackDrop: true },
      )
      const products = await getProducts({ skus: [sku] })
      if (products.length > 0) {
        await requestPurchase({
          sku,
        })
        hideCustomDialog()
      } else {
        hideCustomDialog()
        showIAPDialog(selected.price_diamond, false)
        setSelected(null)
        packageSelected.current = null
      }
    } catch (err) {
      hideCustomDialog()
      showIAPDialog(selected.price_diamond, false)
      setSelected(null)
      packageSelected.current = null
    }
  }

function hideCustomDialog() {
  const sibling = siblings.pop()
  sibling && sibling.destroy()
}
Solution

  • I found out the reason.

    It is because of the setting from the in-app product page, we did not provide prices for all countries, then for empty price countries, the blank popup will be shown up. After clicking "Update exchange rates" and then saving, all things are fine now.

    enter image description here