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

# Collect

> Accept payments with Notch Pay's hosted payment page

Notch Pay Collect is a hosted payment page that provides a simple and secure way to accept payments. With minimal integration effort, you can offer your customers a seamless payment experience with support for multiple payment methods.

## Overview

Notch Pay Collect handles the entire payment process, including:

* Displaying available payment methods
* Securely collecting payment information
* Processing the payment
* Handling success and failure scenarios
* Redirecting customers back to your website

## Benefits of Using Collect

<CardGroup cols={2}>
  <Card title="Fastest Integration">
    Implement payments with minimal code. No need to build your own payment form or handle payment processing logic.
  </Card>

  <Card title="Security">
    Payment information is collected on Notch Pay's secure servers, reducing your PCI compliance burden.
  </Card>

  <Card title="Multiple Payment Methods">
    Support for various payment methods including Mobile Money and digital wallets like Assoh.
  </Card>

  <Card title="Responsive Design">
    Works seamlessly on desktop and mobile devices with a responsive, user-friendly interface.
  </Card>
</CardGroup>

## Integration Steps

### 1. Create a Payment

To use Notch Pay Collect, first create a payment using the API:

```javascript theme={null}
// Using fetch in JavaScript
fetch('https://api.notchpay.co/payments', {
  method: 'POST',
  headers: {
    'Authorization': 'YOUR_PUBLIC_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 5000,
    currency: 'XAF',
    customer: {
      name: 'John Doe',
      email: 'john@example.com',
      phone: '+237600000000'
    },
    description: 'Payment for Order #123',
    callback: 'https://your-website.com/callback',
    reference: 'order_123'
  })
})
.then(response => response.json())
.then(data => {
  // Redirect to the collect page
  window.location.href = data.authorization_url;
})
.catch(error => console.error('Error:', error));
```

### 2. Redirect to Collect

After creating a payment, you'll receive an `authorization_url` in the response. Redirect your customer to this URL to complete the payment:

```javascript theme={null}
window.location.href = data.authorization_url;
// Example: https://pay.notchpay.co/pay_123456789
```

### 3. Handle the Callback

When the payment is completed (or fails), Notch Pay will redirect the customer back to your `callback` URL with the payment reference:

```
https://your-website.com/callback?reference=trx.dhhdjjsj&status=complete&trxref=order_123
```

You should verify the payment status by calling the API:

