Alternative Entry Flow : Pay by Link

Pay By Link is an alternative checkout flow where a merchant creates a payment link via the TransFi API or Dashboard, receives a hosted URL, and shares it directly with their customer.

The customer opens the link and completes the payment through the TransFi-hosted checkout widget.

Create Payment Link

You can generate a payment link in two ways:

  • Option A: Create from Dashboard
  • Option B: Create via API

Option A: Create from Dashboard

Generate payment links manually without writing any code.

  1. Navigate to the Transactions page in your TransFi Dashboard.

  2. Click the Create Payment Link button on the top right

  3. Fill in the required product and customer details.

  4. Copy the generated URL from the success modal and share it with your customer via email, SMS, or chat.

Option B: Create via API

Programmatically generate payment links to share across your own communication channels.
You can check the API details here: Create Payment Invoice API

Endpoint

POST /checkout/payment-link/invoice

Headers

Content-Type: application/json
x-api-key: pk_sandbox_<your_public_key>
x-timestamp: <unix_timestamp_ms>
x-signature: <hmac_signature>
X-Api-Version: v1

Request Body

{
  "paymentLinkId": "69c39577e1a0100cf92c3406",
  "amount": "100",
  "currency": "EUR",
  "productDetails": {
    "name": "Premium Product",
    "description": "High quality product",
    "imageUrl": "https://example.com/product-image.jpg"
  },
  "individual": {
    "firstName": "John",
    "lastName": "Doe",
    "email": "[email protected]",
    "phone": "9876543210",
    "phoneCode": "+1",
    "country": "US"
  },
  "inpss": {
    "city": "Mountain View",
    "state": "California",
    "street": "1600 Amphitheatre Parkway",
    "postalCode": "94043"
  },
  "dob": "17-01-1998",
  "paymentCode": "pipay",
  "channel": "payment link",
  "successRedirectUrl": "https://your-app.com/payment-success",
  "failureRedirectUrl": "https://your-app.com/payment-failure",
  "customerOrderId": "order-12345",
  "lng": "en"
}

Response

{
	"success": true,
  "data": {
    "success": true,
    "paymentUrl": "https://qa:checkout-widget-transfi.com/checkout/payment-link/6a0100000000000000000"
  }
}

Understanding the flow


What the Customer Sees

When the customer clicks the paymentUrl, the checkout widget loads dynamically based on the data provided.

The widget utilizes a smart branching flow to minimize friction for users.

Complete Customer Data

If the individual object is fully populated, the User Details screen is skipped, and the customer goes straight to the payment initiation screen.

Incomplete Customer Data

If required fields (like Name or Email/Phone) are missing, the customer is prompted to fill out the User Details form first.

Pre-selected Payment Methods

If a valid paymentCode is passed and the pre-filled data satisfies the required fields for that specific method, the Additional Details page is bypassed automatically.


Page Descriptions

RouteComponentShown When
/checkout/payment-link/[invoiceId]— (orchestrator)Always (logic only)
/checkout/user-detailsUserDetailsFormContentindividual fields are incomplete or missing
/checkout/payment-initiateProductCheckoutPageAfter user details are ready
/checkout/payment-methodsPaymentMethodsContentNo paymentCode pre-selected
/checkout/payment-method-additional-detailsPaymentMethodAdditionalDetailsContentMethod requires extra fields
/checkout/confirm-orderConfirmOrderContentBefore final payment submission
/checkout/payment-processingPaymentProcessingContentAfter order submitted
/checkout/payment-completion-statusPaymentCompletionContentFinal result page
📘

After you have the payment URL, continue to Step 4 →