连接到Google Pay的React订阅方案

Question

我正在尝试使用Google Pay实现支付订阅计划。我不知道如何连接它，我只是在谷歌支付1美元的金额结账的样本，但我需要它使用订阅计划的价值，无论它是什么点击。谢谢你的帮助，真的很感谢。

这是我的代码：

import React, {
  Component,
  useEffect,
  useRef,
  useState,
  useCallback,
} from "react";
import Footer from "../Footer";
import NavBarLight from "../NavBarLight";
import GooglePayButton from "@google-pay/button-react";

function Subscription({ subscription }) {
  const [paidFor, setPaidFor] = useState(false);
  const [error, setError] = useState(null);
  const paypalRef = useRef();

  useEffect(() => {
    window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  currency_code: "USD",
                  value: subscription.price,
                },
              },
            ],
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          setPaidFor(true);
          console.log(order);
        },
        onError: (err) => {
          setError(err);
          console.error(err);
        },
      })
      .render(paypalRef.current);
  }, [subscription.description, subscription.price]);

  if (paidFor) {
    return (
      <div>
        <h1>Congrats, you just bought {subscription.name}!</h1>
        <img alt={subscription.description} />
      </div>
    );
  }

  return (
    <div>
      {error && <div>Uh oh, an error occurred! {error.message}</div>}
      <h1></h1>
      <div class="paypal" ref={paypalRef} />
    </div>
  );
}

