> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# provide

This method allows you get a new instance of a component implementation.

```typescript TYPESCRIPT theme={"dark"}
async provide(props: AchManagerProps): Promise<StripeAchUserDetailsComponent | any>
```

## Parameters

<Expandable title="Parameters" defaultOpen>
  <ResponseField name="props" type="AchManagerProps" required>
    Object that provides the payment menthod type and callback functions for
    handling steps, errors and validation.

    <Expandable title="Properties">
      <ResponseField name="paymentMethodType" type="string" required>
        A unique string identifier for the payment method. Supported payment methods for current client session are returned in `onAvailablePaymentMethodLoad` callback.
      </ResponseField>

      <ResponseField name="onStep" type={`(data: AchStep) => void`}>
        Called whenever the component emits a new step. This usually happens when calling <a href={`#param-start`}>start</a> or <a href={`#param-submit`}>submit</a> or whenever the component collects data.

        <Expandable title="Parameters">
          <ResponseField name="UserDetailsRetrieved">
            A type representing the retrieved user details.

            <Expandable title="Properties">
              <ResponseField name="stepName" type="userDetailsRetrieved">
                The name of this component step.
              </ResponseField>

              <ResponseField name="firstName" type="string" label="Required">
                The first name previously sent on client session creation.
              </ResponseField>

              <ResponseField name="lastName" type="string" label="Required">
                The last name previously sent on client session creation.
              </ResponseField>

              <ResponseField name="emailAddress" type="string" label="Required">
                The email address previously sent on client session creation.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="UserDetailsCollected">
            A type representing the collected user details.

            <Expandable title="Properties">
              <ResponseField name="stepName" type="userDetailsCollected">
                The name of this component step.
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      This method will be called when an error occurs. It may return `PrimerCheckoutData` if the error occurs after the payment creation.

      <Note>
        Please note, that if you `override` this method, you *must* call the `errorHandler` to finalize the flow.
      </Note>

      <Expandable title="Properties">
        <ResponseField name="error" type="PrimerError" required>
          <Expandable title="Properties">
            <ResponseField name="errorId" type="String" required>
              A unique error identifier.
            </ResponseField>

            <ResponseField name="errorCode" type="String?">
              A unique error code.
            </ResponseField>

            <ResponseField name="description" type="String" required>
              A error description.
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="checkoutData" type="PrimerCheckoutData">
          <Expandable title="Properties" defaultOpen>
            <ResponseField name="payment" type="IPrimerCheckoutDataPayment">
              <Expandable title="Properties">
                <ResponseField name="id" type="string">
                  Primer's unique identifier for the payment.
                </ResponseField>

                <ResponseField name="orderId" type="string">
                  Your order identifier as provided in the client session.
                </ResponseField>

                <ResponseField name="paymentFailureReason" type="PrimerPaymentErrorCode">
                  Can be either `payment-failed` which is an error from the PSP side, or `cancelled-by-customer` which means the failure initiated on the customer side. I.e. cancelling a 3DS flow.
                </ResponseField>
              </Expandable>
            </ResponseField>

            <ResponseField name="additionalInfo" type="object">
              Custom information, that depends on the payment method.

              <Expandable title="Variations">
                <ResponseField name="XenditCheckoutVoucherAdditionalInfo">
                  <Expandable title="Properties" defaultOpen>
                    <ResponseField name="expiresAt" type="String" required />

                    <ResponseField name="couponCode" type="String" required />

                    <ResponseField name="retailerName" type="String" required />
                  </Expandable>
                </ResponseField>

                <ResponseField name="PromptPayCheckoutAdditionalInfo">
                  <Expandable title="Properties" defaultOpen>
                    <ResponseField name="expiresAt" type="String" required />

                    <ResponseField name="qrCodeUrl" type="String?" />

                    <ResponseField name="qrCodeBase64" type="String" required />
                  </Expandable>
                </ResponseField>

                <ResponseField name="MultibancoCheckoutAdditionalInfo">
                  <Expandable title="Properties" defaultOpen>
                    <ResponseField name="expiresAt" type="String" required />

                    <ResponseField name="entity" type="String" required />

                    <ResponseField name="reference" type="String" required />
                  </Expandable>
                </ResponseField>
              </Expandable>
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="handler" type="PrimerErrorHandler">
          <Expandable title="Methods">
            <ResponseField name="showErrorMessage(errorMessage: String | null)">
              Call with your custom error message.
            </ResponseField>
          </Expandable>
        </ResponseField>
      </Expandable>

      <ResponseField name="onInvalid" type={`(data: PrimerInvalidComponentData<AchValidatableData>) => void`}>
        Called to indicate that the component data was considered invalid during validation.

        <Expandable title="Parameters">
          <ResponseField name={`PrimerInvalidComponentData<AchValidatableData>`}>
            Interface that indicates that the data has been considered invalid after validation.

            <Expandable title="Properties">
              <ResponseField name="data" type="AchValidatableData">
                The data that failed validation.

                <Expandable>
                  <ResponseField name="AchFirstName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="firstName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated first name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchLastName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="lastName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated last name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchEmailAddress">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="emailAddress">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated email address.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="errors" type="PrimerValidationError[]">
                A list of `PrimerValidationError` explaining why the data is considered invalid.

                <ResponseField name="PrimerValidationError[]">
                  <Expandable>
                    <ResponseField name="PrimerValidationError">
                      <Expandable title="Properties">
                        <ResponseField name="errorId" type="string">
                          A unique error identifier.
                        </ResponseField>

                        <ResponseField name="description" type="string">
                          A error description.
                        </ResponseField>

                        <ResponseField name="diagnosticsId" type="string">
                          A unique diagnostics id for the given error.
                        </ResponseField>
                      </Expandable>
                    </ResponseField>
                  </Expandable>
                </ResponseField>
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onValid" type={`(data: PrimerValidComponentData<AchValidatableData>) => void`}>
        Called to indicate that the component data was successfully validated.

        <Expandable title="Parameters">
          <ResponseField name={`PrimerValidComponentData<AchValidatableData>`}>
            Interface that indicates that the data has been successfully validated.

            <Expandable title="Properties">
              <ResponseField name="data" type="AchValidatableData">
                The successfully validated data.

                <Expandable>
                  <ResponseField name="AchFirstName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="firstName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated first name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchLastName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="lastName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated last name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchEmailAddress">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="emailAddress">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated email address.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>
                </Expandable>
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onValidating" type={`(data: PrimerValidatingComponentData<AchValidatableData>) => void`}>
        Called to indicate that the component data is in the process of being validated.

        <Expandable title="Parameters">
          <ResponseField name={`PrimerValidatingComponentData<AchValidatableData>`}>
            Interface that indicates that data is currently in the process of being validated.

            <Expandable title="Properties">
              <ResponseField name="data" type="AchValidatableData">
                The data being validated.

                <Expandable>
                  <ResponseField name="AchFirstName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="firstName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated first name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchLastName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="lastName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated last name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchEmailAddress">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="emailAddress">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated email address.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>
                </Expandable>
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="onValidationError" type={`(data: PrimerComponentDataValidationError<AchValidatableData>) => void`}>
        Called to indicated an error that occurred during component data validation.

        <Expandable title="Parameters">
          <ResponseField name={`PrimerComponentDataValidationError<AchValidatableData>`}>
            Interface that represents an error that occurred during the validation process.

            <Expandable title="Properties">
              <ResponseField name="data" type="AchValidatableData">
                The data for which an error ocurred during validation.

                <Expandable>
                  <ResponseField name="AchFirstName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="firstName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated first name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchLastName">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="lastName">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated last name.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>

                  <ResponseField name="AchEmailAddress">
                    <Expandable title="Properties">
                      <ResponseField name="validatableDataName" type="emailAddress">The name of this component-validatable data.</ResponseField>

                      <ResponseField name="value" type="string">
                        The validated email address.
                      </ResponseField>
                    </Expandable>
                  </ResponseField>
                </Expandable>
              </ResponseField>

              <ResponseField name="error" type="PrimerError">
                The `PrimerError` that ocurred during the validation attempt.

                <ResponseField name="PrimerError">
                  <Expandable title="Properties">
                    <ResponseField name="errorId" type="string" required>
                      A unique error identifier.
                    </ResponseField>

                    <ResponseField name="errorCode" type="string">
                      A unique error code.
                    </ResponseField>

                    <ResponseField name="description" type="string" required>
                      A error description.
                    </ResponseField>

                    <ResponseField name="recoverySuggestion" type="string">
                      A recovery suggestion for the given error. In case it's present, use it to try
                      to recover from error.
                    </ResponseField>

                    <ResponseField name="diagnosticsId" type="string">
                      A unique diagnostics id for the given error.
                    </ResponseField>
                  </Expandable>
                </ResponseField>
              </ResponseField>
            </Expandable>
          </ResponseField>
        </Expandable>
      </ResponseField>
    </Expandable>
  </ResponseField>
