1

在创建 Stripe 付款时，我似乎无法使用 Stripe 从表单的其余部分获取值？我搜索了文档，但找不到他们在 html 中寻找的内容来提取表单数据。当我console.log从表单中提取信息时，我会看到null所有变量的值。

这是一个 Vue 应用程序。

在此处输入图像描述

HTML

<template>
  <form method="post" id="payment-form">
    <h4 class="h4Spacing">Billing Information</h4>
    <div class="form-group">
      <b-form-input type="email" class="form-control" id="email" placeholder="Email Address"/>
    </div>
    <div class="form-group">
      <b-form-input  type="text" class="form-control" id="name" name="name" placeholder="Name on Card"/>
    </div>
    <div class="form-group">
      <b-form-input type="text" class="form-control" id="address_line1" name="address_line1" placeholder="Address"/>
    </div>
    <div class="form-group">
      <b-form-input type="text" class="form-control" id="address_city" name="address_city" placeholder="City"/>
    </div>
    <div class="form-group">
      <b-form-input type="text" class="form-control" id="state" name="state" placeholder="State"/>
    </div>
    <div class="form-group">
      <div id="card-element" class="form-control">
        <!-- A Stripe Element will be inserted here. -->
      </div>
      <div v-if="successful">
        <h3 class="title" data-tid="elements_examples.success.title">Payment successful</h3>
        <p class="message"><span data-tid="elements_examples.success.message">Thanks for trying Stripe Elements. No money was charged, but we generated a token: </span><span class="token">tok_189gMN2eZvKYlo2CwTBv9KKh</span></p>
        <a class="reset" href="#">
          <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path fill="#000000" d="M15,7.05492878 C10.5000495,7.55237307 7,11.3674463 7,16 C7,20.9705627 11.0294373,25 16,25 C20.9705627,25 25,20.9705627 25,16 C25,15.3627484 24.4834055,14.8461538 23.8461538,14.8461538 C23.2089022,14.8461538 22.6923077,15.3627484 22.6923077,16 C22.6923077,19.6960595 19.6960595,22.6923077 16,22.6923077 C12.3039405,22.6923077 9.30769231,19.6960595 9.30769231,16 C9.30769231,12.3039405 12.3039405,9.30769231 16,9.30769231 L16,12.0841673 C16,12.1800431 16.0275652,12.2738974 16.0794108,12.354546 C16.2287368,12.5868311 16.5380938,12.6540826 16.7703788,12.5047565 L22.3457501,8.92058924 L22.3457501,8.92058924 C22.4060014,8.88185624 22.4572275,8.83063012 22.4959605,8.7703788 C22.6452866,8.53809377 22.5780351,8.22873685 22.3457501,8.07941076 L22.3457501,8.07941076 L16.7703788,4.49524351 C16.6897301,4.44339794 16.5958758,4.41583275 16.5,4.41583275 C16.2238576,4.41583275 16,4.63969037 16,4.91583275 L16,7 L15,7 L15,7.05492878 Z M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z"></path>
          </svg>
        </a>
        <div class="caption">
          <span data-tid="elements_examples.caption.no_charge" class="no-charge">Your card won't be charged</span>
          <a class="source" href="https://github.com/stripe/elements-examples/#example-1">
            <svg width="16px" height="10px" viewBox="0 0 16 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <path d="M1,8 L12,8 C12.5522847,8 13,8.44771525 13,9 C13,9.55228475 12.5522847,10 12,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 C-6.76353751e-17,8.44771525 0.44771525,8 1,8 L1,8 Z M1,4 L8,4 C8.55228475,4 9,4.44771525 9,5 C9,5.55228475 8.55228475,6 8,6 L1,6 C0.44771525,6 6.76353751e-17,5.55228475 0,5 C-6.76353751e-17,4.44771525 0.44771525,4 1,4 L1,4 Z M1,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,1 C16,1.55228475 15.5522847,2 15,2 L1,2 C0.44771525,2 6.76353751e-17,1.55228475 0,1 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L1,0 Z" fill="#AAB7C4"></path>
            </svg>
            <span data-tid="elements_examples.caption.view_source">View source on GitHub</span>
          </a>
        </div>
      </div>

      </div>



  <!--  <form action="/charge" method="post" id="payment-form">-->
<!--    <div class="form-row">-->
<!--      <label for="name"> Name </label>-->
<!--      <div id="name"></div>-->



<!--      <label for="card-element">-->
<!--        Credit or debit card-->
<!--      </label>-->
<!--      <div id="card-element">-->
<!--        &lt;!&ndash; A Stripe Element will be inserted here. &ndash;&gt;-->
<!--      </div>-->

<!--      &lt;!&ndash; Used to display form errors. &ndash;&gt;-->
<!--      <div id="card-errors" role="alert"></div>-->
<!--    </div>-->

<!--    <b-button class="space" id="payment-request-button">Submit Payment</b-button>-->
<!--  </form>-->


    <b-button class="space" type="submit" >Submit Payment</b-button>
  </form>
</template>

用于提交表单的 Javascript。

let form = document.getElementById('payment-form');
  form.addEventListener('submit', function (event) {
    console.log(event);
    event.preventDefault();

    stripe.createToken(card).then(function (result) {
      if (result.error) {
        // Inform the user if there was an error.
        let errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
        return result.token
      }
    }).then(function (result) {
      console.log(result);
      axios({
        method: "POST",
        url: '/api/checkout',
        headers: {
          Authorization: `Bearer ${authService.idToken}`,
        },
        data: {
          subscription: result.id,
          plan: this.plan
        },
      }).then(function (res) {
        // alert("It went through! How? ")
      }).catch(function (err) {
        console.log(err)
      });
    });
  });
4

1 回答 1

0

听起来您想将其他字段数据传递给 Stripe，以便填充卡帐单地址信息和表单中可用的其他数据。

createToken您在表单提交处理程序中调用的方法可以采用两个参数：card 元素和一个包含 tokenData 的可选参数。https://stripe.com/docs/stripe-js/reference#stripe-create-token

您可以手动引用您的表单元素并tokenData像这样传递它们：

var address1Input = document.getElementById('address_line1');
var addressCityInput = document.getElementById('address_city');
var stateInput = document.getElementById('state');
var nameInput = document.getElementById('name');

var tokenData = {
  address_line1: address1Input.value,
  address_city: addressCityInput.value,
  address_state: stateInput.value,
  name: nameInput.value
};
stripe.createToken(card, tokenData).then(function (result) {
  //...
于 2019-09-10T00:19:28.287 回答