Stripe Card Capture via Morf Forms

​

Prerequisites

1. Feathery form integrated with Morf. Follow Morf’s Feathery Setup Instructions.
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

• 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.
• 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}}

​

Recommended sizing

​

3. Add a Custom Logic Rule

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:

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.
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