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

# Ionic Blocks

> A checkout that looks like your product: secure card inputs inside a payment page you design.

Your checkout should look like the rest of your product. Ionic Blocks puts
secure card inputs inside the payment page you design. You keep the layout, the
billing fields, the consent language, and the Pay button. Ionic collects the
card number, expiry, and CVC and confirms the payment.

Your server creates a [PaymentIntent](/concepts/key-concepts#how-the-objects-connect) for the amount. Your page mounts a Payment
Block and calls `confirmPayment` when the customer selects your Pay button.
A verified `payment_intent.succeeded` [webhook](/webhooks/overview) tells your server to fulfill.

## Available blocks

<CardGroup cols={2}>
  <Card title="Payment Block" icon="credit-card" href="/guides/payment-fields">
    Secure card number, expiry, and CVC inputs. Takes payments and saves
    cards for your own account or a connected account.
  </Card>

  <Card title="Wallet Block" icon="mobile-screen" href="/guides/wallet-block">
    Apple Pay and Google Pay buttons that confirm the payment automatically.
    For platforms taking one-time payments for connected accounts, once Ionic
    enables it.
  </Card>
</CardGroup>

## When to use Ionic Blocks

| Situation | Use |
| - | - |
| You design the checkout page and control when payment is submitted | [Build a payment page](/guides/payment-fields) |
| You save a card for later without taking a payment | [Save a card for later](/guides/save-cards) |
| Your server confirms payments from a single-use card token | [Tokenization-only card fields](/guides/payment-fields-advanced) |
| Your platform collects payments for connected accounts | [Accept payments for connected accounts](/guides/connect-blocks) |
| You want Apple Pay or Google Pay buttons | [Checkout](/checkout/overview) for your own account, or the [Wallet Block](/guides/wallet-block) for connected accounts |
| You prefer Ionic to host the whole payment page | [Checkout](/checkout/overview) |

## What you can do

| Capability | How it works |
| - | - |
| Take a payment | Mount a Payment Block with the PaymentIntent's client secret and call `confirmPayment` from your Pay button. |
| Save the card during payment | Create the PaymentIntent with a `customer` and `setup_future_usage: "off_session"`. The Block shows a consent checkbox, and the customer chooses whether to save. |
| Save a card without paying | Create a SetupIntent and call `confirmSetup`. |
| Match your page | Style the Block and place the consent checkbox anywhere on your page. |
| Handle every outcome | Read the confirmation result, listen for Block events, and handle documented error codes. |
| Serve connected accounts | A platform uses one publishable key and selects the connected account with the `account` option. |

## Install

Install the browser SDK in your payment page's project and the server SDK on
your backend. Both come from npm, which is included with
[Node.js](https://nodejs.org/en/download). The server SDK requires Node 18 or
later.

<CodeGroup>
  ```bash Browser theme={null}
  npm install @ionicfi/js
  ```

  ```bash Server theme={null}
  npm install @ionicfi/sdk
  ```
</CodeGroup>

| Package | Runs on | npm | Reference |
| - | - | - | - |
| `@ionicfi/js` | Your payment page | [@ionicfi/js](https://www.npmjs.com/package/@ionicfi/js) | [Browser SDK](/sdks/browser) |
| `@ionicfi/sdk` | Your server | [@ionicfi/sdk](https://www.npmjs.com/package/@ionicfi/sdk) | [Server SDK](/sdks/server) |

A page without a build step loads the same browser runtime with a script tag:

```html theme={null}
<script src="https://js.ionicfi.com/v1/ionic.js"></script>
```

A React app installs `@ionicfi/js` and mounts the Payment Block in an effect.
A server written in another language calls the [HTTP API](/api-reference/overview)
directly. Check the supported package versions in [SDK upgrades](/sdks/upgrading).

## Start here

<CardGroup cols={2}>
  <Card title="Build a payment page" icon="puzzle-piece" href="/guides/payment-fields">
    Create a PaymentIntent, mount a Payment Block, and confirm the payment.
  </Card>

  <Card title="Save a card for later" icon="id-card" href="/guides/save-cards">
    Collect consent and save a card with a SetupIntent.
  </Card>
</CardGroup>

## Availability

* The Payment Block collects new cards.
  Wallet buttons appear on [hosted and embedded checkout](/guides/apple-pay).
* Your application provides any saved-card selection, using the
  [payment methods API](/api-reference/payment-methods/list-payment-methods).
* Card payments complete without a 3-D Secure challenge.
* Platforms can add Apple Pay and Google Pay to one-time payments for connected
  merchants with the [Wallet Block](/guides/wallet-block), once Ionic enables
  it for the platform's environment.
* Each page origin is registered in **Developers → Web domains** for the same
  mode. Platforms register theirs as [payment domains](/guides/platform-payment-domains).

## Guides

| Guide | Use it to |
| - | - |
| [Build a payment page with Ionic Blocks](/guides/payment-fields) | Create, mount, and confirm a payment on your page. |
| [Save a card for later](/guides/save-cards) | Save a card with consent and no payment. |
| [Blocks reference](/guides/blocks-reference) | Look up every option, event, result shape, and error code. |
| [Advanced: tokenization-only card fields](/guides/payment-fields-advanced) | Tokenize a card and confirm from your own server. |
| [Accept payments for connected accounts](/guides/connect-blocks) | Collect payments for a merchant on your platform. |
| [Save cards for connected accounts](/guides/connect-save-cards) | Save cards for a merchant on your platform. |
| [Wallet Block](/guides/wallet-block) | Add Apple Pay and Google Pay to a platform's payment page. |

## API reference

| Resource | Endpoints |
| - | - |
| [Payment intents](/api-reference/payment-intents) | [Create](/api-reference/payment-intents/create-a-payment-intent), [retrieve](/api-reference/payment-intents/retrieve-a-payment-intent), [list](/api-reference/payment-intents/list-payment-intents), [capture](/api-reference/payment-intents/capture-a-payment-intent), [cancel](/api-reference/payment-intents/cancel-a-payment-intent) |
| Setup intents | [Create](/api-reference/setup-intents/create-a-setup-intent), [retrieve](/api-reference/setup-intents/retrieve-a-setup-intent), [list](/api-reference/setup-intents/list-setup-intents), [cancel](/api-reference/setup-intents/cancel-a-setup-intent) |
| Payment methods | [List](/api-reference/payment-methods/list-payment-methods), [retrieve](/api-reference/payment-methods/retrieve-a-payment-method), [attach to a customer](/api-reference/payment-methods/attach-a-payment-method-to-a-customer), [revoke](/api-reference/payment-methods/revoke-a-payment-method) |
| Web domains | [Add](/api-reference/web-domains/add-a-web-domain), [list](/api-reference/web-domains/list-web-domains), [delete](/api-reference/web-domains/delete-a-web-domain) |

Ionic sends `payment_intent.succeeded`, `payment_intent.payment_failed`, and
the rest of the [payment intent events](/webhooks/events#payment-intents).


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