堆栈内存溢出
  简体   繁体   English

Stripe 无法使用错误“未捕获（承诺中）错误：我们无法从指定元素中检索数据。”

[英]Stripe not working with error 'Uncaught (in promise) Error: We could not retrieve data from the specified Element.'

 原文  2018-01-22 22:12:05  5   7    javascript/ submit/ payment/ stripe.js

问题描述

I am trying to use Stripe.js following https://stripe.com/docs/stripe-js/elements/quickstart我正在尝试按照https://stripe.com/docs/stripe-js/elements/quickstart使用 Stripe.js

I made html, css, javascript just same as sample of that url.我制作的 html、css、javascript 与该 url 的示例相同。

But when I click 'Submit Payment' Button, it always shows console error and not working.但是当我单击“提交付款”按钮时，它总是显示控制台错误并且无法正常工作。

(index):1 Uncaught (in promise) Error: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.
    at new t ((index):1)
    at e._handleMessage ((index):1)
    at e._handleMessage ((index):1)
    at (index):1

Please let me know why this happens.请让我知道为什么会这样。

7 个解决方案

解决方案1
 9  2019-06-19 15:37:14

Please try this.请试试这个。 It works.有用。

<html>
    <head>
        <style>
            /**
            * The CSS shown here will not be introduced in the Quickstart guide, but shows
            * how you can use CSS to style your Element's container.
            */
            .StripeElement {
            box-sizing: border-box;

            height: 40px;

            padding: 10px 12px;

            border: 1px solid transparent;
            border-radius: 4px;
            background-color: white;

            box-shadow: 0 1px 3px 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
            }

            .StripeElement--focus {
            box-shadow: 0 1px 3px 0 #cfd7df;
            }

            .StripeElement--invalid {
            border-color: #fa755a;
            }

            .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
            }
        </style>
    </head>
    <body>
        <script src="https://js.stripe.com/v3/"></script>

        <form action="/charge" method="post" id="payment-form">
            <div class="form-row">
            <label for="card-element">
                Credit or debit card
            </label>
            <div id="card-element">
                <!-- A Stripe Element will be inserted here. -->
            </div>
        
            <!-- Used to display form errors. -->
            <div id="card-errors" role="alert"></div>
            </div>
        
            <button>Submit Payment</button>
        </form>
            
        <script>
            // Create a Stripe client.
            var stripe = Stripe('pk_test_XzLQCcuHS0Qc5xPIARiG8aNU');

            // Create an instance of Elements.
            var elements = stripe.elements();

            // Custom styling can be passed to options when creating an Element.
            // (Note that this demo uses a wider set of styles than the guide below.)
            var style = {
                base: {
                    color: '#32325d',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                    color: '#aab7c4'
                    }
                },
                invalid: {
                    color: '#fa755a',
                    iconColor: '#fa755a'
                }
            };

            // Create an instance of the card Element.
            var card = elements.create('card', {style: style});

            // Add an instance of the card Element into the `card-element` <div>.
            card.mount('#card-element');

            // Handle real-time validation errors from the card Element.
            card.addEventListener('change', function(event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });

            // Handle form submission.
            var form = document.getElementById('payment-form');
            form.addEventListener('submit', function(event) {
                event.preventDefault();

                stripe.createToken(card).then(function(result) {
                    if (result.error) {
                    // Inform the user if there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                    } else {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);
                    }
                });
            });

            // Submit the form with the token ID.
            function stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                // var form = document.getElementById('payment-form');
                // var hiddenInput = document.createElement('input');
                // hiddenInput.setAttribute('type', 'text');
                // hiddenInput.setAttribute('name', 'stripeToken');
                // hiddenInput.setAttribute('value', token.id);
                // form.appendChild(hiddenInput);
                alert('Success! Got token: ' + token.id);

                // Submit the form
                // form.submit();
            }
        </script>
    </body>
</html>

Note that both the fix and the cause is the call:请注意，修复和原因都是调用：

 stripe.createToken(card)

I mean, this happens if we try to submit with wrong create prefixed method, and while for above createToken works, it may not for other stripe-elements and/or API configurations.我的意思是，如果我们尝试使用错误的create前缀方法提交，就会发生这种情况，虽然对于上述createToken有效，但它可能不适用于其他条带元素和/或 API 配置。

