Creem

ShipAny supports using Creem for payments, which can be used for product payments, membership subscriptions, credit purchases, and other scenarios.

Creem Setup

Register a Creem account
Create a store in the Creem dashboard create store
Select the store and set up store business information
Generate API keys in the Creem developer center generate API keys
Create products in the Creem dashboard create products

ShipAny Configuration

Fill in the Creem-related configuration information in the ShipAny project configuration file.

Development environment configuration file .env.development
Production environment configuration file .env.production / wrangler.toml

NEXT_PUBLIC_WEB_URL = "http://localhost:3000"

NEXT_PUBLIC_PAY_SUCCESS_URL = "/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "/pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "/pricing"

PAY_PROVIDER = "creem"

CREEM_ENV = "test"
CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"
CREEM_PRODUCTS = '{"starter": "prod_xxx", "standard": "prod_xxx", "premium": "prod_xxx"}'

NEXT_PUBLIC_PAY_SUCCESS_URL The page path to redirect to after successful payment
NEXT_PUBLIC_PAY_FAIL_URL The page path to redirect to after failed payment
NEXT_PUBLIC_PAY_CANCEL_URL The page path to redirect to after cancelled payment

Page paths can be filled with relative paths or absolute paths. If a relative path is filled, it will automatically concatenate with the website address configured in NEXT_PUBLIC_WEB_URL and include multi-language parameters when redirecting.

For example, according to the above configuration, the redirect path after successful payment on the Chinese page is: http://localhost:3000/zh/my-orders

PAY_PROVIDER Payment provider, default is stripe, if you need to use Creem payment, please set it to creem
CREEM_ENV Environment, use test for testing, use prod for production
CREEM_API_KEY Creem API key, use different keys for different environments
CREEM_WEBHOOK_SECRET Creem payment notification verification key. After configuring the Webhook address in the Creem dashboard configure webhook address, go to the Webhook address management page and copy the Signing secret.
CREEM_PRODUCTS The correspondence between product_id in the pricing table and the product IDs created in the Creem dashboard

For example, if the pricing table set in the ShipAny project has three payment plans with corresponding product_ids of starter, standard, and premium, you need to create corresponding products for these three plans in the Creem dashboard, copy each product’s Product ID, and fill in the correspondence with the product_ids in the pricing table into CREEM_PRODUCTS.

Pricing Table Payment

ShipAny template has a built-in pricing table and corresponding payment logic. You can quickly implement payment functionality by making simple modifications according to your needs.

Configure Pricing Table Content

The built-in pricing table configuration file in ShipAny template is located in: src/i18n/pages/pricing directory, supports multiple languages, and includes en.json and zh.json two pricing table configuration files by default.

For example, the default configuration for the English pricing table is:

{
  "pricing": {
    "name": "pricing",
    "label": "Pricing",
    "title": "Pricing",
    "description": "Get all features of ShipAny, Ship your AI SaaS startups fast.",
    "groups": [],
    "items": [
      {
        "title": "Starter",
        "description": "Get started with your first SaaS startup.",
        "features_title": "Includes",
        "features": [
          "100 credits, valid for 1 month",
          "NextJS boilerplate",
          "SEO-friendly structure",
          "Payment with Stripe",
          "Data storage with Supabase",
          "Google Oauth & One-Tap Login",
          "i18n support"
        ],
        "interval": "one-time",
        "amount": 9900,
        "cn_amount": 69900,
        "currency": "USD",
        "price": "$99",
        "original_price": "$199",
        "unit": "USD",
        "is_featured": false,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "starter",
        "product_name": "ShipAny Boilerplate Starter",
        "credits": 100,
        "valid_months": 1
      },
      {
        "title": "Standard",
        "description": "Ship Fast with your SaaS Startups.",
        "label": "Popular",
        "features_title": "Everything in Starter, plus",
        "features": [
          "200 credits, valid for 3 month",
          "Deploy with Vercel or Cloudflare",
          "Generation of Privacy & Terms",
          "Google Analytics Integration",
          "Google Search Console Integration",
          "Discord community",
          "Technical support for your first ship",
          "Lifetime updates"
        ],
        "interval": "one-time",
        "amount": 19900,
        "cn_amount": 139900,
        "currency": "USD",
        "price": "$199",
        "original_price": "$299",
        "unit": "USD",
        "is_featured": true,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "standard",
        "product_name": "ShipAny Boilerplate Standard",
        "credits": 200,
        "valid_months": 3
      },
      {
        "title": "Premium",
        "description": "Ship Any AI SaaS Startups.",
        "features_title": "Everything in Standard, plus",
        "features": [
          "300 credits, valid for 1 year",
          "Business Functions with AI",
          "User Center",
          "Credits System",
          "API Sales for your SaaS",
          "Admin System",
          "Priority Technical Support"
        ],
        "interval": "one-time",
        "amount": 29900,
        "cn_amount": 199900,
        "currency": "USD",
        "price": "$299",
        "original_price": "$399",
        "unit": "USD",
        "is_featured": false,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "premium",
        "product_name": "ShipAny Boilerplate Premium",
        "credits": 300,
        "valid_months": 12
      }
    ]
  }
}

The default pricing table preview is:

price-table

You can modify the content in the pricing table configuration file according to your needs.

Modify Pricing Table Component

The default pricing table component is located at: src/components/blocks/pricing/index.tsx

You can modify the display form of the pricing table according to your needs.

Modify Pricing Table Order Logic

The default pricing table order logic is located at: src/app/api/checkout/route.ts

You can modify the order logic of the pricing table according to your needs.

Modify Payment Callback Logic

In the pricing table order logic, the default configured payment callback address is: /api/pay/callback/creem

After user payment, the browser will jump to this address and include parameters with payment information.

The default payment callback processing logic is located at: src/app/api/pay/callback/creem/route.ts

You can modify the logic for processing payment callbacks according to your needs, such as updating order status, sending email notifications to users, giving credits to users, etc.

Payment callback is synchronous logic, which depends on the browser jumping to the callback address to process the payment result. This method is not very reliable, and situations such as users closing the browser during the jump may occur, causing the payment result to not be processed normally. A more reliable method is through Webhook, configuring asynchronous notification of payment results.

Modify Payment Notification Logic

You need to first configure the Webhook address in the Creem dashboard configure webhook address

For example, configure the Webhook address as: https://your-domain.com/api/pay/notify/creem

After user payment, Creem will push payment information to this address.

Process Payment Notifications

The default payment notification logic is located at: src/app/api/pay/notify/creem/route.ts

You can modify the logic for processing payment notifications according to your needs, such as updating order status, sending email notifications to users, giving credits to users, etc.

Local Testing

Enable Test Mode

In the Creem dashboard, enter the store and click Test mode in the upper right corner to enable test mode.

Generate Test Keys

In test mode, enter the developer center and set up test API keys.

Test Payment Notifications

Start the ngrok service, listen to the local port, and generate a temporary domain.

ngrok http http://localhost:3000

In the Creem dashboard test mode, configure the Webhook address as the domain generated by ngrok

Fill in the payment notification address in the Endpoint, such as https://xxx.ngrok-free.app/api/pay/notify/creem.

After adding the Webhook address, in the Webhook management page, copy the Signing secret,

Fill it into the .env.development file together with the payment key.

CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"

Test Payment

Start the project locally, visit the /pricing page, click the order button, and after successful ordering, jump to the payment page.

Use Stripe test cards to pay. After successful payment, the browser jumps to the payment callback address, and the monitored address receives payment notifications.

References

Stripe Feedback