Ai Payments

Import the Ai Payments design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Ai Payments and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Blocks this design adds

Virtual Card

canvas-core/aipay-card

A payment card drawn in CSS with a brand, a badge, a masked number that cycles through sample numbers, a holder line and an expiry date. In the block inserter it is named Virtual Card.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• BrandDefaultCanvasOrbit

  The name printed in the top corner of the card.

• BadgeDefaultVIRTUAL

  The small pill under the brand. Leave empty for none.

• Card NumberDefault4532 •••• •••• 8821

  The number shown when the page opens.

• Holder LineDefaultAI AGENT / GPT-INSTANCE

  The line along the bottom edge, where a card shows its holder.

• ExpiryDefault12/27

  The expiry date in the bottom corner.

• Cycling NumbersDefault4532 8821 0034 8821 4532 4423 8821 0019 4532 8821 9923 1142 4532 8821 0034 8821

  Sample numbers the card fades through, one per line. Leave empty to keep the number above still.

• Change Every (ms)Default4000

  How long each number stays on the card, in milliseconds.

Live Transaction Feed

canvas-core/aipay-feed

A running list of simulated card payments made by software agents, with status filters and live totals. Every row is generated in the browser from the agents and merchants you list. In the block inserter it is named Live Transaction Feed.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• AgentsDefaulta preset list of 10 rows

  The agents a row can name. Each new row picks one at random.

  Each row of Agents takes:

  • Agent IDDefaultEmpty

    The identifier shown in small type under the agent name.

  • NameDefaultEmpty

    The agent name shown in the row.

  • InitialsDefaultEmpty

    Two letters drawn in the square badge beside the name.

• MerchantsDefaulta preset list of 16 rows

  The merchants a row can be paid to, with the range each payment is drawn from.

  Each row of Merchants takes:

  • MerchantDefaultEmpty

    The merchant name shown in the row.

  • DomainDefaultEmpty

    The web address shown in small type under the merchant.

  • CategoryDefaultEmpty

    The category tag shown in its own column.

  • Lowest AmountDefault5

    The smallest payment this merchant can receive.

  • Highest AmountDefault50

    The largest payment this merchant can receive.

Settings

• Approved ShareDefault4

  How often a row is approved, weighed against the two shares below.

• Pending ShareDefault1

  How often a row waits for a human to approve it.

• Blocked ShareDefault1

  How often a row is blocked. Blocked rows are not added to the totals.

• Starting Total SpentDefault12847.43

  The spend total the counter starts from when the page opens.

• Starting Transaction CountDefault247

  The number of transactions the counter starts from.

• Active AgentsDefault38

  The active-agent figure shown when the page opens. Each new row nudges it up by up to the spread below.

• Active Agents SpreadDefault6

  How far above the starting figure the active-agent count may wander.

• Rows on LoadDefault8

  How many earlier payments are listed as soon as the page opens.

• Most Rows ShownDefault14

  The list keeps this many of the newest payments and drops the oldest.

• New Row Every (ms)Default2600

  How often a new payment arrives, in milliseconds.

• Currency SymbolDefault$

  Written before every amount and the spend total.

• Total Spent Element IDDefaultco-stat-today

  The id of the figure that shows the running spend total. Leave empty to show no total.

• Transaction Count Element IDDefaultco-stat-tx

  The id of the figure that shows the running transaction count.

• Active Agents Element IDDefaultco-stat-agents

  The id of the figure that shows the active-agent count.

• No Matches MessageDefaultNo transactions match this filter yet.

  Shown when a status filter leaves no rows to list.