Payflow Docs
Payments

Payment Components

Prepare embedded card payments and confirm provider results through Payflow.

Payment components let your frontend render a provider payment UI while Payflow keeps routing, preparation, provider references, and transaction recording centralized.

Flow

  1. Your frontend or backend calls POST /client/v1/payments/component.
  2. Payflow evaluates routing and returns a provider-specific component configuration.
  3. Your frontend renders the provider component.
  4. Your backend confirms the provider result with Payflow.
  5. Payflow records the transaction.

Prepare a component payment

POST /client/v1/payments/component

Request:

{
  "amountMinor": "4900",
  "currency": "USD",
  "paymentMethod": "web_card",
  "description": "Component payment",
  "customer": {
    "email": "[email protected]"
  },
  "metadata": {
    "cartId": "cart_789"
  }
}

Response when routing selects Stripe:

{
  "success": true,
  "data": {
    "payflowReference": "pf_test_a37f9b7c7c114bf98b6da4b53c91c0d2",
    "status": "prepared",
    "amountMinor": "4900",
    "currency": "USD",
    "paymentMethod": "web_card",
    "provider": "stripe",
    "routing": {
      "provider": "stripe",
      "channel": "web_card",
      "matchedRuleId": null,
      "matchedConditionIds": [],
      "fallback": true
    },
    "component": {
      "type": "stripe_payment_element",
      "publishableKey": "pk_test_...",
      "clientSecret": "pi_..._secret_...",
      "paymentIntentId": "pi_..."
    },
    "preparedAt": "2026-07-07T12:00:00.000Z"
  },
  "message": null
}

Response when routing selects Square:

{
  "success": true,
  "data": {
    "payflowReference": "pf_test_f560e5c54a3347e29252a097a45ea97b",
    "status": "prepared",
    "amountMinor": "4900",
    "currency": "USD",
    "paymentMethod": "web_card",
    "provider": "square",
    "component": {
      "type": "square_web_payments",
      "applicationId": "sandbox-sq0idb-...",
      "locationId": "L...",
      "environment": "sandbox",
      "amountMinor": "4900",
      "currency": "USD"
    },
    "preparedAt": "2026-07-07T12:00:00.000Z"
  },
  "message": null
}

Confirm a Stripe component result

POST /client/v1/payments/component/:payflowReference/confirm

Use a secret key from your backend.

{
  "paymentIntentId": "pi_...",
  "clientStatus": "succeeded"
}

Payflow retrieves the Payment Intent from Stripe, maps its status to a Payflow transaction status, and records the provider result.

Confirm a Square component result

POST /client/v1/payments/component/:payflowReference/confirm

Use a secret key from your backend.

{
  "sourceId": "cnon:card-nonce-ok",
  "verificationToken": "verf:...",
  "buyerEmail": "[email protected]"
}

Payflow sends the payment to Square and records the resulting transaction.

Security notes

  • Render provider components with publishable configuration only.
  • Confirm results through your backend with a secret key.
  • Do not trust the browser as the final source of payment truth.
  • Store payflowReference with your order before rendering the provider component.
  • Listen for provider webhooks to update final transaction state where supported.

On this page