Question

我正面临使用Polymer 2.0在我的PWA中集成STRIPE付款请求按钮的挑战。我无法将条带付款按钮添加到元素的模板标记内的div。

我创建了一个条带付款元素。它基本上是一个简单的聚合物元素，在卡片内部有模板dom-bind和基本div标签。

我想要做的是将条带付款请求按钮添加到div id = hostcard。目前，条带支付请求按钮以100％的全宽显示在页面顶部。

在下面的元素代码中的注释中插入了我尝试约会的代码。

有两个问题： 1.如何将按钮添加到div主机卡中，以便它显示在卡内？ 2.有没有更好的方法来显示聚合物元素的付款请求按钮？

条纹payment.html

<script src="https://js.stripe.com/v3/"></script>
<dom-module id="stripe-payment">
<template is="dom-bind">
<style include="shared-styles">
</style>
   <template is="dom-if" if="[[signedin]]">
     <div id="hostcard" class="card">
       <div class="circle">3</div>
       <h1>Stripe Payment</h1>
     </div>
  </template>
</template>
<script>
  class StripePayment extends Polymer.Element {
  static get is() { return 'stripe-payment'; }

  static get properties() {
    return {
      user: { type: Object, notify: true, readOnly: false, observer: '_userChanged' },          
    };
  }

  ready() {
    super.ready();
  }
}
//STRIPE CODE
const DIVx = document.createElement('div');
const buttonSlot = DIVx.cloneNode();
buttonSlot.setAttribute('slot', 'button');
// Create stripe card wrapper
let button = DIVx.cloneNode();
button.id = 'payment-request-button';
// Add wrapper to slot
buttonSlot.appendChild(button);

//None worked -- either give null or undefined or function not defined
//this.$.hostcard.appendChild(buttonSlot);
//this.$$('#hostcard').appendChild(buttonSlot);
//var myElement = document.getElementById('stripe-payment'); - not working
//myElement.$.hostcard.appendChild(buttonSlot);

var element = this.shadowRoot;
console.log('Element is ->'+element);
document.body.appendChild(buttonSlot);

// Create a Stripe client
var stripe = Stripe('pk_test_**************');
// Create an instance of Elements
var elements = stripe.elements();
// Create a payment charges
var paymentRequest = stripe.paymentRequest({
        country: 'AU',
        currency: 'aud',
        total: {
          label: 'BizRec - Subscription',
          amount: 100, //in cents
        },
      });

// Create an instance of Payment Request Button
var prButton = elements.create('paymentRequestButton', {
    paymentRequest: paymentRequest,
    style: {
      paymentRequestButton: {
        type: 'default' , // | 'donate' | 'buy' | default: 'default'
        theme: 'dark', // | 'light' | 'light-outline' | default: 'dark'
        height: '40px', // default: '40px', the width is always '100%'
      },
    },
  });

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
    // Add an instance of the card Element into the `card-element` <div>
    //cardElement.mount('#card-element');
  }
});

paymentRequest.on('token', function(ev) {
  // Send the token to your server to charge it!
  fetch('/charges', {
    method: 'POST',
    body: JSON.stringify({token: ev.token.id}),
  })
  .then(function(response) {
    if (response.ok) {
      // Report to the browser that the payment was successful, prompting
      // it to close the browser payment interface.
      ev.complete('success');
    } else {
      // Report to the browser that the payment failed, prompting it to
      // re-show the payment interface, or show an error message and close
      // the payment interface.
      ev.complete('fail');
    }
  });
});

  window.customElements.define(StripePayment.is, StripePayment);
  </script>
</dom-module>

Answer 1

目前，Elements并不像你提到的那样支持Shadow DOM。如果您使用Polymer，那么您可能需要在您的最终做一些自定义工作。您可以通过第三方开发人员查看此项目，该项目应该有助于解除阻止：https://github.com/bennypowers/stripe-elements

Polymer 2.0条带支付请求按钮集成

1 个答案: