# Accept account funding transactions with a wallet

Use Apple Pay and Google Pay to accept Account Funding Transactions (AFTs), for example, to fund a digital wallet or a prepaid card. Flow collects the customer's billing details from the wallet during authorization and makes them available to you in the `handleSubmit` [callback](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#handleSubmit(FlowComponent,_SubmitData)).

> **Information**
>
> Follow the [Apple Pay](https://www.checkout.com/docs/payments/add-payment-methods/apple-pay/web.md) and [Google Pay](https://www.checkout.com/docs/payments/add-payment-methods/google-pay/web.md) guides before you update your integration to accept AFTs.

---

## Before you start

To process AFT payments with Apple Pay and Google Pay, you need:

- AFT processing enabled on your Checkout.com account. To enable this, contact your account manager or [request support](https://dashboard.checkout.com/support/new?topic=case_configuration_change&issue=case_configuration_issue_operational_change_request).
- An existing Apple Pay or Google Pay Flow integration.

---

## Enable AFT in the payment session `Server side`

When you create a payment session on your server, you must set `processing.aft` to `true`.

```json
{
  "amount": 1000,
  "currency": "GBP",
  "reference": "ORD-123A",
  "processing": {
    "aft": true
  },
  "customer": {
    "name": "Jia Tsang",
    "email": "jia.tsang@example.com"
  }
}
```

---

## Enable billing address capture in Flow `Client side`

When you create the wallet component, set `captureBillingAddress` to `true`. This instructs the wallet to request the customer's billing address during authorization.

This option is supported for both `applepay` and `googlepay` components.

**Apple Pay**

```javascript
const applepayComponent = checkout.create('applepay', {
  captureBillingAddress: true,
});

if (await applepayComponent.isAvailable()) {
  applepayComponent.mount('#applepay-container');
}
```

**Google Pay**

```javascript
const googlepayComponent = checkout.create('googlepay', {
  captureBillingAddress: true,
});

if (await googlepayComponent.isAvailable()) {
  googlepayComponent.mount('#googlepay-container');
}
```

---

## Inspect the AFT payload `Client side`

Use the `handleSubmit` [callback](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#handleSubmit(FlowComponent,_SubmitData)) to inspect the payment request before it is submitted. The callback receives the payment request object, which includes the billing details collected from the wallet.

```javascript
const checkout = await CheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox',

  handleSubmit: async (self, paymentRequest) => {
    // Inspect or forward the payment request to your server
    const response = await fetch('/api/pay', {
      method: 'POST',
      body: JSON.stringify(paymentRequest),
    });

    return response.json();
  },
});
```

When `processing.aft` is enabled and the wallet provides billing details, the following fields are populated in the payment request's `source` object.

> **Information**
>
> Fields that the wallet does not provide, for example `source.phone`, are omitted from the payment request. Always check for the presence of optional fields before using them.

| Field | Type | Description |
| --- | --- | --- |
| `source.account_holder` | `object` | The account holder details collected from the wallet. |
| `source.account_holder.first_name` | `string` | The account holder's first name. |
| `source.account_holder.last_name` | `string` | The account holder's last name. |
| `source.billing_address` | `object` | The billing address collected from the wallet. |
| `source.billing_address.address_line1` | `string` | The first line of the billing address. |
| `source.billing_address.city` | `string` | The billing address city. |
| `source.billing_address.zip` | `string` | The billing address ZIP or postal code. |
| `source.billing_address.country` | `string` | The billing address country, as an ISO alpha-2 country code. |
| `source.phone` | `object` | The customer's phone number collected from the wallet. |
| `source.phone.number` | `string` | The customer's phone number. |