带有条纹和 woocommerce-api 的 Ionic 3答案

【问题标题】：Ionic 3 with stripe and woocommerce-api带有条纹和 woocommerce-api 的 Ionic 3
【发布时间】：2018-11-26 08:00:43
【问题描述】：

我正在使用 WooCommerce api 开发 Ionic 3 应用程序。目前我正在使用条纹来处理付款...在初始卡检查后能够从条纹获得卡令牌，但我在从卡中创建费用时迷失了。

我的一段代码

component.html

<ion-content>

<div class="form-row">
  <div id="card-element">
    <!-- a Stripe Element will be inserted here. -->
  </div>

  <!-- Used to display Element errors -->
  <div id="card-errors" role="alert"></div>
</div>

<button ion-button block large>Make Payment</button>

组件.ts

export class CardPage {
  stripe = Stripe('pk_test_**********');

  setupStripe() {
    let elements = this.stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

this.card = elements.create('card', { style: style });

this.card.mount('#card-element');

this.card.addEventListener('change', event => {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment-form');

form.addEventListener('submit', event => {
  event.preventDefault();

  this.stripe.createToken(this.card).then(token => {

    if (token.error) {

      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = token.error.message;
    } else {

      console.log(token);
      this.stripeTokenHandler(token);
    }
  });
});
}

stripeTokenHandler(token) {
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form

   form.onsubmit();
  }
 }

使用这个我的目标是能够向用户的卡收取所需的产品总和。 Stripe 说我应该将令牌发送到服务器，但我无法弄清楚如何......请问我该如何实现？

【问题讨论】：

标签： ionic-framework stripe-payments stripe.js

【解决方案1】：

使用 ionic 中的条带 API，您只能获取卡令牌和验证卡。您应该将卡令牌发送到您的后端服务器以向持卡人收费。

take card details -> obtain card token -> send to backend -> charge card

关注此link 进行后端服务器收费。

【讨论】：