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

Question

有人试过在 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。我还没有配置 stripe 来接受付款。我仍在尝试弄清楚为什么它不会在前端的 PaymentElement 中配置 FPXPayments。

提前致谢！

Answer 1

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

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

FPX element in the new Stripe PaymentElement is not configuring in the frontend

python

django

payment-gateway

stripe-payments

reactjs