</Expandable>

## Supported payment method types

<Expandable defaultOpen>
  <table style={{width: "100%", borderCollapse: "collapse", borderSpacing: "0"}}>
    <tr style={{backgroundColor: "#f1f1f1", width: "100%"}}>
      <th style={{padding: "10px", textAlign: "left", width: "100%"}}>Type</th>
      <th style={{padding: "10px", textAlign: "left", width: "100%"}}>paymentMethodType</th>
    </tr>

    <tr style={{width: "100%"}}>
      <td style={{padding: "10px"}}>
        <a style={{color: "#0070f3", fontSize: "14px", textDecoration: "none", fontWeight: "500"}} href={`#param-stripe-ach-user-details-component`}>
          StripeAchUserDetailsComponent
        </a>
      </td>

      <td style={{padding: "10px", width: "100%"}}>
        <a style={{color: "#0070f3", fontSize: "14px", textDecoration: "none", fontWeight: "500"}} href="/docs/sdk/react-native/v2.x.x/primer-headless-checkout/ach-headless-manager/provide">
          STRIPE\_ACH
        </a>
      </td>
    </tr>
  </table>
</Expandable>

## Returns

An instance of a component, depending on the `paymentMethodType`:

<Expandable title="Common API and available components" defaultOpen>
  <Expandable title="Common API" defaultOpen>
    <ResponseField name="start()">
      Initialize the component by calling the `start` function. This method should be called only once.
    </ResponseField>

    <ResponseField name="submit()">
      Call `submit` function in order to process collected data and move component to next state.
    </ResponseField>
  </Expandable>

  <Expandable title="Supported types" defaultOpen>
    <ResponseField name="StripeAchUserDetailsComponent">
      <Expandable title="API">
        <ResponseField name="handleFirstNameChange(value: string)">
          Sets the customer's first name.

          To validate the collected data, you can refer to the appropriate
          [AchManagerProps](#param-props)
          callback functions.
        </ResponseField>

        <ResponseField name="handleLastNameChange(value: string)">
          Sets the customer's last name.

          To validate the collected data, you can refer to the appropriate
          [AchManagerProps](#param-props)
          callback functions.
        </ResponseField>

        <ResponseField name="handleEmailAddressChange(value: string)">
          Sets the customer's email address.

          To validate the collected data, you can refer to the appropriate
          [AchManagerProps](#param-props)
          callback functions.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</Expandable>

## Example

```typescript TYPESCRIPT theme={"dark"}
// 👇 Add this
const achManagerProps: AchManagerProps = {
  paymentMethodType: "STRIPE_ACH",
  onStep: (data: AchStep) => {
    switch (data.stepName) {
      case "userDetailsRetrieved":
        // Pre-populate your form with first name, last name and email address.
        break;

      case "userDetailsCollected":
        // Form can be hidden (eg.: pop the backstack). Start listening for DisplayStripeAchMandateAdditionalInfo events.
        break;
    }
  },
  onError: (error: PrimerError) => {
    // An error that occurred during the component's operation.
  },
  onInvalid: (data: PrimerInvalidComponentData<AchValidatableData>) => {
    // Data was considered invalid during validation.
    switch (data.data.validatableDataName) {
      case "firstName":
        // ...
        break;
      case "lastName":
        // ...
        break;
      case "emailAddress":
        // ...
        break;
    }
  },
  onValid: (data: PrimerValidComponentData<AchValidatableData>) => {
    // Data was successfully validated.
    switch (data.data.validatableDataName) {
      case "firstName":
        // ...
        break;
      case "lastName":
        // ...
        break;
      case "emailAddress":
        // ...
        break;
    }
  },
  onValidating: (data: PrimerValidatingComponentData<AchValidatableData>) => {
    // Data is in the process of being validated.
    switch (data.data.validatableDataName) {
      case "firstName":
        // ...
        break;
      case "lastName":
        // ...
        break;
      case "emailAddress":
        // ...
        break;
    }
  },
  onValidationError: (
    data: PrimerComponentDataValidationError<AchValidatableData>
  ) => {
    // Error occurred during data validation.
    switch (data.data.validatableDataName) {
      case "firstName":
        // ...
        break;
      case "lastName":
        // ...
        break;
      case "emailAddress":
        // ...
        break;
    }
  },
};
const achManager = new AchManager();
const stripeAchUserDetailsComponent: StripeAchUserDetailsComponent =
  await achManager.provide(achManagerProps);
```
