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

# Direct Checkout Links

> Understand how to construct direct checkout page links using Fermion

When creating custom landing pages on Fermion, you can include direct checkout links that seamlessly redirect users to purchase your digital products or courses. This allows you to maintain full control over your landing page design while still leveraging Fermion's secure checkout system.

## How Checkout Links Work

Any anchor link or button with a redirect URL in the following format will open the Fermion checkout page:

```html theme={null}
/api/buy-digital-product?product-slug=YOUR_PRODUCT_SLUG
```

<Info>
  The checkout page is automatically generated by Fermion and includes all
  necessary payment processing, security measures, and user authentication.
</Info>

## URL Parameters

Fermion's checkout system supports several URL parameters to customize the checkout experience:

### Required Parameters

* **`product-slug`**: The slug of your digital product or course that you want users to purchase. This field is mandatory and cannot be omitted.

### Optional Parameters

* **`discount-code`**: Any discount code that needs to be automatically applied to the user's checkout session. The discount code must exist in your product's discounts section area. If the code doesn't exist or has expired, users will see an "Invalid discount code" warning but can still complete checkout at full price.

* **`digital-product-price-id`**: The specific price ID for the digital product, useful if you have multiple pricing plans.

* **`total-installments-count`**: The number of installments for partial payment plans. Only required if the selected plan is an installment plan.

* **`prefilled-name`**: Pre-fills the user's name on the checkout form. Useful when your landing page collects user input.

* **`prefilled-email`**: Pre-fills the user's email address on the checkout form. Useful when your landing page collects user input.

* **`prefilled-phone-number`**: Pre-fills the user's phone number on the checkout form. Useful when your landing page collects user input.

* **`smart-checkout-redirect`**: Set to `true` to automatically redirect to the best available payment gateway when `prefilled-email` and `prefilled-name` are present. This reduces one step for users to complete.

* **UTM Parameters**: For marketing attribution, you can add any of the following:

* `utm_source`, `utm_medium`, `utm_campaign`, `utm_id`, `utm_term`, `utm_content`

<Warning>
  Make sure to properly encode all parameter values to avoid breaking the
  checkout flow. Special characters in names, emails, or discount codes must
  be URL-encoded.
</Warning>

## Code Examples

### Basic Checkout Link

```html theme={null}
<a href="/api/buy-digital-product?product-slug=my-awesome-product">
	Buy My Product
</a>
```

### Checkout Link with Discount Code and UTM Parameters

```html theme={null}
<a
	href="/api/buy-digital-product?product-slug=my-awesome-product&discount-code=EARLY_LAUNCH&utm_source=newsletter&utm_medium=email"
>
	Buy with Early Bird Discount
</a>
```

### Checkout Link with Pre-filled Information and Installments

```html theme={null}
<a
	href="/api/buy-digital-product?product-slug=my-awesome-product&digital-product-price-id=price_123&total-installments-count=3&prefilled-name=John%20Doe&prefilled-email=john@example.com"
>
	Buy Product (3 Installments)
</a>
```

### Complete Checkout Link with All Parameters

```html theme={null}
<a
	href="/api/buy-digital-product?product-slug=my-awesome-product&digital-product-price-id=price_123&total-installments-count=3&discount-code=EARLY_LAUNCH&prefilled-name=John%20Doe&prefilled-email=john@example.com&prefilled-phone-number=1234567890&smart-checkout-redirect=true&utm_source=adwords&utm_medium=cpc&utm_campaign=summer_sale"
>
	Buy Product Now
</a>
```

## JavaScript Implementation

For dynamic checkout links that collect user input from your landing page, use this JavaScript function to safely construct the checkout URL:

```javascript theme={null}
function initiateCheckout() {
	// Assuming this function is called on a button click
	const params = new URLSearchParams({
		'discount-code': code,
		'product-slug': checkoutPageDataInfo.fermionDigitalProductSlug,
		'digital-product-price-id':
			checkoutPageDataInfo.pricingPlanSpecificData
				.fermionDigitalProductPriceId,
		'total-installments-count':
			checkoutPageDataInfo.pricingPlanSpecificData.planType ===
			'PartialPaymentPlan'
				? (
						checkoutPageDataInfo.pricingPlanSpecificData
							.installmentCountSelectedByUser ?? ''
				  ).toString()
				: '',
		'prefilled-name': nameOfUser || '',
		'prefilled-email': emailOfUser || '',
		'prefilled-phone-number': phoneNumber || '',
		'smart-checkout-redirect': 'true',
		utm_source: utmSource || '',
		utm_medium: utmMedium || '',
		utm_campaign: utmCampaign || '',
		utm_id: utmId || '',
		utm_term: utmTerm || '',
		utm_content: utmContent || '',
	})

	// Remove empty parameters
	params.forEach((value, key) => {
		if (value === '') params.delete(key)
	})

	window.location.href = `/api/buy-digital-product?${params.toString()}`
}
```

<Tip>
  The JavaScript approach using `URLSearchParams` automatically handles URL
  encoding, making it the safest way to construct checkout links with user
  input.
</Tip>

## Manual URL Construction

If you prefer to construct URLs manually, ensure you use `encodeURIComponent()` for all parameter values:

```javascript theme={null}
const productSlug = 'my-awesome-product'
const priceId = 'price_123'
const installmentCount = '3'
const userName = 'John Doe'
const userEmail = 'john@example.com'
const utmSource = 'newsletter'

const checkoutUrl = `/api/buy-digital-product?product-slug=${encodeURIComponent(
	productSlug
)}&digital-product-price-id=${encodeURIComponent(
	priceId
)}&total-installments-count=${encodeURIComponent(
	installmentCount
)}&prefilled-name=${encodeURIComponent(
	userName
)}&prefilled-email=${encodeURIComponent(
	userEmail
)}&utm_source=${encodeURIComponent(utmSource)}`
```

<Danger>
  Failing to properly encode parameter values can break the checkout flow,
  especially when dealing with special characters in names, emails, or
  discount codes.
</Danger>

## Integration with Custom Landing Pages

To integrate checkout links with your custom landing pages:

1. **Create your custom page** in Fermion's instructor dashboard
2. **Design your landing page** with HTML, CSS, and JavaScript
3. **Add checkout buttons/links** using the `/api/buy-digital-product` URL format
4. **Test the checkout flow** to ensure all parameters work correctly
5. **Publish your page** when ready

<Check>
  Your custom landing page will maintain full design control while seamlessly
  integrating with Fermion's secure checkout system.
</Check>

## Best Practices

* **Always test checkout links** before publishing your landing page
* **Use the JavaScript approach** when collecting user input to ensure proper encoding
* **Keep discount codes simple** and avoid special characters when possible
* **Validate user input** before constructing checkout URLs
* **Provide fallback options** in case discount codes are invalid or expired
* **Use UTM parameters** to track marketing attribution and campaign performance

<Note>
  The checkout page automatically handles payment processing, user
  authentication, and product access management, so you can focus on creating
  compelling landing pages that drive conversions.
</Note>