import { useAdyenCheckout } from '@adyen/react-native';

const MyCheckoutView = () => {
  const { start } = useAdyenCheckout();

  return (
    <Button
      title="Open DropIn"
      onPress={() => {
        start('dropIn');
      }}
    />
  );
};

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onComplete = useCallback((result, component) => {
  // Payment was completed - call `component.hide(true)` to dismiss the payment UI.
  // Call /sessions/(sessionId)?sessionResult={result} API to get more information about the payment outcome.
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI.
}, []);

<AdyenCheckout
  config={configuration}
  session={session}
  onComplete={onComplete}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onSubmit = useCallback((data, component) => {
  // Call your server to make the `/payments` request
  // Pass `returnUrl: data.returnUrl` for cross-platform redirect flow
  // If response contains `action`, call `component.handle(response.action)`
  // Otherwise, call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onAdditionalDetails = useCallback((paymentData, component) => {
  // Call your server to make the `/payments/details` request
  // Call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI
}, []);

<AdyenCheckout
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={onSubmit}
  onAdditionalDetails={onAdditionalDetails}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

const handleSubmit = (paymentData, nativeComponent) => {
  server.makePayment(paymentData)
    .then((response) => {
      if (response.action) {
        nativeComponent.handle(response.action);
      } else {
        nativeComponent.hide(response.result);
      }
    });
};

<AdyenCheckout
  ...
  onSubmit={handleSubmit}
  >
    ...
</AdyenCheckout>

import { AdyenAction } from '@adyen/react-native';

const data = await AdyenAction.handle(apiResponse.action, { environment: 'test', clientKey: '{YOUR_CLIENT_KEY}');
result = await ApiClient.paymentDetails(data);