# Payments

The API for interacting with the payment options.

```jsx
import {
  reactExtension,
  Banner,
  useAvailablePaymentOptions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const options = useAvailablePaymentOptions();

  if (
    options.some(
      (option) => option.type === 'wallet',
    )
  ) {
    return (
      <Banner>
        Select an express payment method for
        faster checkout
      </Banner>
    );
  }

  return null;
}

```

## StandardApi

The base API object provided to `purchase` extension targets.

### Docs_Standard_PaymentOptionsApi

### availablePaymentOptions

value: `StatefulRemoteSubscribable<PaymentOption[]>`

All available payment options.

### selectedPaymentOptions

value: `StatefulRemoteSubscribable<SelectedPaymentOption[]>`

Payment options selected by the buyer.

### PaymentOption

A payment option presented to the buyer.

### handle

value: `string`

The unique handle for the payment option.

This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.

### type

value: `| 'creditCard'
    | 'deferred'
    | 'local'
    | 'manualPayment'
    | 'offsite'
    | 'other'
    | 'paymentOnDelivery'
    | 'redeemable'
    | 'wallet'
    | 'customOnsite'`

The type of the payment option.

Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions.

| Type  | Description  |
|---|---|
| `creditCard`  |  A vaulted or manually entered credit card.  |
| `deferred`  |  A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time.  |
| `local`  |  A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market  |
| `manualPayment`  |  A manual payment option such as an in-person retail transaction.  |
| `offsite`  |  A payment processed outside of Shopify's checkout, excluding integrated wallets.  |
| `other`  |  Another type of payment not defined here.  |
| `paymentOnDelivery`  |  A payment that will be collected on delivery.  |
| `redeemable`  |  A redeemable payment option such as a gift card or store credit.  |
| `wallet`  |  An integrated wallet such as PayPal, Google Pay, Apple Pay, etc.  |
| `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |

### SelectedPaymentOption

A payment option selected by the buyer.

### handle

value: `string`

The unique handle referencing `PaymentOption.handle`.

Refer to [availablePaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/apis/payments#standardapi-propertydetail-availablepaymentoptions).

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

The API for interacting with the payment options.



```jsx
import {
  reactExtension,
  Banner,
  useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const options = useSelectedPaymentOptions();

  if (
    options.some(
      (option) => option.type === 'creditCard',
    )
  ) {
    return (
      <Banner>
        All credit card transactions are secure
      </Banner>
    );
  }

  return null;
}

```

## useAvailablePaymentOptions

Returns all available payment options.

### UseAvailablePaymentOptionsGeneratedType

Returns all available payment options.

#### Returns: PaymentOption[]
export function useAvailablePaymentOptions<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): PaymentOption[] {
  const api = useApi<Target>();

  if ('availablePaymentOptions' in api) {
    return useSubscription(api.availablePaymentOptions);
  }

  throw new ExtensionHasNoMethodError(
    'availablePaymentOptions',
    api.extension.target,
  );
}


### PaymentOption

A payment option presented to the buyer.

### handle

value: `string`

The unique handle for the payment option.

This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.

### type

value: `| 'creditCard'
    | 'deferred'
    | 'local'
    | 'manualPayment'
    | 'offsite'
    | 'other'
    | 'paymentOnDelivery'
    | 'redeemable'
    | 'wallet'
    | 'customOnsite'`

The type of the payment option.

Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions.

| Type  | Description  |
|---|---|
| `creditCard`  |  A vaulted or manually entered credit card.  |
| `deferred`  |  A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time.  |
| `local`  |  A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market  |
| `manualPayment`  |  A manual payment option such as an in-person retail transaction.  |
| `offsite`  |  A payment processed outside of Shopify's checkout, excluding integrated wallets.  |
| `other`  |  Another type of payment not defined here.  |
| `paymentOnDelivery`  |  A payment that will be collected on delivery.  |
| `redeemable`  |  A redeemable payment option such as a gift card or store credit.  |
| `wallet`  |  An integrated wallet such as PayPal, Google Pay, Apple Pay, etc.  |
| `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

The API for interacting with the payment options.



```jsx
import {
  reactExtension,
  Banner,
  useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const options = useSelectedPaymentOptions();

  if (
    options.some(
      (option) => option.type === 'creditCard',
    )
  ) {
    return (
      <Banner>
        All credit card transactions are secure
      </Banner>
    );
  }

  return null;
}

```

## useSelectedPaymentOptions

Returns payment options selected by the buyer.

### UseSelectedPaymentOptionsGeneratedType

Returns payment options selected by the buyer.

#### Returns: PaymentOption[]
export function useSelectedPaymentOptions<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): PaymentOption[] {
  const api = useApi<Target>();

  if (
    !('selectedPaymentOptions' in api) ||
    !('availablePaymentOptions' in api)
  ) {
    throw new ExtensionHasNoMethodError(
      'selectedPaymentOptions',
      api.extension.target,
    );
  }

  const selectedPaymentOptions = useSubscription(api.selectedPaymentOptions);
  const availablePaymentOptions = useSubscription(api.availablePaymentOptions);

  return useMemo(() => {
    const availablePaymentOptionsMap: Record<string, PaymentOption> = {};

    for (const option of availablePaymentOptions) {
      availablePaymentOptionsMap[option.handle] = option;
    }

    return selectedPaymentOptions.map((paymentOption) => {
      return {
        handle: paymentOption.handle,
        type: availablePaymentOptionsMap[paymentOption.handle]?.type,
      };
    });
  }, [availablePaymentOptions, selectedPaymentOptions]);
}


### PaymentOption

A payment option presented to the buyer.

### handle

value: `string`

The unique handle for the payment option.

This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.

### type

value: `| 'creditCard'
    | 'deferred'
    | 'local'
    | 'manualPayment'
    | 'offsite'
    | 'other'
    | 'paymentOnDelivery'
    | 'redeemable'
    | 'wallet'
    | 'customOnsite'`

The type of the payment option.

Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions.

| Type  | Description  |
|---|---|
| `creditCard`  |  A vaulted or manually entered credit card.  |
| `deferred`  |  A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time.  |
| `local`  |  A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market  |
| `manualPayment`  |  A manual payment option such as an in-person retail transaction.  |
| `offsite`  |  A payment processed outside of Shopify's checkout, excluding integrated wallets.  |
| `other`  |  Another type of payment not defined here.  |
| `paymentOnDelivery`  |  A payment that will be collected on delivery.  |
| `redeemable`  |  A redeemable payment option such as a gift card or store credit.  |
| `wallet`  |  An integrated wallet such as PayPal, Google Pay, Apple Pay, etc.  |
| `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

The API for interacting with the payment options.



```jsx
import {
  reactExtension,
  Banner,
  useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const options = useSelectedPaymentOptions();

  if (
    options.some(
      (option) => option.type === 'creditCard',
    )
  ) {
    return (
      <Banner>
        All credit card transactions are secure
      </Banner>
    );
  }

  return null;
}

```

## Examples

The API for interacting with the payment options.



```jsx
import {
  reactExtension,
  Banner,
  useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const options = useSelectedPaymentOptions();

  if (
    options.some(
      (option) => option.type === 'creditCard',
    )
  ) {
    return (
      <Banner>
        All credit card transactions are secure
      </Banner>
    );
  }

  return null;
}

```