Skip to content

Instantly share code, notes, and snippets.

@cliftonscott

cliftonscott/PaymentRequest.js

Forked from lorisleiva/PaymentRequest.js
Created May 12, 2021 04:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cliftonscott/d60f23f17c2a0bd056afd7aa60b5eb73 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cliftonscott/d60f23f17c2a0bd056afd7aa60b5eb73 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @lorisleiva lorisleiva created this gist Jun 4, 2018.
    65 changes: 65 additions & 0 deletions PaymentRequest.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    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' })
    }
    }