解决方案2
 5  2018-07-15 11:44:08

I've had this problem when switching between mobile and desktop screen sizes - the cutoff size where Stripe only displays the last 4 digits of the card number.在移动和桌面屏幕尺寸之间切换时我遇到了这个问题 - Stripe 只显示卡号的最后 4 位的截止尺寸。 If I refresh the page in the new resolution it works.如果我以新的分辨率刷新页面，它就可以工作。

If this description fits your problem you might be able to mount the element again after the size change, or you'll have to recreate it.如果此描述符合您的问题，您可以在尺寸更改后再次安装该元素，或者您必须重新创建它。

解决方案3
 2  2019-11-06 04:13:27

If you're seeing this in React code, these links might help: https://github.com/stripe/react-stripe-elements/issues/55#issuecomment-326707827https://github.com/stripe/react-stripe-elements#troubleshooting如果您在 React 代码中看到这一点，这些链接可能会有所帮助： https ://github.com/stripe/react-stripe-elements/issues/55#issuecomment-326707827https://github.com/stripe/react-条纹元素#疑难解答

Essentially the stripe elements in react use the higher order component pattern.本质上，react 中的条带元素使用高阶组件模式。 If a HOC that uses shouldComponentUpdate wraps the injectStripe function, create token won't be able to find the ref to stripe elements.如果使用shouldComponentUpdate的 HOC 包装了injectStripe函数，create token 将无法找到条带元素的引用。 Make injectStripe the outer most HOC使injectStripe成为最外层的 HOC

Example:例子：

  connect()(injectStripe(YourComponent))
  Becomes
  injectStripe(connect()(YourComponent))

解决方案4
 1  2020-04-30 10:27:43

Disclaimer: I know this question has been answered, but I had the same issue with duplicate scripts inclusions due to merging.免责声明：我知道这个问题已经得到解答，但是由于合并，我遇到了相同的脚本包含重复问题。 Since this is the first page I got when looking up my problem I felt that this would be a good place to leave this information.由于这是我在查找问题时得到的第一页，我觉得这是留下这些信息的好地方。

A) If it is functioning and the token is created (console.log or check stripe dashboard), please be sure to check that Stripe.js was not included twice. A）如果它正在运行并且创建了令牌（console.log 或检查条带仪表板），请务必检查 Stripe.js 是否包含两次。

B) If you are using Angular (an analogy probably exists for React), I had a very easy time implementing stripe through the use of the ngx-stripe module. B）如果您使用的是 Angular（React 可能存在类比），我可以通过使用 ngx-stripe 模块轻松实现条带化。

Feel free to ask more specific questions.随时提出更具体的问题。 I've had to implement the base one from quick-start which was overall hell.我不得不从快速入门开始实施基础版本，这简直就是地狱。

解决方案5
 1  2020-09-01 13:07:52

如果您在本地开发环境中工作并且您的 HTTP 连接不安全（不是 HTTPS），那么您需要包含不带 https 的 Stripe JS：

解决方案6
 0  2021-01-02 21:41:14

Took me a few days to figure out, but in my case I was displaying the Stripe credit card element in a modal (Angular 11) that was using the Angular Shadow DOM encapsulation.我花了几天时间才弄明白，但在我的情况下，我正在使用 Angular Shadow DOM 封装的模式（Angular 11）中显示 Stripe 信用卡元素。 Removing the Shadow DOM encapsulation solved this problem.移除 Shadow DOM 封装解决了这个问题。

解决方案7
 -4  2019-07-12 13:31:12

This should work这应该工作

JS Code JS代码

 constructor(paymentInfo) {
    this.paymentInfo = paymentInfo;
    this.paymentInfo.amount = 25;
   this.loadStripe();
}

afterLoadingStripe() {
    this.stripe = Stripe(this.publicKey);
    var elements = this.stripe.elements();
    this.card = elements.create('card', {
        style: {
            base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '15px',

                '::placeholder': {
                    color: '#CFD7E0',
                },
            },
        }
    });
    this.card.mount('#card-element');
}

getToken() {
    let context = this;
    this.stripe.createToken(this.card).then(function (result) {
        if (result.error) {
        } else {
            context.paymentInfo.token = result;
            context.submitPaymentInfo();
        }
    });
}
submitPaymentInfo() {
    //submit here
    return;
}

