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

# Stripe Card Capture via Morf Forms

> Collect a patient's card securely during signup, tokenize it with Stripe, and pass the token back to Morf Forms so Morf can store the card on file.

> [!TIP]
>
> This is already preconfigured in the Morf Patient Signup template. Use these steps if you're setting it up from scratch or customizing.

## Prerequisites

1. **Feathery form integrated with Morf.** Follow Morf's [Feathery Setup Instructions](https://docs.morf.health/docs/knowledge_base/feathery_setup.md).
2. **Stripe Publishable Key.** The publishable key is safe to use in the browser — do not use your secret key in the form.
3. **Morf Org ID.** Log into the Morf dashboard, select your staging or production organization, and copy the alphanumeric UUID from `https://dashboard.morf.health/<organization-id>`.

## 1. Add hidden fields in Feathery

In the form, go to **Settings > Data Tracking > Edit Hidden Fields** and add:

* `morf_org_id`
* `stripe_publishable_key`
* `stripe_token_id`

### Conditionally set hidden field values

* `morf_org_id` → Populate as described in the [Feathery Setup Instructions](https://docs.morf.health/docs/knowledge_base/feathery_setup.md).
* `stripe_publishable_key` → Set conditionally based on whether the form is in test or live mode. Add this to your existing **Set Environment Variables** custom logic rule.
* `stripe_token_id` → Leave blank. This will be populated automatically after the card is tokenized.

## 2. Add the Credit Card Iframe

1. Add a **Container → Embed iframe** component on the step where you want to collect the card.
2. Set the **Field ID** to: `stripe_token`
3. Set the **iframe URL** to:

```
https://questions.morf.health/credit-card?morfOrgId={{morf_org_id}}&stripePublishableKey={{stripe_publishable_key}}
```

The `{{morf_org_id}}` and `{{stripe_publishable_key}}` placeholders are dynamically pulled from your hidden fields.

### Recommended sizing

To ensure the card UI displays fully:

| Property | Value |
| - | - |
| Width | 475px |
| Height | 76px |
| Bottom margin | 32px |

## 3. Add a Custom Logic Rule

This rule listens for a message from the iframe and stores the Stripe token in `stripe_token_id`.

1. Go to **Logic → Create Rule**.
2. Name the rule `Initialize credit card capture`.
3. Configure the trigger:
   * **Event trigger:** Form Step is Loaded
   * **Step trigger:** your credit card step
4. Go to **Advanced Logic > Edit Code** and add the following:

> [accordion] View code
>
> ```jsx theme={null}
> window.addEventListener('message', function (event) {
>   console.log('Received message from iframe:', event.data);
>
>   if (event.data && event.data.type === "token") {
>     stripe_token_id.value = event.data.content; // content is the Stripe token string
>   }
> });
> ```

## 4. Test the Flow

1. Publish your changes.
2. Open the test form.
3. Enter a [Stripe test card](https://docs.stripe.com/testing).
4. In Morf staging, confirm the Feathery form step submission event includes `stripe_token_id` on the payload.

## Security Notes

* Only your publishable key is used in the browser. Morf handles all secret key operations server-side.
* Tokens are short-lived and safe to store temporarily in Feathery — raw card data is never exposed.
* If you rotate your Stripe publishable key, update the `stripe_publishable_key` hidden field value.

## Troubleshooting

| Symptom | Fix |
| - | - |
| Token doesn't appear | Make sure the logic rule runs on step load and that all hidden fields are created in Feathery. |
| Hidden field not saving | Verify the field exists under **Settings → Data Tracking → Edit Hidden Fields**. |
| Styling issues | Increase iframe height to avoid clipping. |


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