> ## 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

**Parameters**

**props** `AchManagerProps` *required*

Object that provides the payment menthod type and callback functions for
handling steps, errors and validation.

**Properties**

**paymentMethodType** `string` *required*

A unique string identifier for the payment method. Supported payment methods for current client session are returned in `onAvailablePaymentMethodLoad` callback.

**onStep** `(data: AchStep) =\> void`

Called whenever the component emits a new step. This usually happens when calling [start](#param-start) or [submit](#param-submit) or whenever the component collects data.

**Parameters**

**UserDetailsRetrieved**

A type representing the retrieved user details.

**Properties**

**stepName** `userDetailsRetrieved`

The name of this component step.

**firstName** `string`

The first name previously sent on client session creation.

**lastName** `string`

The last name previously sent on client session creation.

**emailAddress** `string`

The email address previously sent on client session creation.

**UserDetailsCollected**

A type representing the collected user details.

**Properties**

**stepName** `userDetailsCollected`

The name of this component step.

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.

**Properties**

**error** `PrimerError` *required*

**Properties**

**errorId** `String` *required*

A unique error identifier.

**errorCode** `String?`

A unique error code.

**description** `String` *required*

A error description.

**checkoutData** `PrimerCheckoutData`

**Properties**

**payment** `IPrimerCheckoutDataPayment`

**Properties**

**id** `string`

Primer's unique identifier for the payment.

**orderId** `string`

Your order identifier as provided in the client session.

**paymentFailureReason** `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.

**additionalInfo** `object`

Custom information, that depends on the payment method.

**Variations**

**XenditCheckoutVoucherAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**couponCode** `String` *required*

**retailerName** `String` *required*

**PromptPayCheckoutAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**qrCodeUrl** `String?`

**qrCodeBase64** `String` *required*

**MultibancoCheckoutAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**entity** `String` *required*

**reference** `String` *required*

**handler** `PrimerErrorHandler`

**Methods**

**showErrorMessage(errorMessage: String | null)**

Call with your custom error message.

**onInvalid** `(data: PrimerInvalidComponentData\<AchValidatableData\>) =\> void`

Called to indicate that the component data was considered invalid during validation.

**Parameters**

**PrimerInvalidComponentData\<AchValidatableData>**

Interface that indicates that the data has been considered invalid after validation.

**Properties**

**data** `AchValidatableData`

The data that failed validation.

**AchFirstName**

**Properties**

**validatableDataName** `firstName`

The name of this component-validatable data.

**value** `string`

The validated first name.

**AchLastName**

**Properties**

**validatableDataName** `lastName`

The name of this component-validatable data.

**value** `string`

The validated last name.

**AchEmailAddress**

**Properties**

**validatableDataName** `emailAddress`

The name of this component-validatable data.

**value** `string`

The validated email address.

**errors** `PrimerValidationError[]`

A list of `PrimerValidationError` explaining why the data is considered invalid.

**PrimerValidationError\[]**

**PrimerValidationError**

**Properties**

**errorId** `string`

A unique error identifier.

**description** `string`

A error description.

**diagnosticsId** `string`

A unique diagnostics id for the given error.

**onValid** `(data: PrimerValidComponentData\<AchValidatableData\>) =\> void`

Called to indicate that the component data was successfully validated.

**Parameters**

**PrimerValidComponentData\<AchValidatableData>**

Interface that indicates that the data has been successfully validated.

**Properties**

**data** `AchValidatableData`

The successfully validated data.

**AchFirstName**

**Properties**

**validatableDataName** `firstName`

The name of this component-validatable data.

**value** `string`

The validated first name.

**AchLastName**

**Properties**

**validatableDataName** `lastName`

The name of this component-validatable data.

**value** `string`

The validated last name.

**AchEmailAddress**

**Properties**

**validatableDataName** `emailAddress`

The name of this component-validatable data.

**value** `string`

The validated email address.

**onValidating** `(data: PrimerValidatingComponentData\<AchValidatableData\>) =\> void`

Called to indicate that the component data is in the process of being validated.

**Parameters**

**PrimerValidatingComponentData\<AchValidatableData>**

Interface that indicates that data is currently in the process of being validated.

**Properties**

**data** `AchValidatableData`

The data being validated.

**AchFirstName**

**Properties**

**validatableDataName** `firstName`

The name of this component-validatable data.

**value** `string`

The validated first name.

**AchLastName**

**Properties**

**validatableDataName** `lastName`

The name of this component-validatable data.

**value** `string`

The validated last name.

**AchEmailAddress**

**Properties**

**validatableDataName** `emailAddress`

The name of this component-validatable data.

**value** `string`

The validated email address.

**onValidationError** `(data: PrimerComponentDataValidationError\<AchValidatableData\>) =\> void`

Called to indicated an error that occurred during component data validation.

**Parameters**

**PrimerComponentDataValidationError\<AchValidatableData>**

Interface that represents an error that occurred during the validation process.

**Properties**

**data** `AchValidatableData`

The data for which an error ocurred during validation.

**AchFirstName**

**Properties**

**validatableDataName** `firstName`

The name of this component-validatable data.

**value** `string`

The validated first name.

**AchLastName**

**Properties**

**validatableDataName** `lastName`

The name of this component-validatable data.

**value** `string`

The validated last name.

**AchEmailAddress**

**Properties**

**validatableDataName** `emailAddress`

The name of this component-validatable data.

**value** `string`

The validated email address.

**error** `PrimerError`

The `PrimerError` that ocurred during the validation attempt.

**PrimerError**

**Properties**

**errorId** `string` *required*

A unique error identifier.

**errorCode** `string`

A unique error code.

**description** `string` *required*

A error description.

**recoverySuggestion** `string`

A recovery suggestion for the given error. In case it's present, use it to try
to recover from error.

**diagnosticsId** `string`

A unique diagnostics id for the given error.

## Supported payment method types

<table>
  <tr>
    <th>Type</th>
    <th>paymentMethodType</th>
  </tr>

  <tr>
    <td>
      [StripeAchUserDetailsComponent](#param-stripe-ach-user-details-component)
    </td>

    <td>
      [STRIPE\_ACH](https://primer.io/docs/sdk/react-native/v2.x.x/primer-headless-checkout/ach-headless-manager/provide.md)
    </td>
  </tr>
</table>

## Returns

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

**Common API and available components**

**Common API**

**start()**

Initialize the component by calling the `start` function. This method should be called only once.

**submit()**

Call `submit` function in order to process collected data and move component to next state.

**Supported types**

**StripeAchUserDetailsComponent**

**API**

**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.

**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.

**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.

## 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);
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.