如何解决React 订阅计划连接到 Google Pay
我正在尝试使用 Google Pay 支付订阅计划。我不知道如何连接它我只是在 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 & 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 & 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 Checkout：
解决方法
您为什么不能像为 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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