loadStripe() {
    var script = document.createElement('script');
    let context = this;
    script.onload = function () {
        context.afterLoadingStripe();
    };
    script.src = "https://js.stripe.com/v3/";
    document.getElementsByTagName('head')[0].appendChild(script);
}

} }

HTML HTML

<script src="https://js.stripe.com/v3/"></script>
<div class="modal-dialog modal-lg">
    <require from="../../../css/stylesheet.css"></require>
    <div class="modal-content">
        <div class="modal-header">
            <h4>Payment</h4>
            <button type="button" id="stripe-modal-close" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
            <form class="stripe-form" submit.delegate="getToken()">
                <div class="group">
                    <label class="stripe-label">
                        <span>Title</span>
                        <input id="name" class="stripe-field" placeholder="Jane Doe" />
                    </label>
                    <label class="stripe-label">
                        <span>Card</span>
                        <div id="card-element" class="stripe-field"></div>
                    </label>
                </div>
                <button class="btn btn-outline-dark my-3" type="submit">Pay $25</button>
                <div class="stripe-outcome">
                    <div class="stripe-error"></div>
                </div>
            </form>
        </div>
    </div>
</div>

CSS CSS 

 .group { background: white; box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08); border-radius: 4px; margin-bottom: 20px; } .stripe-label { position: relative; color: #8898AA; font-weight: 300; height: 40px; line-height: 40px; margin-left: 20px; display: flex; flex-direction: row; } .group label:not(:last-child) { border-bottom: 1px solid #F0F5FA; } .stripe-label > span { width: 80px; text-align: right; margin-right: 30px; } .stripe-field { background: transparent; font-weight: 300; border: 0; color: #31325F; outline: none; flex: 1; padding-right: 10px; padding-left: 10px; cursor: text; } .stripe-field::-webkit-input-placeholder { color: #CFD7E0; } .stripe-field::-moz-placeholder { color: #CFD7E0; } .stripe-button { float: left; display: block; background: #666EE8; color: white; box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08); border-radius: 4px; border: 0; margin-top: 20px; font-size: 15px; font-weight: 400; width: 100%; height: 40px; line-height: 38px; outline: none; } .stripe-button:focus { background: #555ABF; } .stripe-button:active { background: #43458B; } .stripe-outcome { float: left; width: 100%; padding-top: 8px; min-height: 24px; text-align: center; } .stripe-success, .stripe-error { display: none; font-size: 13px; } .stripe-success.visible, .stripe-error.visible { display: inline; } .stripe-error { color: #E4584C; } .stripe-success { color: #666EE8; } .stripe-success .stripe-token { font-weight: 500; font-size: 13px; }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 未捕获（承诺）错误：提供给 `Elements` 的道具 `stripe` 无效。 我们建议使用来自 `@stripe/stripe-js` 的 `loadStripe` 实用程序 - Uncaught (in promise) Error: Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js` Stripe 问题，请调用 Stripe() 错误 Uncaught (in promise) - Stripe Problem, please call Stripe ( ) error Uncaught (in promise) 未捕获的错误：目标容器不是DOM元素。 网络包 - Uncaught Error: Target container is not a DOM element. webpack 未捕获的错误：_registerComponent(…)：目标容器不是 DOM 元素。(…) - Uncaught Error: _registerComponent(…): Target container is not a DOM element.(…) 未捕获的错误：没有指定元素来初始化 PerfectScrollbar - Uncaught Error: no element is specified to initialize PerfectScrollbar 未捕获（承诺）错误：既没有在给定选项中也没有在默认选项中指定“发件人”地址 - Uncaught (in promise) Error: No "from" address specified in neither the given options, nor the default options 未捕获错误：不变违规：findComponentRoot（...，... $ 110）：无法找到元素。这可能意味着DOM意外地发生了变异 - Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated 未捕获的错误：目标容器不是DOM元素。 （React网页不会显示任何内容） - Uncaught Error: Target container is not a DOM element. (React webpage won't show anything) 未捕获（承诺中）错误：reCAPTCHA 占位符元素必须是元素或 id - Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id 未捕获（承诺）错误 - Uncaught (in promise) Error
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM