प्रतिक्रिया जेएस स्ट्रिप चेकआउट काम नहीं कर रहा है

Question

मैं प्रतिक्रिया जेएस अनुप्रयोग में एक पट्टी चेकआउट डिफ़ॉल्ट रूप प्रस्तुत करने की कोशिश कर रहा हूं।

<form action="/your-server-side-code" method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" className="stripe-button" 
    data-key="pk_test_oDALA0jNyxDzbRz5RstV4qOr" 
    data-amount="999" 
    data-name="test" 
    data-description="Widget" 
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
    data-locale="auto"> 
    </script> 
</form> 

यह कुछ भी प्रदर्शित नहीं कर रहा है और त्रुटि भी नहीं मिल रहा है। मुझे वह भुगतान बटन और फ़ॉर्म कैसे प्राप्त होगा।

Answer 1

मुख्य मुद्दा जो आप शायद कर रहे हैं वह प्रतिक्रिया के भीतर एक स्क्रिप्ट लोड कर रहा है।

एक दृष्टिकोण केवल चेकआउट स्क्रिप्ट को लोड करने के लिए है (केवल स्पा का कुछ रूप मानते हुए), फिर बस इसे सीधे कॉल करें। यह प्रलेखन पृष्ठ पर "कस्टम" संस्करण के समान है: https://stripe.com/docs/checkout#integration-custom

यदि आप पहले से ही checkout.js लोड कर रहे हैं (उदाहरण के लिए आपके "app.js" से पहले), तो नीचे मैन्युअल रूप से थोड़ा सा सरल नहीं किया जा सकता है लिपि में लोड हो रहा है।

import React from 'react'; 

export default class Cards extends React.Component { 

    constructor(props:Object) { 
     super(props); 
     this.state = { 
      loading: true, 
      stripeLoading: true, 
     }; 
    } 

    loadStripe(onload:Function) { 
     if(! window.StripeCheckout) { 
      const script = document.createElement('script'); 
      script.onload = function() { 
       console.info("Stripe script loaded"); 
       onload(); 
      }; 
      script.src = 'https://checkout.stripe.com/checkout.js'; 
      document.head.appendChild(script); 
     } else { 
      onload(); 
     } 
    } 

    componentDidMount() { 

     this.loadStripe(() => { 
      this.stripehandler = window.StripeCheckout.configure({ 
       key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', 
       image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
       locale: 'auto', 
       token: (token) => { 
        this.setState({ loading: true }); 
        axios.post('/your-server-side-code', { 
         stripeToken: token.id, 
        }); 
       } 
      }); 

      this.setState({ 
       stripeLoading: false 
      }); 
     }); 
    } 

    componentWillUnmount() { 
     if(this.stripehandler) { 
      this.stripehandler.close(); 
     } 
    } 

    onStripeUpdate(e:Object) { 
     this.stripehandler.open({ 
      name: 'test', 
      description: 'widget', 
      panelLabel: 'Update Credit Card', 
      allowRememberMe: false, 
     }); 
     e.preventDefault(); 
    } 

    render() { 
     const { stripeLoading, loading } = this.state; 
     return (
      <div> 
       {(loading || stripeLoading) 
        ? <p>loading..</p> 
        : <button onClick={this.onStripeUpdate}>Add CC</button> 
       } 
      </div> 
     ); 
    } 
} 

Answer 2

क्रिस का जवाब उत्कृष्ट था, हालांकि कोड को काम करने के लिए मुझे कुछ मामूली बदलाव करना पड़ा। मैंने टाइपस्क्रिप्ट फ़ंक्शन प्रकारों को भी हटा दिया है (उनमें से उन लोगों के लिए टाइपस्क्रिप्ट का उपयोग नहीं कर रहे हैं)। टिप्पणियां जोड़ दी जाती हैं जहां उत्तर में परिवर्तन किए गए हैं। एफवाईआई यह मेरी पहली पोस्ट है, कृपया मुझे बताएं कि क्या उत्तर के बजाए यह टिप्पणी होनी चाहिए।

export default class Cards extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      loading: true, 
      stripeLoading: true, 
     }; 
     // onStripeUpdate must be bound or else clicking on button will produce error. 
     this.onStripeUpdate = this.onStripeUpdate.bind(this); 
     // binding loadStripe as a best practice, not doing so does not seem to cause error. 
     this.loadStripe = this.loadStripe.bind(this); 
    } 

    loadStripe(onload) { 
     if(! window.StripeCheckout) { 
      const script = document.createElement('script'); 
      script.onload = function() { 
       console.info("Stripe script loaded"); 
       onload(); 
      }; 
      script.src = 'https://checkout.stripe.com/checkout.js'; 
      document.head.appendChild(script); 
     } else { 
      onload(); 
     } 
    } 

    componentDidMount() { 

     this.loadStripe(() => { 
      this.stripeHandler = window.StripeCheckout.configure({ 
       key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', 
       image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
       locale: 'auto', 
       token: (token) => { 
        this.setState({ loading: true }); 
        // use fetch or some other AJAX library here if you dont want to use axios 
        axios.post('/your-server-side-code', { 
         stripeToken: token.id, 
        }); 
       } 
      }); 

      this.setState({ 
       stripeLoading: false, 
       // loading needs to be explicitly set false so component will render in 'loaded' state. 
       loading: false, 
      }); 
     }); 
    } 

    componentWillUnmount() { 
     if(this.stripeHandler) { 
      this.stripeHandler.close(); 
     } 
    } 

    onStripeUpdate(e) { 
     this.stripeHandler.open({ 
      name: 'test', 
      description: 'widget', 
      panelLabel: 'Update Credit Card', 
      allowRememberMe: false, 
     }); 
     e.preventDefault(); 
    } 

    render() { 
     const { stripeLoading, loading } = this.state; 
     return (
      <div> 
       {(loading || stripeLoading) 
        ? <p>loading..</p> 
        : <button onClick={this.onStripeUpdate}>Add CC</button> 
       } 
      </div> 
     ); 
    } 
}