search

cocoastorm / vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout
MIT License
153 stars 67 forks source link

Braintree SDK integration? #5

Closed portwatcher closed 6 years ago

portwatcher commented 6 years ago

Any plan on that?

I think you just need to allow developers to pass the braintree parameter in.

https://developer.paypal.com/demo/checkout/#/pattern/braintree

cocoastorm commented 6 years ago

Hey @portwatcher,

cc @robcalvertms

Sorry for taking so long. I added it as a prop braintree. It's included in a beta I just published.

Just run:

npm install vue-paypal-checkout@beta

Tell me if it works! I haven't had a chance to fully test it.

Sample HTML:

<body>
  <script src="https://unpkg.com/vue@^2.5/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-paypal-checkout@beta/dist/vue-paypal-checkout.min.js"></script>
  <script src="https://js.braintreegateway.com/web/3.11.0/js/client.min.js"></script>
  <script src="https://js.braintreegateway.com/web/3.11.0/js/paypal-checkout.min.js"></script>

  <div id="app">
    <div class="content">
      <p>Pay with USD $10.00</p>
      <paypal-checkout
        amount="10.00"
        currency="USD"
        :client="paypal"
        :dev="true"
        :invoice-number="'201705051001'"
        :braintree="paypal.braintree">
      </paypal-checkout>
    </div>
  </div>

  <script>
    // eslint-disable-next-line
    new Vue({
      el: '#app',
      data() {
        return {
          paypal: {
            sandbox: 'Ad1voWYq3VL8J4jy6zWARKwz4tjbuDl_TFBa3WQqy_DwAFWd7hkU4i99jijGqaoqU3E-ODqXDayVnOdl',
            production: '',
            braintree: window.braintree,
          },
        };
      },
    });
  </script>
</body>
</html>