Working with Multiple Inputs

The payload can be structured with a single input with its own button (covered in the last section), multiple inputs with a single button at the bottom, or multiple inputs, each with its own button.

This is done by varying the structure of the links.actions field, and we'll walk through a few examples below.

Multiple Inputs - Single Button

Here's how you'd include multiple inputs with a single button.

const payload: ActionGetResponse = {
   title: 'Donate to Alice',
   icon: '<image-url>',
   label: 'Donate SOL',
   description: 'Cybersecurity Enthusiast | Support my research with a donation.',
   links: {
    actions: [
      {
        href: `/api/donate/{${amountParameterName}}/{${thankYouNote}}`,
        label: 'Donate',
        parameters: [
          {
            name: amountParameterName,
            label: 'Enter a custom SOL amount',
          },
          {
            name: thankYouNote,
            label: 'Thank you note',
          },
        ],
      },
    ],
   },
}

Here's what that would look like when unfurled:

Multiple Inputs - Multiple Buttons

Here's how you'd include multiple inputs with multiple buttons.

const payload: ActionGetResponse ={
   title: 'Donate to Alice',
   icon: '<image-url>',
   label: 'Donate SOL',
   description: 'Cybersecurity Enthusiast | Support my research with a donation.',
   "links": {
    "actions": [
      {
        "label": "1 SOL", // button text
        "href": "/api/donate?amount=10"
        // no `parameters` therefore not a text input field
      },
      {
        "label": "5 SOL", // button text
        "href": "/api/donate?amount=100"
        // no `parameters` therefore not a text input field
      },
      {
        "label": "10 SOL", // button text
        "href": "/api/donate?amount=1000"
        // no `parameters` therefore not a text input field
      },
      {
        "label": "Donate", // button text
        "href": "/api/donate?amount={amount}",
        "parameters": [
          {
            "name": "amount", // field name
            "label": "Enter a custom SOL amount" // text input placeholder
          }
        ]
      }
    ]
  }
};

Here's what that would look like when unfurled:

This alone will get you pretty far, but there's far more you can do with Action inputs. That's what we'll cover in the next section.