export class PricingPlans extends Component {
  render() {
    const subscription = {
      price: 100,
    };

    return (
      <>
        <NavBarLight />
        <br />
        <br />
        <div id="generic_price_table">
          <section>
            <div className="container mx-1430">
              <div className="row">
                <div className="col-md-12">
                  <div className="price-heading clearfix">
                    <div className="section-head learn-pos text-center">
                      <h3>Choose the right plan for your business</h3>
                      <p>Greater savings with our annual plans</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <br />
            <br />
            <div className="container mx-1430">
              <div className="row">
                <div className="col-md-4">
                  <div className="generic_content clearfix">
                    <div className="generic_head_price clearfix">
                      <div className="generic_head_content clearfix">
                        <div className="head_bg"></div>
                        <div className="head">
                          <input type="radio" />
                          <label>
                            <span className="semibold">Starter</span>
                          </label>
                        </div>
                      </div>

                      <div className="generic_price_tag clearfix">
                        <span>Great For Small Businesses</span>
                        <span className="price">
                          <span className="sign">USD$</span>
                          <span className="currency">14</span>
                          <span className="cent">.99</span>
                          <span className="month">/MON</span>
                        </span>
                        <br />
                        <div>
                          <a
                            href="#!"
                            className="darkBlue medium darkBlueUnderline"
                          >
                            $299.99 billed annually
                          </a>
                        </div>
                        <div>(2 months FREE)</div>
                        <br />
                        <div className="semibold">1,000 Products</div>
                        <div>Single Store</div>
                      </div>
                    </div>

                    <div className="generic_feature_list">
                      <ul>
                        <li className="bord-bot-eb">
                          <span className="semibold">Included in Starter:</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Basic Inventory Tracking</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Customer Database</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Real-time Reporting</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Manage suppliers</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Audit Trail</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Secure cloud backup</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>24/7 Support</span>
                        </li>
                      </ul>
                    </div>

                    <div className="generic_price_btn clearfix">
                      <a className="semibold" href="">
                        get started
                      </a>
                    </div>
                  </div>
                </div>

                <div className="col-md-4">
                  <div className="generic_content active clearfix">
                    <div className="generic_head_price clearfix">
                      <div className="generic_head_content clearfix">
                        <div className="head_bg"></div>
                        <div className="head">
                          <input type="radio" />
                          <label>
                            <span className="semibold">Advanced</span>
                          </label>
                        </div>
                      </div>

                      <div className="generic_price_tag clearfix">
                        <span>
                          <b>(Most Recommended)</b>
                        </span>
                        <br />
                        <span>Best For Growing Businesses</span>
                        <span className="price">
                          <span className="sign muted">USD$</span>
                          <span className="currency">69</span>
                          <span className="cent">.99</span>
                          <span className="month">/MON</span>
                        </span>
                        <br />
                        <div>
                          <a
                            href="#!"
                            className="darkBlue medium darkBlueUnderline"
                          >
                            $699.99 billed annually
                          </a>
                        </div>
                        <div>(2 months FREE)</div>
                        <br />
                        <div className="semibold">10,000 Products</div>
                        <div>Multi-Store</div>
                      </div>
                    </div>

                    <div className="generic_feature_list">
                      <ul>
                        <li className="bord-bot-eb">
                          <span className="semibold">
                            Includes everything in Starter plus:
                          </span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Advanced Inventory Management</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Customer Loyalty</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Customisable Pricing &amp; Promotions</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Adjust pricing by stores (Price Books)</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Batch import products</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Secure cloud backup</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>24/7 Support</span>
                        </li>
                      </ul>
                    </div>

                    <div className="generic_price_btn clearfix">
                      <a className="semibold" href="">
                        get started
                      </a>
                    </div>
                  </div>
                </div>
                <div className="col-md-4">
                  <div className="generic_content clearfix">
                    <div className="generic_head_price clearfix">
                      <div className="generic_head_content clearfix">
                        <div className="head_bg"></div>
                        <div className="head">
                          <input type="radio" />
                          <label>
                            <span className="semibold">Pro</span>
                          </label>
                        </div>
                      </div>

                      <div className="generic_price_tag clearfix">
                        <span>Ideal For Established Brands</span>
                        <span className="price">
                          <span className="sign">USD$</span>
                          <span className="currency">149</span>
                          <span className="cent">.99</span>
                          <span className="month">/MON</span>{" "}
                        </span>
                        <br />
                        <div>
                          <a
                            href="#!"
                            className="darkBlue medium darkBlueUnderline"
                          >
                            $1,599.99 billed annually
                          </a>
                        </div>

                        <div>(2 months FREE)</div>
                        <br />
                        <div className="semibold">Unlimited Products</div>
                        <div>Multi-Store</div>
                      </div>
                    </div>

                    <div className="generic_feature_list">
                      <ul>
                        <li className="bord-bot-eb">
                          <span className="semibold">
                            Includes everything in Advanced plus:
                          </span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Dedicated Success Manager</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Priority Support</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Advanced reporting</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Premium API access</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Add-ons &amp; ecommerce channels</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>Customised onboarding</span>
                        </li>
                        <li className="bord-bot-eb">
                          <span>24/7 Support</span>
                        </li>
                      </ul>
                    </div>

                    <div className="generic_price_btn clearfix">
                      <a className="semibold" href="">
                        get started
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <br />
            <br />
            <GooglePayButton
              environment="TEST"
              paymentRequest={{
                apiVersion: 2,
                apiVersionMinor: 0,
                allowedPaymentMethods: [
                  {
                    type: "CARD",
                    parameters: {
                      allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                      allowedCardNetworks: ["MASTERCARD", "VISA"],
                    },
                    tokenizationSpecification: {
                      type: "PAYMENT_GATEWAY",
                      parameters: {
                        gateway: "example",
                        gatewayMerchantId: "exampleGatewayMerchantId",
                      },
                    },
                  },
                ],
                merchantInfo: {
                  merchantId: "12345678901234567890",
                  merchantName: "Demo Merchant",
                },
                transactionInfo: {
                  totalPriceStatus: "FINAL",
                  totalPriceLabel: "Total",
                  totalPrice: "1",
                  currencyCode: "USD",
                  countryCode: "US",
                },
                shippingAddressRequired: true,
                callbackIntents: ["SHIPPING_ADDRESS", "PAYMENT_AUTHORIZATION"],
              }}
              onLoadPaymentData={(paymentRequest) => {
                console.log("Success", paymentRequest);
              }}
              onPaymentAuthorized={(paymentData) => {
                console.log("Payment Authorised Success", paymentData);
                return { transactionState: "SUCCESS" };
              }}
              onPaymentDataChanged={(paymentData) => {
                console.log("On Payment Data Changed", paymentData);
                return {};
              }}
              existingPaymentMethodRequired="false"
              buttonColor="black"
              buttonType="Buy"
            />
            <Subscription subscription={subscription} />
          </section>
        </div>
        <br />
        <br />
        <Footer />
      </>
    );
  }
}

export default PricingPlans;

这是我的订阅计划：

​

这是我的Google Pay结账：

​

Answer 1

有没有什么原因不能像对PayPal那样将totalPrice的值赋给subscription.price？如果问题是totalPrice需要一个string，而subscription.price是一个number，那么您应该能够使用subscription.price.toFixed(2)获得格式化的值。

FWIW，我会将单独的定价计划拉到它们自己的组件(例如<Plan />)中，并跟踪当前选择的计划。

类似于：

const plans = [
  {
    name: 'Starter',
    price: 14.99,
  },
  {
    name: 'Advanced',
    price: 69.99,
  },
  {
    name: 'Pro',
    price: 149.99,
  },
];

function Subscription() {
  const [plan, setPlan] = useState(plans[0]);

  return (
    <div>
      {
        plans.map(p => (
          <Plan
            plan={p} 
            isSelected={p === plan}
            onClick={() => setPlan(p)}
          />
        ))
      }
    </div>
    <GooglePayButton
      paymentRequest={{
        // ...
        totalPrice: plan.price.toFixed(2),
        // ...
      }}
    />
  );
}

然后，您可以基于当前所选计划的详细信息构建paymentRequest。