```javascript theme={null}
fetch(`https://api.notchpay.co/payments/${reference}`, {
  headers: {
    'Authorization': 'YOUR_PUBLIC_KEY'
  }
})
.then(response => response.json())
.then(data => {
  if (data.transaction.status === 'complete') {
    // Payment successful, update your database and show success page
  } else {
    // Payment failed or is still pending
  }
})
.catch(error => console.error('Error:', error));
```

## Customization Options

Notch Pay Collect can be customized to match your brand and requirements:

### Basic Customization

When creating a payment, you can specify:

* `title`: Custom title for the collect page
* `description`: Detailed description of what the customer is paying for
* `callback`: URL to redirect after payment completion

```javascript theme={null}
fetch('https://api.notchpay.co/payments', {
  method: 'POST',
  headers: {
    'Authorization': 'YOUR_PUBLIC_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 5000,
    currency: 'XAF',
    customer: {
      name: 'John Doe',
      email: 'john@example.com'
    },
    title: 'Premium Package',
    description: 'Access to Premium Features',
    callback: 'https://your-website.com/success',
  })
})
```

### Payment Method Restrictions

You can restrict the available payment methods:

* `locked_channel`: Restrict to a specific payment channel
* `locked_country`: Restrict to payment methods from a specific country
* `locked_currency`: Restrict to a specific currency

```javascript theme={null}
fetch('https://api.notchpay.co/payments', {
  method: 'POST',
  headers: {
    'Authorization': 'YOUR_PUBLIC_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 5000,
    currency: 'XAF',
    customer: {
      name: 'John Doe',
      email: 'john@example.com'
    },
    locked_channel: 'cm.mtn',  // Only allow MTN Mobile Money
    locked_country: 'CM'       // Only allow Cameroon payment methods
  })
})
```

### Advanced Customization

For more advanced customization, you can set up a custom collect page in your Notch Pay dashboard:

1. Go to Settings > Collect
2. Click "Create Custom Collect"
3. Customize colors, fonts, and layout
4. Save your custom collect template

Then, when creating a payment, specify the template ID:

```javascript theme={null}
fetch('https://api.notchpay.co/payments', {
  method: 'POST',
  headers: {
    'Authorization': 'YOUR_PUBLIC_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 5000,
    currency: 'XAF',
    customer: {
      name: 'John Doe',
      email: 'john@example.com'
    },
    theming: {
        "color": "#F12d7a"
    }
  })
})
```

## Payment Statuses

When processing payments through Collect, it's important to understand the various transaction statuses:

| Status            | State        | Description                                                                                     |
| ----------------- | ------------ | ----------------------------------------------------------------------------------------------- |
| pending           | Transitional | Transaction has been initiated and awaits customer completion on the hosted page or direct api. |
| processing        | Transitional | Customer initiated the payment process, but it has not been completed yet.                      |
| incomplete        | Transitional | Customer pay less than payment amount.                                                          |
| canceled          | Final        | Transaction has been cancelled. This status is final.                                           |
| failed            | Final        | Transaction has failed. This status is final.                                                   |
| rejected          | Final        | Transaction has been rejected by our system or by operator. This status is final.               |
| abandoned         | Final        | Customer abandoned the payment on our hosted page. This status is final.                        |
| expired           | Final        | Transaction has expired after 3 hours. This status is final.                                    |
| complete          | Mixed        | Transaction has been successfully completed. This status is final but can be refunded.          |
| refunded          | Final        | Transaction has been successfully refunded to customer. This status is final.                   |
| partialy-refunded | Final        | Transaction has been partialy refunded to customer. This status is final.                       |

## Collect Flow

The Notch Pay Collect flow consists of the following steps:

1. **Payment Information**: The customer sees the payment amount, description, and your business information
2. **Payment Method Selection**: The customer selects their preferred payment method
3. **Payment Details**: The customer enters their payment details (e.g., mobile money number)
4. **Confirmation**: The customer confirms the payment
5. **Processing**: Notch Pay processes the payment with the selected provider
6. **Result**: The customer sees the payment result (success or failure)
7. **Redirect**: The customer is redirected back to your website

## Testing Collect

To test the collect flow:

1. Switch to Test Mode in your dashboard
2. Create a test payment using your test API key
3. Use test payment methods to simulate different scenarios
4. Verify that your callback handling works correctly

## Best Practices

1. **Pre-fill Customer Information**: Provide customer details when creating the payment to streamline the collect process
2. **Clear Descriptions**: Use clear and concise descriptions so customers know what they're paying for
3. **Responsive Design**: Ensure your website is responsive, as many customers will complete payment on mobile devices
4. **Error Handling**: Implement proper error handling for cases where customers abandon payment or payments fail
5. **Webhooks**: Set up webhooks for reliable payment notifications, as some customers may not return to your callback URL

## Troubleshooting

### Common Issues

* **Redirect Not Working**: Ensure your callback URL is properly URL-encoded and accessible
* **Payment Not Showing**: Verify that you're using the correct API key and that the payment was created successfully
* **Customization Not Applied**: Check that your logo URL is publicly accessible and that custom parameters are correctly formatted

### Support

If you encounter issues with Notch Pay Collect:

* Check the [API Reference](/api-reference/payments) for detailed parameter documentation
* Contact our [support team](mailto:hello@notchpay.co) for assistance
* Join our [developer community](https://community.notchpay.co) to connect with other developers