Skip to content

Instantly share code, notes, and snippets.

@lorisleiva
Created June 4, 2018 22:02
Show Gist options
  • Save lorisleiva/69e537202d35d4ccd1b4a5cb8ddecf1c to your computer and use it in GitHub Desktop.
Save lorisleiva/69e537202d35d4ccd1b4a5cb8ddecf1c to your computer and use it in GitHub Desktop.
Renderless VueJS component for Payment Requests using Stripe Element
export default {
props: {
stripe: {
type: String,
required: true,
},
options: {
type: Object,
required: true,
}
},
data () {
const stripeInstance = Stripe(this.stripe)
return {
loading: true,
canMakePayment: false,
elements: stripeInstance.elements({ locale: this.$root.locale }),
paymentRequest: stripeInstance.paymentRequest(this.options),
}
},
methods: {
init (canMakePayment) {
this.loading = false
this.canMakePayment = canMakePayment
this.$nextTick(this.createPaymentRequestButton)
},
createPaymentRequestButton () {
if (!this.canMakePayment || !this.$refs.element) return
this.elements
.create('paymentRequestButton', { paymentRequest: this.paymentRequest })
.mount(this.$refs.element)
}
},
mounted () {
// Check the availability of the Payment Request API first.
this.paymentRequest.canMakePayment().then(this.init)
// Notify the parent component when we receive a token.
this.paymentRequest.on('token', event => this.$emit('token', event))
},
render (createElement) {
// Render a loading slot if we are waiting for canMakePayment.
if (this.loading) {
return this.$slots.loading && this.$slots.loading[0]
}
// Render a warning slot if payment request isn't available.
if (! this.canMakePayment) {
return this.$slots.unavailable && this.$slots.unavailable[0]
}
// Render scoped slot if provided.
if (this.$scopedSlots.default) {
return this.$scopedSlots.default({
listeners: { click: event => this.paymentRequest.show() },
canMakePayment: this.canMakePayment,
})
}
// Otherwise render default Stripe Element button.
return createElement('div', { ref: 'element' })
}
}
@pvenableh
Copy link

Hey @lorisleiva...have you been able to get this to render a Payment Request button using Nuxt.js? Any working example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment