BTCPay

Принимайте Bitcoin-платежи через BTCPay

npm install medusa-plugin-btcpay

Категория

Платежи

Создано

Sgfgov

Версия

0.0.6

Последнее обновление

11 месяцев назад

Ежемесячные загрузки

Звезды на Github

NPM Github

Support the Payment-BitcoinPayServer Provider – Power the Future of Medusa Commerce!

Dear Developers and E-commerce Pioneers,

Get ready to embrace the world of decentralized finance for your online stores with MedusaJS! We are excited to introduce the Payment-BitcoinPayServer provider – a community-driven project that brings the powerful Bitcoin PayServer gateway to our MedusaJS commerce stack.

What's in it for You:

🛡️ Secure & Sovereign Payments: Enable direct Bitcoin Network payments without relying on third-party payment processors.

🌍 Borderless Transactions: Serve a global audience with permissionless payments that know no borders.

🚀 Empower Open Commerce: By sponsoring this provider, you contribute to the Medusa community's growth, independence, and innovation!

Installation Made Simple

Use the package manager npm to install Payment-BitcoinPayServer.

yarn add medusa-plugin-btcpay

Usage

Set up a Bitcoin PayServer instance, either self-hosted or via a trusted host.

In your environment file () define:

1BTCPAY_URL=https://your-btcpayserver-instance.com
2BTCPAY_API_KEY=<your api key>
3BTCPAY_STORE_ID=<your store id>
4BTCPAY_WEBHOOK_SECRET=<your webhook secret>

You need to add the provider into your :

1module.exports = defineConfig({
modules: [
  ...
  {
    resolve: "@medusajs/medusa/payment",
    options: {
      providers: [
        ...
        {
          resolve: "@yourorg/payment-btcpayserver",
          id: "btcpayserver",
          options: {
            url: process.env.BTCPAY_URL,
            apiKey: process.env.BTCPAY_API_KEY,
            storeId: process.env.BTCPAY_STORE_ID,
            webhookSecret: process.env.BTCPAY_WEBHOOK_SECRET,
          },
        },
        ...
      ],
    },
  },
  ...
]
25})

Client Side Configuration

For your Medusa Next.js storefront, follow these steps:

Step 1. Install the Bitcoin Payment Button package

(optional - depends on your design)

yarn add react-btcpay-button

Step 2. Create the Bitcoin Payment Button Component in packages/storefront/src/modules/checkout/components/payment-button/index.tsx

Step 2.1 introduce a state variable to track clicks.

1const PaymentButton: React.FC<PaymentButtonProps> = ({
2  cart,
3  "data-testid": dataTestId,
4}) => {
5  const [btcClicked, setBtcClicked] = useState(false)
6  ....
7}

Step 2.2 Then in the case

1case isBtcpay(paymentSession?.provider_id):
      return (  
        <Button disabled={btcClicked} onClick={() => {setBtcClicked(true);
          window.open(`${(paymentSession?.data as any).btc_invoice.checkoutLink}`)}}>
          Pay with BtcPay
        </Button>
      )

Step 3. Extend Payment Constants

In :

1export const isBtcpay = (providerId?: string) => {
2  return providerId?.startsWith("pp_btcpay")
3}
4
5export const paymentInfoMap: Record<
6  string,
7  { title: string; icon: React.JSX.Element }
8> = {
9  ...
10  pp_btcpay_btcpay: {
11    title: "BtcPay",
12    icon: <CurrencyDollarSolid />,
13  },
14  ...
15}

Step 4. Hook Up the Payment Button

In :

1import { BtcpayserverPaymentButton } from "./btcpayserver-payment-button"
2
3...
4
5case "btcpayserver":
6  return <BtcpayserverPaymentButton session={paymentSession} notReady={notReady} cart={cart} />

step 5 . Create a confirmation page to poll the server --

You can use any mechanism, but i'chosen long polling, coz its just simple. You could use websockets or any other call back mechanism.

processing/page.tsx

1"use client";
2
3import { useEffect } from "react";
4import { useRouter } from "next/navigation";
5
6import { useSearchParams } from "next/navigation";
7import { sdk } from "@lib/config";
8import axios from "axios";
9
10const ProcessingPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  const cart= searchParams.get("cart");
  
