Stripe Integration

Stripe is currently the most stable and popular global payment processing platform. It simplifies the payment process for global businesses, allowing SaaS products to easily accept various payment methods.

In this chapter, we'll cover how to integrate Stripe into template code.

Registration and Basic Configuration

1. Visit Stripe to register an account

2. Enter the Dashboard page, start creating an account from the top left corner, then complete the preliminary steps following the page instructions.

Getting API Keys and Creating Webhooks

1. After registration, you should enter Sandbox mode during development. Only switch to Live mode after completing all workflow debugging.

2. Go to Developer - API Keys page, copy the Secret key and Publishable key to environment variables STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY respectively.

3. Go to Developer - Webhooks page to create a Webhook endpoint.

4. In Cursor or VSCode, set up a Forward Port, set it to Public, then copy the generated Forwarded Address.

Good to know:

Sometimes after long periods of inactivity, the Forward Port may appear open but has actually expired. Simply reset it, which won't change the Forwarded Address.

5. Copy the Forwarded Address to the Webhook Endpoint URL, then click Select events to choose the needed events.

6. Check the following 7 events:

• charge.refunded
• checkout.session.completed
• customer.subscription.created
• customer.subscription.updated
• customer.subscription.deleted
• invoice.paid
• invoice.payment_failed

These events are sufficient to complete a robust one-time payment and recurring subscription payment workflow, and all these events have corresponding handling logic in the Nexty.dev template.

7. After creating the Webhook, get the Secret and copy it to environment variable STRIPE_WEBHOOK_SECRET.

Creating Products

Now go to the Product Catalog page to create a product.

Here's the information filled for Nexty.dev product, for reference.

After creation, click the product to enter the details page

You can see the Product ID and Price ID. We'll use these two IDs in the admin pricing cards in subsequent steps.

You can follow the same steps to create subscription products.

Enabling Radar

Stripe has a Radar feature that allows you to create custom rules to identify and block high-risk payments, protecting your account security.

However, this is a paid feature, available free in Sandbox.

If you've purchased Radar functionality in Live mode, you can add the following rules:

New users created within a week using more than 5 cards
:card_count_for_customer_weekly: > 5 and :hours_since_customer_was_created: <= 168
 
Same customer using more than 4 credit cards within a week
:card_count_for_customer_weekly: > 4 and :card_funding: = 'credit'
 
Weekly high-risk card attempts count greater than 3
:card_count_for_customer_weekly: > 3 and :risk_score: > 50
 
High-risk attempts from same IP address in a day
:total_charges_per_ip_address_daily: > 10 and :risk_score: > 40

Limiting User Concurrent Subscriptions

If your product has a subscription model and you want to limit users to only 1 active subscription at a time, you can set this in the Payments module

This setting can also prevent duplicate subscriptions, avoiding disputed orders. Even when disputing successfully, you still incur a $15 fee.

Managing Payment Methods

On the Settings - Payment Methods page, you can manage user payment methods. It's recommended to apply for Alipay and WeChat Pay to allow more users, especially those in China, to use your product.

When applying for Alipay and WeChat Pay, Stripe may request additional materials via email. Simply follow the email instructions as these materials are required by Alipay and WeChat Pay. Stripe will only officially activate these payment methods after Alipay and WeChat Pay approval.

However, these permissions only support one-time payments, not subscription products. If you want your subscription products to accept Alipay and WeChat Pay, you'll need to contact Stripe support for a separate application.

Setting Up User Portal

The user Portal is where users can view and modify their payment methods, subscription status, bills, and other information. Providing a Portal entry in your product increases user trust.

Live Mode

After completing payment workflow testing in Sandbox mode, you can directly copy created products to Live mode with one click. Other steps need manual completion, and you can use these instructions as a checklist.

Conclusion

After completing the above configuration, you can follow the Start Project documentation to update pricing cards and test payment workflows.