Элемент FPX в новом Stripe PaymentElement не настраивается во фронтенде

Кто-нибудь пробовал использовать новый PaymentElement в Stripe? Согласно документации, payment_method_types должен быть настроен на стороне сервера, а клиентская сторона автоматически настроит его после получения client_secret. Я выполнил все шаги в документации и все другие выбранные мной способы оплаты работают, но клиентская сторона не конфигурирует FPX

Вот скриншот вывода. Как вы можете видеть, он настраивает оплату картой, grabpay и alipay, но не настраивает оплату fpx: Скриншот вывода

Ссылка на документацию 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 для приема платежей. Я все еще пытаюсь понять, почему он не настраивает FPXPayments в PaymentElement во фронтенде.

Заранее спасибо!

Вернуться на верх