Polymer 2.0 Stripe Payment Request Button Integration - stripe-payments

Question

I am facing a challenge in integrating STRIPE Payment Request Button in my PWA using Polymer 2.0. I am not able to add the stripe payment button to the div inside template tag of the element.
I have a stripe-payment element created. It's basically a simple polymer element with template dom-bind and basic div tag inside a card.
What I wish to do is add the stripe payment request button to the div id = hostcard. At present the stripe payment request button is displayed on the top of the page in full width 100%.
Inserted code in comments in the element code below on what I tried to date.
Got 2 questions:
1. how can I add the button to the div hostcard so that it will be displayed inside the card?
2. is there a better way to show the payment request button from polymer element?
stripe-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

At the moment, Elements does not support the Shadow DOM as you mentioned. If you use Polymer then you likely need to do some custom work on your end. You can see this project by a third-party developer which should help unblock things: https://github.com/bennypowers/stripe-elements