16
  useEffect(() => {
      let isCancelled = false;
19
      const fetchData = async () => {
          try {
              const url = `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/checkout/is-paid?cart=${cart}`
              console.log("Fetching data from URL:", url);
              let response = await axios.get(url,{
                  headers: {
                      'content-type': 'application/json',
                      'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
                  }
              }) as any;
                  
              const result = await sdk.store.cart.complete(cart!) as  {
                  order: {
                      id: string;
                  };
              }
              const redirectUrl = `/order/${result.order.id}/confirmed`
              
              //const response = await fetch(`${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/checkout/is-paid?cart=${cart}`);
             /// const data = response.data;
              if (!isCancelled && redirectUrl) {
                  router.push(redirectUrl);
              }
          } catch (error) {
              if (!isCancelled) {
                  console.log("Error fetching data:", JSON.stringify(error));
              }
          } finally {
              if (!isCancelled) {
                  setTimeout(fetchData, 5000); // Poll every 5 seconds
              }
          }
      };
53
      fetchData();
55
      return () => {
          isCancelled = true;
      };
  }, []);
60
  return (
      <div>
          <h1>Processing...</h1>
          <p>Please wait while we process your request.</p>
      </div>
  );
67};
68
69export default ProcessingPage;

Step 6. Configure Environment Variables in Frontend

Set the following environment variables for your storefront:

1NEXT_PUBLIC_SHOP_NAME=<your shop name>
2NEXT_PUBLIC_MEDUSA_BACKEND_URL=<your medusa store>

Setting Up BTCPay Server Webhook

In BTCPayServer, add a webhook with this URL:

<your-host-url>/hooks/payment/btcpay_btcpay

Make sure you set the webhook secret to match your value.

Contributing

Pull requests are welcome! For significant changes, please open an issue first to discuss improvements or new features.

Please ensure tests and documentation are updated appropriately.

License

MIT License

Untested Features

Some features exist but haven't been fully tested in client integration:

Refund support
Lightning Network (LNURL and other advanced flows)

Disclaimer

This project is community-driven and tested in limited scenarios. Bugs may occur; please raise issues or submit pull requests if you encounter any.

Support the Payment-BitcoinPayServer Provider – Fuel Open Commerce!

Dear Medusa Enthusiasts,

Thank you for your passion and energy for open e-commerce!
The Payment-BitcoinPayServer provider is an open-source project crafted to connect MedusaJS with the powerful Bitcoin payment ecosystem.

If you find this project useful, consider sponsoring it on GitHub to help maintain and expand it.
Your support makes a world of difference in creating decentralized, open, and innovative commerce for all.

Let's keep building the future together!

With gratitude,
SGFGOV
Lead Developer, Payment-BitcoinPayServer Provider

Еще в этой категории

Посмотреть все

Платежи

Braintree

От Lambda Curry

Поддержка платежей и 3D Secure через Braintree

Платежи

Pay.

От Webbers

Принимайте кредитные карты, цифровые платежи и купи сейчас — плати потом

Платежи

Mollie

От Variable Vic

Легко принимайте мультивалютные платежи через Mollie

Еще от этого автора

Посмотреть все

Другое

Razorpay

От Sgfgov

Интегрируйте новейшие платежные API Razorpay

Плагины

BTCPay

Принимайте Bitcoin-платежи через BTCPay

npm install medusa-plugin-btcpay

Категория

Платежи

Создано

Sgfgov

Версия

0.0.6

Последнее обновление

11 месяцев назад

Ежемесячные загрузки

Звезды на Github

NPM Github

Support the Payment-BitcoinPayServer Provider – Power the Future of Medusa Commerce!

Dear Developers and E-commerce Pioneers,

What's in it for You:

🛡️ Secure & Sovereign Payments: Enable direct Bitcoin Network payments without relying on third-party payment processors.

🌍 Borderless Transactions: Serve a global audience with permissionless payments that know no borders.

🚀 Empower Open Commerce: By sponsoring this provider, you contribute to the Medusa community's growth, independence, and innovation!

Installation Made Simple

Use the package manager npm to install Payment-BitcoinPayServer.

yarn add medusa-plugin-btcpay

Usage

Set up a Bitcoin PayServer instance, either self-hosted or via a trusted host.

In your environment file () define:

1BTCPAY_URL=https://your-btcpayserver-instance.com
2BTCPAY_API_KEY=<your api key>
3BTCPAY_STORE_ID=<your store id>
4BTCPAY_WEBHOOK_SECRET=<your webhook secret>

You need to add the provider into your :

1module.exports = defineConfig({
modules: [
  ...
  {
    resolve: "@medusajs/medusa/payment",
    options: {
      providers: [
        ...
        {
          resolve: "@yourorg/payment-btcpayserver",
          id: "btcpayserver",
          options: {
            url: process.env.BTCPAY_URL,
            apiKey: process.env.BTCPAY_API_KEY,
            storeId: process.env.BTCPAY_STORE_ID,
            webhookSecret: process.env.BTCPAY_WEBHOOK_SECRET,
          },
        },
        ...
      ],
    },
  },
  ...
]
25})

