> For the complete documentation index, see [llms.txt](https://roayati.gitbook.io/paypal-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://roayati.gitbook.io/paypal-pro/getting-started/single-payment.md).

# Single payment

## PayPal Pro Element Guide for Bubble.io 💳

### Overview 🔎

This guide explains how to implement and use the PayPal Pro Element in your Bubble.io application. This element provides a customizable PayPal payment button for processing single payments.

The Single Payment element allows users to initiate one-time payments directly through PayPal. By integrating this feature, users can seamlessly complete transactions with minimal setup, enjoying PayPal's security and convenience. Customize button style, color, and shape to match your brand, and easily track payment confirmations via the Bubble plugin's workflows.

####

### Prerequisites ✅

* Bubble.io App
* PayPal Business account
* PayPal Client ID
* PayPal Developer Dashboard access

### Element Properties 📝

#### Configuration Parameters

| Parameter    | Type    | Required | Description                          |
| ------------ | ------- | -------- | ------------------------------------ |
| `Amount`     | Number  | Yes      | Payment amount                       |
| `Currency`   | Text    | Yes      | Currency code (e.g., "USD")          |
| `Shape`      | Option  | No       | Button shape ("Rectangle" or "Pill") |
| `Color`      | Option  | No       | Button color                         |
| `Label`      | Option  | No       | Button label text                    |
| `Exposelogs` | Boolean | No       | Enable debug logging                 |

#### Element States

| State          | Type | Description            |
| -------------- | ---- | ---------------------- |
| `Order ID`     | Text | PayPal order ID        |
| `Capture id`   | Text | Payment capture ID     |
| `Order status` | Text | Order status           |
| `Payer name`   | Text | Customer's full name   |
| `Payer email`  | Text | Customer's email       |
| `Payer id`     | Text | PayPal payer ID        |
| `Error`        | Text | Error message (if any) |

#### Events

| Event      | Description                        |
| ---------- | ---------------------------------- |
| `Approved` | Triggered when payment is approved |
| `Captured` | Triggered when payment is captured |
| `Error`    | Triggered when an error occurs     |

### Implementation Guide 🛠️

#### Step 1: Add the Element

1. Open Bubble editor
2. Drag PayPal Pro Element to your page
3. Configure element size and position

#### Step 2: Basic Configuration

```bubble
PayPal Pro Element
- Amount: Payment Amount
- Currency: USD or BHD
- Shape: Rectangle or Pill
- Color: gold
- Label: Paypal
```

#### Step 3: Advanced Settings

```bubble
Style Options:
- Shape: Rectangle/Pill
- Colors: gold, blue, silver, white, black
- Labels: paypal, checkout, buynow, pay, installment
```

### Workflow Examples 💡

#### Basic Payment Flow

```bubble
When PayPal Pro Element - captured
- Save/Create Payment Record
  → Order ID: PayPal Pro Element's orderid
  → Status: PayPal Pro Element's orderstatus
  → Customer: PayPal Pro Element's payername
```

#### Error Handling

```bubble
When PayPal Pro Element - error
- Show Error Message
  → Message: PayPal Pro Element's error
```

### Styling Guide 🎨

#### Button Customization

```javascript
Style Options:
    layout: vertical or horizontal
    color: "gold", // gold, blue, silver, white, black
    shape: "rect", // rect, pill
    label: "paypal" // paypal, checkout, buynow, pay, installment
```

### Best Practices 👍

1. Test in Sandbox mode first
2. Implement proper error handling
3. Store transaction records
4. Validate amounts before display
5. Handle currency conversions properly

### Testing 🧪

1. Test with various amounts
2. Verify different currencies
3. Test error scenarios
4. Check mobile responsiveness
5. Verify webhook integration

### Debugging 🔧

1. Enable `exposelogs`
2. Check browser console
3. Verify Client ID
4. Confirm currency support
5. Check network requests

### Security Considerations 🔒

1. Secure Client ID storage
2. Validate payment amounts
3. Implement fraud checks
4. Monitor transactions
5. Regular security audits

### Common Issues & Solutions 💊

#### Button Not Displaying

* Check Client ID configuration
* Verify currency code
* Confirm amount is valid
* Check element visibility

#### Payment Failures

* Verify account status
* Check currency support
* Validate amount format
* Review error logs

### Performance Optimization 🚀

1. Lazy load PayPal SDK
2. Minimize button rebuilds
3. Cache PayPal instance
4. Optimize event handlers
5. Monitor loading times

### Support Resources 📱

* PayPal Developer Documentation
* Bubble.io Forum
* PayPal Technical Support
* Integration Guides
* API References

Would you like me to elaborate on any specific section?