ShipAny

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

How to setup

Step1: Register a BagelPay account
Step2: Create a store in the BagelPay dashboard
Step3: Create products
Step4: Generate API keys in developer center

ShipAny Configuration

Fill in the BagelPay-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 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.

  • 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

  • PAY_PROVIDER Payment provider, default is stripe, if you need to use BagelPay, please set it to bagelpay

  • BAGELPAY_ENV Environment, use test for testing, use production for production

  • BAGELPAY_API_KEY BagelPay API key, use different keys for different environments

  • BAGELPAY_WEBHOOK_SECRET BagelPay notification verification key. After configuring the Webhook address in the BagelPay dashboard, go to the Webhook address management page and copy the Signing secret.

  • BAGELPAY_PRODUCTS The correspondence between product_id in the pricing table and the product IDs created in the BagelPay 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 BagelPay dashboard, copy each product’s Product ID, and fill in the correspondence with the product_ids in the pricing table into BAGELPAY_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:

The default pricing table preview is:

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/bagelpay

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/bagelpay/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 BagelPay dashboard

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

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

Process Payment Notifications

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

Testing payment in Local Env

Step1: Enable Test Mode

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

Step2: Generate Test Keys

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

Step3: Test Payment Notifications

Register an ngrok account and install the ngrok command line tool as instructed.

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

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

For example:

After adding the Webhook address, in the Webhook logs page, copy the Signing secret.

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

Step4: Test Payment

Start the project locally, visit the http://localhost:3000/pricing page, click the order button,

and after successful ordering, jump to the payment page.

Use Test Cards to pay.

After successful payment, the browser jumps to the payment callback address, and the monitored address receives payment notifications.

References

PreviousReact Native SDKNextNuxtPro

Last updated