React js Stripe 结帐不起作用 [英] React js Stripe checkout is not working

问题描述

我正在尝试在 React js 应用程序中呈现条纹结帐默认表单.

<脚本src="https://checkout.stripe.com/checkout.js" className="stripe-button"data-key="pk_test_oDALA0jNyxDzbRz5RstV4qOr"数据量=999"数据名称=测试"数据描述=小部件"数据图像="https://stripe.com/img/documentation/checkout/marketplace.png"数据区域设置=自动"></表单>

它不显示任何内容，也不会出错.我如何获得付款按钮和表格.

解决方案

您可能遇到的主要问题是在 React 中加载脚本.

一种方法是仅在需要时加载结帐脚本(假设某种形式的 spa)，然后直接调用它.这类似于文档页面上的自定义"版本:https://stripe.com/docs/checkout#integration-custom

如果您已经在加载 checkout.js(例如在您的app.js"之前)，那么下面可以通过不在脚本中手动加载来简化一些.

从'react'导入React；导出默认类 Cards extends React.Component {构造函数(道具:对象){超级(道具)；this.state = {加载:真实，条纹加载:真，};}loadStripe(onload:Function) {如果(！window.StripeCheckout){const script = document.createElement('script');script.onload = 函数 () {console.info("加载了条纹脚本");负载();};script.src = 'https://checkout.stripe.com/checkout.js';document.head.appendChild(script);} 别的 {负载();}}componentDidMount() {this.loadStripe(() => {this.stripehandler = window.StripeCheckout.configure({键:'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx'，图片:'https://stripe.com/img/documentation/checkout/marketplace.png'，语言环境:'自动'，令牌:(令牌)=>{this.setState({loading: true });axios.post('/您的服务器端代码', {stripeToken: token.id,});}});this.setState({条纹加载:假});});}componentWillUnmount() {如果(this.stripehandler){this.stripehandler.close();}}onStripeUpdate(e:Object) {this.stripehandler.open({name: '测试',描述:'小部件'，panelLabel: '更新信用卡',允许记住我:假，});e.preventDefault();}使成为() {const { stripeLoading, loading } = this.state;返回 (<div>{(加载 || 条带加载)?<p>加载..</p>:<button onClick={this.onStripeUpdate}>添加CC</button>}

);}}

I am trying to render a stripe checkout default form in React js application.

<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>

Its not displaying anything and not getting error also. How do i get that pay button and form.

解决方案

The main issue you are probably having is loading a script within React.

One approach is to load the checkout script only when needed (assuming some form of spa), then just directly call it. This is akin to the "custom" version on the documentation page: https://stripe.com/docs/checkout#integration-custom

If you are already loading checkout.js (for example before your "app.js"), then the below can be simplified a bit by not manually loading in the script.

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>
        );
    }
}

这篇关于React js Stripe 结帐不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！