paypalplus-for-vue v1.1.1

PayPal Plus for Vue

A single-file component made for PayPal Plus (aka PayPal unbranded checkout). Works like PayPal Payment Pro but it was tailored for Brazil and Mexico markets.

Important notes:

1. Be sure you have PayPal Plus enabled for your account in order to use it on Live environment. Contact PayPal to check and/or enable it. Sandbox environment is enabled for all PayPal accounts. Follow this Get Started guide from PayPal to create a developer account.
2. It's highly recommeneded to use v1 APIs to use PayPal Plus. v2 APIs aren't supported yet (May work? Yes, but I still do not recommend them :sweat_smile:).

Installation

    npm install paypalplus-for-vue

Usage

Import the component to the page you will instance the PayPal Plus frame:

    import PaypalPlus from 'paypalplus-for-vue'

Then set it as component in parent .vue file:

    components: {
        PaypalPlus
    }

To load the frame properly you will need to instance the required props:

You'll need also to listen these two events on PayPal Plus component.

Inside template you will call the paypal-plus tag:

<!-- sandbox example below -->
<template>
    <paypal-plus
      ref="ppplus"
      mode="sandbox"
      approvalUrl="https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-65N73270YN200541T"
      firstName="Renan"
      lastName="Araujo"
      country="BR"
      taxId="27374114087"
      email="renan9379@sandboxpaypal.com"
      @checkout="onContinue"
      @error="onError" 
    />
</template>

If all this were set good, this frame may show:

Listening payment button

Unfortunately triggerbus did not fit properly to listen button as a Vue SFC (creating through vue-sfc-rollup). So the best way now to make it work is... Include a ref prop (i.e. ppplus as above) inside paypal-plus component and then register a method to execute this referenced component function named pppContinue.

// Checkout.vue

methods: {
    handleCheckout() {
        this.$refs.ppplus.pppContinue();
    }
}

// Checkout.vue

<custom-button on:click="handleCheckout">Checkout</custom-button>

Soon a better way to threat it will be found, I promise. :crossed_fingers:

Treating payment execution or error

As previously informed you need to register two listeners on component (@checkout and @error). If everything went good and the payment is approved you need to call the PayPal API v1/payments/payment/{transaction-id}/execute to actually execute this payment.

On first example I did declared the @checkout function to be triggered is named onContinue. So I did register a method with this name that receives the data from checkout event meaning that the payment was approved. Based on PayPal API's I do need to info the payerId to the API (or my backend that does that) to execute this payment.

// Checkout.vue

methods: {
    onContinue(data) {
        let payerId = data.payer.payer_info.payer_id
        axios.post('/my/backend/paypal/execute', 
            { payer_id: payerId } 
        }).then((res) => {
            /* Execute something when Promise is resolved */
        })
    }
}

It's also needed to create a method to handle errors that may happen when things did not went good with tried payment. On my example I've registered a method named onError and then -- as the same that my onContinue did -- it needs to receive a data to treat the error according on what frame informed as error.

PayPal provides an error list with the most common errors that you need to handle. Some of these errors ask you to generate a new ecToken (or approvalUrl) so on these errors you need to call v1/payments/payment again to generate a new link and load PayPal Plus component again.

I do highly recommend you to re-render PayPal Plus component when any error is triggered. One way to do that is attaching a componentKey as component prop -- as explained on this article

// Checkout.vue

data() {
    return {
        componentKey: 0
    }
},

// Checkout.vue

methods: {
    onError(data) {
        let error = data.error;
        switch(error) {
            case 'TRY_ANOTHER_CARD':
                alert('Please try another card in order to execute your payment.')
                this.componentKey += 1
        }
    }
}

That's it. :tada:

Please let me know if any bug or issue may happed with this component.