expo#Linking JavaScript Examples

export default function(containerRef) {
  return useLinking(containerRef, {
    prefixes: [Linking.makeUrl('/')],
    config: {
      Root: {
        path: 'root',
        screens: {
          Home: 'home',
          Links: 'links',
          Settings: 'settings',
        },
      },
    },
  });
}

export function IDealScreen({
  navigation,
  payment,
  initiatePayment,
  clearError,
}) {
  const [issuer, setIssuer] = React.useState("");
  const [validIssuer, setValidIssuer] = React.useState(false);
  const [startPayment, setStartPayment] = React.useState(false);

  // react to change in error
  React.useEffect(() => {
    errorAlert(payment.error);
    clearError();
  }, [payment.error]);

  // react to change in payment response
  React.useEffect(() => {
    const { paymentRes } = payment;
    async function performAction() {
      if (paymentRes && validIssuer && startPayment) {
        try {
          addLinkingListener();

          await WebBrowser.openBrowserAsync(paymentRes.redirect.url);
          // https://github.com/expo/expo/issues/5555
          if (Constants.platform.ios) {
            removeLinkingListener();
          }
        } catch (err) {
          errorAlert(err.message);
        }
      }
    }
    performAction();
  }, [payment.paymentRes]);

  const handleRedirect = (event) => {
    if (Constants.platform.ios) {
      WebBrowser.dismissBrowser();
    } else {
      removeLinkingListener();
    }

    let data = Linking.parse(event.url);

    if (data.queryParams && data.queryParams.type === "complete") {
      navigation.navigate("Result", { params: data.queryParams });
    } else {
      errorAlert("Payment not complete");
      console.log(data);
    }
  };
  const addLinkingListener = () => {
    Linking.addEventListener("url", handleRedirect);
  };

  const removeLinkingListener = () => {
    Linking.removeEventListener("url", handleRedirect);
  };

  const validateIssuer = (txt) => {
    setIssuer(txt.replace(/\s/g, ""));
    // do any needed validation
    setValidIssuer(!!txt);
  };

  const handlePayment = () => {
    initiatePayment({
      paymentMethod: {
        type: "ideal",
        issuer,
      },
    });
    setStartPayment(true);
  };

  const getBanks = () => {
    let items = [];
    if (payment.paymentMethodInUse && payment.paymentMethodInUse[0]) {
      const select = payment.paymentMethodInUse[0].details.filter(
        (it) => it.type === "select"
      );
      items = select.length > 0 ? select[0].items : [];
    }
    return items;
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.cardItemContainer}>
        <Text style={!validIssuer && styles.invalidTxt}>Select Bank</Text>
        <Picker
          selectedValue={issuer}
          style={[styles.txtField, !validIssuer && styles.invalidField]}
          onValueChange={validateIssuer}
        >
          <Picker.Item label="" value="" />
          {getBanks().map((it) => (
            <Picker.Item label={it.name} value={it.id} key={it.id} />
          ))}
        </Picker>
      </View>
      <View style={styles.payButtonContainer}>
        <Button
          onPress={handlePayment}
          title="Pay now"
          color="#0ABF53"
          disabled={!validIssuer}
          accessibilityLabel="Checkout and Pay"
        />
      </View>
    </SafeAreaView>
  );
}

export function PayByLinkScreen(props) {
  const [result, setResult] = React.useState(false);

  // react to change in paymentLinksRes
  React.useEffect(() => {
    async function performAction() {
      const { paymentLinksRes } = props.payment;
      if (paymentLinksRes && paymentLinksRes.url) {
        addLinkingListener();
        await WebBrowser.openBrowserAsync(paymentLinksRes.url);
        // https://github.com/expo/expo/issues/5555
        if (Constants.platform.ios) {
          removeLinkingListener();
        }
      }
    }
    performAction();
  }, [props.payment.paymentLinksRes]);

  // react to change in error
  React.useEffect(() => {
    errorAlert(props.payment.error);
    props.clearError();
  }, [props.payment.error]);

  const handleRedirect = (event) => {
    if (Constants.platform.ios) {
      WebBrowser.dismissBrowser();
    } else {
      removeLinkingListener();
    }

    let data = Linking.parse(event.url);
    console.log(data);
    if (data) {
      setResult(true);
    }
  };
  const addLinkingListener = () => {
    Linking.addEventListener("url", handleRedirect);
  };

  const removeLinkingListener = () => {
    Linking.removeEventListener("url", handleRedirect);
  };

  const handlePayByLink = async () => {
    props.getPaymentLinks();
  };

  const handleHelpLink = () => {
    Linking.openURL("https://docs.adyen.com/development-resources/webhooks");
  };

  const handleBack = () => {
    setResult(false);
  };

  return (
    <View style={styles.container}>
      {result ? (
        <View style={styles.infoText}>
          <Text style={styles.helpMsg}>
            Payment process completed. You need to
            <Text style={styles.linkText} onPress={handleHelpLink}>
              {" "}
              setup a webhook{" "}
            </Text>
            to handle the result in the app.
          </Text>
          <View style={styles.payButtonContainer}>
            <Button
              onPress={handleBack}
              title="Back"
              color="#0ABF53"
              accessibilityLabel="Checkout and Pay"
            />
          </View>
        </View>
      ) : (
        <SafeAreaView style={styles.container}>
          <Cart />
          <View style={styles.payButtonContainer}>
            <Button
              onPress={handlePayByLink}
              title="Checkout"
              color="#0ABF53"
              accessibilityLabel="Checkout and Pay"
            />
          </View>
        </SafeAreaView>
      )}
    </View>
  );
}