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

# Third-Party Payment Gateways

> Integrate Stripe and Omise payment gateways into your Stardeck applications using environment variables and the AI agent

## Overview

Accept payments in your Stardeck applications using popular payment gateways like Stripe and Omise. This guide covers setting up payment accounts, configuring API keys in Stardeck, and using the AI agent to build payment features including credit card processing, Thai QR payments (PromptPay), and webhook handling.

<Info>
  This guide focuses on test account setup and configuration. You can use Stardeck's AI agent to
  build the entire payment integration—no coding required.
</Info>

## Prerequisites

Before you begin, ensure you have:

* An active Stardeck app
* Familiarity with [environment variables](/environment-variables) in Stardeck
* A payment gateway account (Stripe and/or Omise)

## Setting Up Stripe

Stripe is a popular payment processor supporting credit cards, digital wallets, and more.

### Creating a Stripe Test Account

1. Go to [stripe.com](https://stripe.com) and click **Sign up**
2. Complete the registration process
3. Once logged in, you'll automatically have access to **test mode**

### Getting Your API Keys

1. In the Stripe Dashboard, navigate to **Developers** > **API keys**
2. Toggle **Test mode** on (switch in the left sidebar should show "Test mode")
3. You'll see two types of keys:
   * **Publishable key** - Starts with `pk_test_...` (safe to expose in client-side code)
   * **Secret key** - Starts with `sk_test_...` (must be kept secure)

<Warning>
  Never expose your secret key in client-side code. Always mark it as a secret in Stardeck's
  environment variables.
</Warning>

### Enabling Payment Methods

1. Go to **Settings** > **Payment methods**
2. Ensure **Cards** is enabled
3. For webhook integration, note down your **Webhook signing secret** from **Developers** > **Webhooks**

<Note>
  Stripe test mode provides test card numbers for different scenarios. You can find these in
  Stripe's testing documentation.
</Note>

## Setting Up Omise

Omise is a Southeast Asian payment gateway with excellent support for Thai payment methods including PromptPay QR codes.

### Creating an Omise Test Account

1. Go to [omise.co](https://www.omise.co) and click **Sign up**
2. Complete the registration and email verification
3. Access your dashboard at [dashboard.omise.co](https://dashboard.omise.co)
4. Switch to **Test mode** using the toggle in the top navigation

### Getting Your API Keys

1. In the Omise Dashboard, click on your account name (top right)
2. Go to **Keys** or **API Keys** section
3. In **Test mode**, you'll find:
   * **Public key** - Starts with `pkey_test_...` (client-side safe)
   * **Secret key** - Starts with `skey_test_...` (server-side only)

### Enabling Payment Methods

1. Navigate to **Settings** > **Payment Methods**
2. Enable the following for testing:
   * **Credit/Debit Cards**
   * **PromptPay** (Thai QR code payments)
3. Save your settings

<Info>
  Omise provides test card numbers and QR payment flows for sandbox testing. Check their
  documentation for test credentials.
</Info>

## Configuring Environment Variables in Stardeck

Once you have your API keys, add them to your Stardeck app as environment variables.

### Adding Stripe Keys

1. Open your app in the Stardeck dashboard
2. Click the **Settings** button (gear icon)
3. Navigate to the **Environment Variables** tab
4. Add the following variables:

#### Stripe Publishable Key (Non-Secret)

* **Key**: `STRIPE_PUBLISHABLE_KEY`
* **Value**: Your `pk_test_...` key
* **Secret Variable**: Off (unchecked)
* **Deployment Targets**: Select **Sandbox** for testing

<Note>
  Non-secret variables are automatically available with the `VITE_` prefix for client-side code.
  Your frontend can access this as `import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY`.
</Note>

#### Stripe Secret Key (Secret)

* **Key**: `STRIPE_SECRET_KEY`
* **Value**: Your `sk_test_...` key
* **Secret Variable**: On (checked)
* **Deployment Targets**: Select **Sandbox** for testing

#### Stripe Webhook Secret (Secret)

If you plan to use webhooks:

* **Key**: `STRIPE_WEBHOOK_SECRET`
* **Value**: Your `whsec_...` key from Stripe webhooks page
* **Secret Variable**: On (checked)
* **Deployment Targets**: Select **Sandbox** for testing

### Adding Omise Keys

Follow the same process to add Omise keys:

#### Omise Public Key (Non-Secret)

* **Key**: `OMISE_PUBLIC_KEY`
* **Value**: Your `pkey_test_...` key
* **Secret Variable**: Off (unchecked)
* **Deployment Targets**: Select **Sandbox**

#### Omise Secret Key (Secret)

* **Key**: `OMISE_SECRET_KEY`
* **Value**: Your `skey_test_...` key
* **Secret Variable**: On (checked)
* **Deployment Targets**: Select **Sandbox**

<Success>
  Your environment variables are now configured! The dev server will automatically restart to apply
  these changes.
</Success>

## Using the AI Agent to Build Payment Features

Now that your environment is configured, you can use Stardeck's AI agent to build your payment integration. Here are example prompts for common scenarios:

### E-commerce Checkout with Stripe

```
I need a checkout flow for my art marketplace where customers can buy artwork with credit cards.

Requirements:
- Payment form with card details using Stripe
- Show the artwork image, title, and price before payment
- Use STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY environment variables
- Send confirmation email after successful payment
```

### Subscription Payments with Webhooks

```
Add subscription billing for my SaaS app using Stripe.

Requirements:
- Monthly and annual subscription plans at $29/mo and $290/year
- Use Stripe webhooks with STRIPE_WEBHOOK_SECRET to track payment status
- Update user subscription status in the database when payments succeed or fail
- Show subscription status in user's account page
```

### Thai Payment Gateway for Local Business

```
I run a Thai restaurant and need to accept payments in Thai Baht with both credit cards and PromptPay QR codes using Omise.

Requirements:
- Payment page with Credit Card and PromptPay options
- Use OMISE_PUBLIC_KEY and OMISE_SECRET_KEY
- Display QR code for PromptPay and wait for payment confirmation
- Store orders in database with payment status
```

### Order Management Dashboard

```
Create an admin dashboard to manage customer orders and payments for my online store.

Requirements:
- Show all orders with payment status, customer details, and amounts
- Filter by order status and date
- Display total revenue and number of orders
- Allow me to issue refunds through Stripe
```

### Tips for Effective Prompting

1. **Reference your environment variables by name** - The agent knows how to use them correctly
2. **Specify currency** - Mention THB for Omise or USD for Stripe
3. **Request database storage** - Specify what payment data should be saved
4. **Keep it simple** - The agent will handle best practices for security and error handling

<Info>
  The AI agent understands payment gateway APIs and will implement secure, production-ready code
  following best practices.
</Info>

## Testing Your Integration

### Testing Stripe Payments

Stripe provides test card numbers for different scenarios:

* **Successful payment**: `4242 4242 4242 4242`
* **Requires authentication**: `4000 0025 0000 3155`
* **Declined card**: `4000 0000 0000 9995`

Use any future expiry date and any 3-digit CVC.

<Note>
  Find more test cards in [Stripe's testing documentation](https://stripe.com/docs/testing).
</Note>

### Testing Omise Payments

Omise provides test cards for different scenarios:

* **Successful charge**: `4242 4242 4242 4242`
* **Failed charge**: `4111 1111 1111 1111`
* **PromptPay QR**: Test mode generates a test QR code that auto-completes after a few seconds

Use expiry date `10/25` and any 3-digit CVV for test cards.

### Testing Webhooks Locally

For webhook testing during development:

1. Use tools like [ngrok](https://ngrok.com) or [localtunnel](https://localtunnel.me) to expose your local dev server
2. Configure the webhook URL in Stripe/Omise dashboard pointing to your exposed endpoint
3. Trigger test events from the payment gateway dashboard
4. Monitor webhook events in your application logs

<Warning>
  Webhook endpoints must return a `200 OK` response quickly to avoid retries. Process events
  asynchronously if needed.
</Warning>

## Going Live with Production Keys

When you're ready to accept real payments:

### Moving to Production

1. **Get production API keys** from Stripe/Omise (requires business verification)
2. In Stardeck, **add new environment variables** with production keys
3. Set **Deployment Targets** to **Production** (not Sandbox)
4. **Update webhook URLs** to point to your production domain
5. **Test thoroughly** with small real transactions before launch

### Production Checklist

* [ ] Business verification completed with payment gateway
* [ ] Production API keys configured in Stardeck
* [ ] Webhook endpoints verified and tested
* [ ] Error handling and logging in place
* [ ] Payment confirmation emails configured
* [ ] Refund process documented
* [ ] Terms of service and privacy policy updated
* [ ] PCI compliance requirements reviewed

<Warning>
  Production keys give access to real payment processing. Keep them secure and never commit them to
  version control.
</Warning>

## Additional Resources

### Stripe Documentation

* [Stripe Testing Guide](https://stripe.com/docs/testing)
* [Stripe Payment Intents API](https://stripe.com/docs/payments/payment-intents)
* [Stripe Webhooks Guide](https://stripe.com/docs/webhooks)

### Omise Documentation

* [Omise API Documentation](https://www.omise.co/docs)
* [Omise Testing Guide](https://www.omise.co/api-testing)
* [PromptPay Integration](https://www.omise.co/promptpay)

***

Need help with your payment integration? Contact our support team through your dashboard or reach out to [support@stardeck.ai](mailto:support@stardeck.ai).