Client Side Configuration

For your Medusa Next.js storefront, follow these steps:

Step 1. Install the Bitcoin Payment Button package

(optional - depends on your design)

yarn add react-btcpay-button

Step 2. Create the Bitcoin Payment Button Component in packages/storefront/src/modules/checkout/components/payment-button/index.tsx

Step 2.1 introduce a state variable to track clicks.

1const PaymentButton: React.FC<PaymentButtonProps> = ({
2  cart,
3  "data-testid": dataTestId,
4}) => {
5  const [btcClicked, setBtcClicked] = useState(false)
6  ....
7}

Step 2.2 Then in the case

1case isBtcpay(paymentSession?.provider_id):
      return (  
        <Button disabled={btcClicked} onClick={() => {setBtcClicked(true);
          window.open(`${(paymentSession?.data as any).btc_invoice.checkoutLink}`)}}>
          Pay with BtcPay
        </Button>
      )

Step 3. Extend Payment Constants

In :

1export const isBtcpay = (providerId?: string) => {
2  return providerId?.startsWith("pp_btcpay")
3}
4
5export const paymentInfoMap: Record<
6  string,
7  { title: string; icon: React.JSX.Element }
8> = {
9  ...
10  pp_btcpay_btcpay: {
11    title: "BtcPay",
12    icon: <CurrencyDollarSolid />,
13  },
14  ...
15}

Step 4. Hook Up the Payment Button

In :

1import { BtcpayserverPaymentButton } from "./btcpayserver-payment-button"
2
3...
4
5case "btcpayserver":
6  return <BtcpayserverPaymentButton session={paymentSession} notReady={notReady} cart={cart} />

step 5 . Create a confirmation page to poll the server --

You can use any mechanism, but i'chosen long polling, coz its just simple. You could use websockets or any other call back mechanism.

processing/page.tsx

1"use client";
2
3import { useEffect } from "react";
4import { useRouter } from "next/navigation";
5
6import { useSearchParams } from "next/navigation";
7import { sdk } from "@lib/config";
8import axios from "axios";
9
10const ProcessingPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  const cart= searchParams.get("cart");
  
16
  useEffect(() => {
      let isCancelled = false;
19
      const fetchData = async () => {
          try {
              const url = `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/checkout/is-paid?cart=${cart}`
              console.log("Fetching data from URL:", url);
              let response = await axios.get(url,{
                  headers: {
                      'content-type': 'application/json',
                      'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
                  }
              }) as any;
                  
              const result = await sdk.store.cart.complete(cart!) as  {
                  order: {
                      id: string;
                  };
              }
              const redirectUrl = `/order/${result.order.id}/confirmed`
              
              //const response = await fetch(`${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/checkout/is-paid?cart=${cart}`);
             /// const data = response.data;
              if (!isCancelled && redirectUrl) {
                  router.push(redirectUrl);
              }
          } catch (error) {
              if (!isCancelled) {
                  console.log("Error fetching data:", JSON.stringify(error));
              }
          } finally {
              if (!isCancelled) {
                  setTimeout(fetchData, 5000); // Poll every 5 seconds
              }
          }
      };
53
      fetchData();
55
      return () => {
          isCancelled = true;
      };
  }, []);
60
  return (
      <div>
          <h1>Processing...</h1>
          <p>Please wait while we process your request.</p>
      </div>
  );
67};
68
69export default ProcessingPage;

Step 6. Configure Environment Variables in Frontend

Set the following environment variables for your storefront:

1NEXT_PUBLIC_SHOP_NAME=<your shop name>
2NEXT_PUBLIC_MEDUSA_BACKEND_URL=<your medusa store>

Setting Up BTCPay Server Webhook

In BTCPayServer, add a webhook with this URL:

<your-host-url>/hooks/payment/btcpay_btcpay

Make sure you set the webhook secret to match your value.

Contributing

Pull requests are welcome! For significant changes, please open an issue first to discuss improvements or new features.

Please ensure tests and documentation are updated appropriately.

License

MIT License

Untested Features

Some features exist but haven't been fully tested in client integration:

Refund support
Lightning Network (LNURL and other advanced flows)

Disclaimer

This project is community-driven and tested in limited scenarios. Bugs may occur; please raise issues or submit pull requests if you encounter any.

Support the Payment-BitcoinPayServer Provider – Fuel Open Commerce!

Dear Medusa Enthusiasts,

Thank you for your passion and energy for open e-commerce!
The Payment-BitcoinPayServer provider is an open-source project crafted to connect MedusaJS with the powerful Bitcoin payment ecosystem.

Let's keep building the future together!

With gratitude,
SGFGOV
Lead Developer, Payment-BitcoinPayServer Provider