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>
