Question

我正在尝试在https://stripe.com/docs/stripe-js/elements/quickstart

之后使用Stripe.js

我制作的html，css，javascript与该网址的样本相同。

但是当我点击“提交付款”时按钮，它总是显示控制台错误而无法正常工作。

(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

请让我知道为什么会这样。

Answer 1

请尝试这个。可以。

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

Answer 2

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

Answer 3

在移动屏幕尺寸和台式机屏幕尺寸之间切换时，我遇到了这个问题-分界线大小，其中Stripe仅显示卡号的后4位。如果我以新的分辨率刷新页面，它将起作用。

如果此描述适合您的问题，您可能可以在更改大小后再次安装该元素，或者必须重新创建它。

Answer 4

这应该有效

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

<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

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

Answer 5

如果您在React代码中看到了这些，这些链接可能会有所帮助： https://github.com/stripe/react-stripe-elements/issues/55#issuecomment-326707827 https://github.com/stripe/react-stripe-elements#troubleshooting

基本上，react中的条纹元素使用更高阶的组件模式。如果使用@Embedded的HOC包装了shouldComponentUpdate函数，则create令牌将无法找到对条带元素的引用。使injectStripe的垃圾质量最高

示例：

injectStripe

Answer 6

免责声明：我知道已经回答了这个问题，但是由于合并，我也遇到了重复脚本包含的相同问题。因为这是我查找问题时获得的第一页，所以我觉得这是留下此信息的好地方。

A）如果它正在运行并且已创建令牌（console.log或检查条纹仪表板），请确保检查两次未包含Stripe.js。

B）如果您使用的是Angular（React可能有一个类似的例子），那么我很容易通过使用ngx-stripe模块来实现Stripe。

随意提出更具体的问题。我不得不从快速入门开始实施基本的基础。

Answer 7

我花了几天时间才弄明白，但就我而言，我在使用 Angular Shadow DOM 封装的模式 (Angular 11) 中显示了 Stripe 信用卡元素。去掉 Shadow DOM 封装解决了这个问题。

条带无法处理错误＆＃39;未捕获（在承诺中）错误：我们无法从指定的元素检索数据。＆＃39;

7 个答案: