Skip to main content
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 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 tells your server to fulfill.

​
Available blocks

Payment Block

Secure card number, expiry, and CVC inputs. Takes payments and saves cards for your own account or a connected account.

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.

​
When to use Ionic Blocks

​
What you can do

​
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. The server SDK requires Node 18 or later.
A page without a build step loads the same browser runtime with a script tag:
A React app installs @ionicfi/js and mounts the Payment Block in an effect. A server written in another language calls the HTTP API directly. Check the supported package versions in SDK upgrades.

​
Start here

Build a payment page

Create a PaymentIntent, mount a Payment Block, and confirm the payment.

Save a card for later

Collect consent and save a card with a SetupIntent.

​
Availability

  • The Payment Block collects new cards. Wallet buttons appear on hosted and embedded checkout.
  • Your application provides any saved-card selection, using the payment methods API.
  • 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, 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

​
API reference

Ionic sends payment_intent.succeeded, payment_intent.payment_failed, and the rest of the payment intent events.