代码之家  ›  专栏  ›  技术社区  ›  CE0

带条纹和Woomerce API的Ionic 3

  •  0
  • CE0  · 技术社区  · 8 年前

    我正在开发一个带有Woomerce API的Ionic 3应用程序。目前,我正在使用Stripe来处理支付…能够从Stripe获得一个卡令牌后,初步卡检查,但我在创建一个收费卡丢失。

    我的一段代码

    组件.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>
    

    组件

    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说我应该把令牌发送到服务器,但我不知道如何…请告诉我如何才能做到这一点?

    1 回复  |  直到 8 年前
        1
  •  0
  •   NRaghavendra    8 年前

    有了Ionic中的StripeAPI,您只能获得卡令牌和验证卡。您应该将卡令牌发送到后端服务器以向持卡人收费。

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

    遵循这一点 link 为后端服务器充电。