带有条纹和 woocommerce 的 Ionic 3-api

Question

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

我的一段代码

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>

component.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 说我应该将令牌发送到服务器，但我无法弄清楚如何...请问我该如何实现？

Answer 1

with stripe api in ionic 你只能得到卡令牌和验证卡。您应该将卡令牌发送到您的后端服务器以向持卡人收费。

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

按照此 link 进行后端服务器收费。

带有条纹和 woocommerce 的 Ionic 3-api

Ionic 3 with stripe and woocommerce-api

ionic-framework

stripe-payments

stripe.js