如果您尝试在同一个页面上创建两个相同类型的元素（如card元素），您将收到此错误：

Can only create one Element of type card

您可能需要使用单个Card Element、使用单独的页面、使用<iframe>元素或类似的方法作为解决方法。

Problems with your code:

1. There should never be multiple HTML elements with the same id on the same page so this is incorrect HTML. (It will not break the page but as you see in the next step it'll cause confusion)

<div id="card-number-element"></div>
<div id="card-number-element"></div>

1. document.getElementById will always just return a single element. So document.getElementById("card-number-element") will only return the first element. Even when there are two.

One possible solution:

1. use unique id values. Like card-number-element-1 and card-number-element-2
2. Enable selecting both elements. So maybe we add the same class to both elements and use getElementsByClasName to select them both.
3. Now the only question that remains is how cardNumberElement.mount works - does it require a unique identifier per element? Let me just GUESS that it might. So I'm gonna have a unique id per element and pass that to the mount function.
   Here's my attempt.

<script src="https://js.stripe.com/v3/"></script>

<div id="card-number-element-1"></div>
<div id="card-number-element-2"></div>

<script>
var cardNumberElement = elements.create("cardNumber");
var elementsToMountTo = document.getElementsByClassName("card-number-element");

elementsToMountTo.forEach((element) => {
   cardNumberElement.mount("#" + element.id);
}
</script>

PS: I have not looked into how Stripe works so I dunno if the line cardNumberElement.mount will work if you run it two times like this.

我曾与条纹几次，但没有这样做之前，这可能会为您工作或给你一个想法前进。

• • html id**在页面上必须是唯一的。这就是为什么只生成第一个。

<script src="https://js.stripe.com/v3/"></script>

// first one
<div id="card-number-element-1"></div>

// another one
<div id="card-number-element-2"></div>

<script>
var cardNumberElement = elements.create("cardNumber");
if (document.getElementById("card-number-element-1")) {
  cardNumberElement.mount("#card-number-element-1");
}
if (document.getElementById("card-number-element-2")) {
  cardNumberElement.mount("#card-number-element-2");
}
</script>

这可能不适用于Stripe，但是，不确定它们是否支持这样的多个元素。

为此，我卸载了当前版本并安装了新版本：

stripe = Stripe(publicKey);
var elements = stripe.elements();
var card = elements.create('card', { style: {} });
card.mount('#card-element'); // <<--- By this line the card will be created

$('#some-button').on('click', function() {
  card.unmount(); // <<--- By this line the current card will be disappeared
  card.mount('card-element-2'); // <<--- And lastly by this line your second card-element will be created here
});

在这里，你将做类似于前一个，但这一次，第一个卡元素将显示，第二个将消失

$('#some-button').on('click', function() {
  card.unmount(); // <<--- By this line the second card will be disappeared
  card.mount('card-element'); // <<--- And lastly by this line your first card-element will be created here
});

条带化只允许一个已挂载的元素。您需要卸载第一个元素才能启用第二个元素。
HTML语言

<script src="https://js.stripe.com/v3/"></script>
<form>
  <div class="group">
    <label>
      <span>Card 1</span>
      <div id="card-element-1" class="field"></div>
    </label>
  </div>
  <div class="group">
    <label>
      <span>Card 2</span>
      <div id="card-element-2" class="field"></div>
    </label>
  </div>
  <button id="toggle">Toggle card element</button>
  <button type="submit">Pay $25</button>
  <div class="outcome">
    <div class="error" role="alert"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>

Java脚本

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var currentMounted = '#card-element-1';

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
card.mount(currentMounted);

function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // Use the token to create a charge or a customer
    // https://stripe.com/docs/charges
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

card.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = document.querySelector('form');
  stripe.createToken(card).then(setOutcome);
});

document.getElementById('toggle').addEventListener('click', function(e) {
  e.preventDefault();
  card.unmount(currentMounted);
  if (currentMounted == '#card-element-1') {
    currentMounted = '#card-element-2';
  } else {
    currentMounted = '#card-element-1';
  }
  card.mount(currentMounted);
});

你可以在这里试试我的演示：Stripe : 2 forms on a single page