新 Stripe PaymentElement 中的 FPX 元素未在前端配置

Posted 2023-03-21

【中文标题】新 Stripe PaymentElement 中的 FPX 元素未在前端配置

【英文标题】：FPX element in the new Stripe PaymentElement is not configuring in the frontend

【发布时间】：2021-12-17 10:37:27

【问题描述】：

有没有人尝试在 Stripe 中使用新的 PaymentElement？ 根据文档，payment_method_types 需要在服务器端配置，客户端在获取到 client_secret 后会自动配置。我已按照文档中的所有步骤操作，并且我选择的所有其他付款方式都可以使用，但客户端不会配置 FPX

这是输出的屏幕截图。如您所见，它正在配置卡支付、grabpay 和支付宝，但没有配置 fpx 支付： Screenshot of Output

参考我关注的 Stripe 文档：https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

后端视图 -Django

# stripe payment key
stripe.api_key = 'sk_test_<<SECRET_KEY>>'

@api_view(['POST'])
def test_payment(request):

data = request.data
amount = int(float(data['amount']) * 100)
intent = stripe.PaymentIntent.create(
    amount=amount,
    currency='myr',
    payment_method_types=['card', 'fpx', 'grabpay', 'alipay', ],
)
return Response(status=status.HTTP_200_OK, data=intent)

placeorder.js

 import React, useState, useEffect from 'react'
 import axios from 'axios'

 //UI components
 import Message from '../components/Message'
 import Loader from '../components/Loader'


 //---------- STRIPE PAYMENT COMPONENTS -------------//
 import Elements from '@stripe/react-stripe-js'
 import loadStripe from "@stripe/stripe-js/pure"
 import CheckoutForm from "../components/CheckoutForm"

 //dev-based publishable key
 const stripePromise = loadStripe('pk_test_<<PUBLISHABLE_KEY');


 const PlaceOrder = () => 

 /* .
    .
    bunch of other code 
    .
    .
   -----*/

  const [amount, setAmount] = useState(0)
  let [clientSecret, setClientSecret] = useState('')

 useEffect(()=> 
    if(cart.totalPrice > 0) 
        setAmount(cart.totalPrice )
    
    //get client_secret
    
    (async () => 
        if(amount>0 && clientSecret === '')
            //fetch client secret
            const response = await axios.post('/api/orders/payment/test-payment/', 
                                            'amount':amount
                                        )                       
           // set client secret
            const cs = await response.data.client_secret
            setClientSecret(cs)  
            setStripeLoading(false)  
            
    )()

    if(!stripeLoading)
        setOptions(
            clientSecret: clientSecret,
            appearance : 
                theme: 'stripe'
            
        )
        console.log("options2:", options)
    

,[amount, cart.totalPrice, stripeLoading])

return (
<>
  (options === '') 
      ? <Loader/>
      : <Elements stripe=stripePromise options=options >
          <CheckoutForm amount=amount method=paymentMethod/>
        </Elements>
                                                 
    </>)
export default PlaceOrder

Checkout.js

import React, useState, useEffect from 'react'

//stripe componetns
import useStripe, useElements, PaymentElement from '@stripe/react-stripe-js';

//UI elements
import Form, Button, Row, Col from 'react-bootstrap'
import Message from './Message'
import Loader from './Loader'

const CheckoutForm = (amount, method) => 

    const [error, setError] = useState('')
    const [email, setEmail] = useState('');

    const stripe = useStripe()
    const elements = useElements()
const handleSubmit = async (e) => 
        //prevent default submission and page refresh
        e.preventDefault();

         if (!stripe || !elements) 
            // Stripe.js has not yet loaded.
            setError("Stripe or Stripe elements have not loaded yet")
            return;
            

        const error = await stripe.confirmPayment(
        //`Elements` instance that was used to create the Payment Element
        elements,
        confirmParams: 
            return_url: '/placeorder',
        ,

         if (error) 
             setError("Error: Something went wrong")
         

    );

return (
        <Form onSubmit=handleSubmit className="stripe-form">
            /* display error message */
            error && <Message variant="danger">error</Message> 

            <PaymentElement id="payment-element"/>
            <div className="d-grid">
                 <Button type="submit" variant="primary" className="my-3 mt-4" disabled=!stripe>
                     Submit Payment
                 </Button>
            </div>            
         </Form>
         )
        

   export default CheckoutForm

PS。我还没有配置条带接受付款。我仍在试图弄清楚为什么它不会在前端的 PaymentElement 中配置 FPXPayments。

提前致谢！

【参考方案1】：

以前 FPX 在支付元素中不可用，但现在可以。您可以查看支持的付款方式here。