Stripe

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

Stripe Setup

Register a Stripe account
Create a store in the Stripe dashboard
Select the store and set up store business information
Create Standard keys in the Stripe Developer Center, including Publishable key and Secret key

ShipAny Configuration

Fill in Stripe-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 = "stripe"

STRIPE_PUBLIC_KEY = "pk_test_xxx"
STRIPE_PRIVATE_KEY = "sk_test_xxx"
STRIPE_WEBHOOK_SECRET = "whsec_cexxx"

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 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
STRIPE_PUBLIC_KEY Stripe Publishable key
STRIPE_PRIVATE_KEY Stripe Secret key
STRIPE_WEBHOOK_SECRET Stripe payment notification verification key. After configuring the Webhook address in the Stripe dashboard, go to the Webhook address management page and copy the Signing secret.

Pricing Table Payment

ShipAny template has a built-in pricing table and corresponding payment logic. You can quickly implement payment functionality by simply modifying it 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 of 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 pricing table order logic according to your needs.

Modify Payment Callback Logic

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

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

The default payment callback processing logic is located at: src/app/api/pay/callback/stripe/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 that depends on browser redirection to the callback address to process payment results. This method is not very reliable and may result in payment results not being processed normally if the user closes the browser during the redirection process. A more reliable method is to configure asynchronous payment result notifications through Webhook.

Modify Payment Notification Logic

You need to first configure the Webhook address in the Stripe dashboard

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

The monitored events can only select the following two:

checkout.session.completed
invoice.payment_succeeded

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

Process payment notifications

The default payment notification logic is located at: src/app/api/pay/notify/stripe/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.

Custom Payment

Grouped Pricing Table

Modify the pricing table configuration file, add groups data, and configure multiple pricing groups. And set a group name for each pricing plan under pricing.items.

After configuration, clicking on the pricing group will switch to display different pricing plans according to the group field.

Subscription Payment

When using Stripe payment in ShipAny template, it supports three payment plans by default:

One-time charge: one-time
Monthly subscription charge: month
Annual subscription charge: year

You only need to modify the pricing table configuration and set the interval field of each pricing plan to one of the above three values.

At the same time, modify fields such as price (amount) / credits (credits) / validity period (valid_months) as needed.

Example: Monthly subscription charge, monthly payment of $99, get 30 credits after purchase, valid for 1 month, then the core pricing table configuration information is:

"interval": "month",
"amount": 9900,
"currency": "USD",
"credits": 30,
"valid_months": 1

Using Discount Codes

Create discount codes in the Stripe dashboard.
Modify the src/app/api/checkout/route.ts file and set the options parameter for Stripe orders.

Allow users to enter custom discount codes

options.allow_promotion_codes = true;

Use system default discount codes

options.allow_promotion_codes = false;
options.discounts = [
  {
    coupon: "HAPPY-NEW-YEAR",
  },
];

No discount

options.allow_promotion_codes = false;
options.discounts = [];

RMB Payment

Set up payment methods in the Stripe dashboard and enable Alipay and WeChat Pay.
Modify the pricing table configuration file and add a cn_amount field under each pricing plan to support RMB payment.

For example, product price is $99, RMB payment price is 699 yuan, the core configuration information is:

"amount": 9900,
"cn_amount": 69900,
"currency": "USD"

After configuration, a RMB payment icon will be displayed above the pricing table order button.

Local Testing

Enable test mode

Click the store in the upper left corner of the Stripe dashboard to open the dropdown menu, then click Switch to sandbox -> Test mode to enable test mode.

Generate test keys

In test mode, go to the Developer Center and set up test payment keys, including Publishable key and Secret key.

Test payment notifications

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

ngrok http http://localhost:3000

In the Stripe dashboard test mode, configure the Webhook address as the domain generated by ngrok and monitor the following two events:

checkout.session.completed
invoice.payment_succeeded

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

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

Fill it into the .env.development file along with the payment keys.

STRIPE_PUBLIC_KEY = "pk_test_xxx"
STRIPE_PRIVATE_KEY = "sk_test_xxx"
STRIPE_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

Resend Creem