Ionic 3 integrate the Paypal express checkout braintree SDK


#1

I have search the web for this, but I have no luck. Anyone know how to integrate or have some example code for reference? Thanks a lot.


#2

Quickly whipping together some examples here - hopefully does not lead you astray.

In index.html, add:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>

In cart.ts ( or whatever your cart page will be named ):

declare var paypal: any;

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html'
})
export class CartPage {

  @ViewChild('paypalbuttoncontainer') paypalbuttoncontainer: ElementRef;

  paypal_initialized;
  cart_id;
  items_paypal = []; // I duplicate and finesse the cart items for PayPal submission - but not required
...

}

And call this function when you have your cart items ready and are prepared to reveal the PayPal button:

initPayPal() {
    console.log("-------------- initPayPal ------------");

    this.paypal_initialized = true;
    let paypalbuttoncontainer = this.paypalbuttoncontainer.nativeElement as HTMLDivElement;
    let _this = this;
    paypal.Button.render({
      env: 'sandbox', // sandbox | production
      //locale: 'en_US',

      //ref: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/
      style: {
        size: 'responsive',
        color: 'gold',
        shape: 'pill',
        label: 'checkout', //                    label: checkout, buynow, credit, pay, paypal
        tagline: false

      },

      // PayPal Client IDs - replace with your own
      // Create a PayPal app: https://developer.paypal.com/developer/applications/create
      client: {


        production: 'YOUR_PRODUCTION_KEY',
        sandbox: 'YOUR_SANDBOX_KEY'

      },

      // Show the buyer a 'Pay Now' button in the checkout flow
      commit: true,


      // payment() is called when the button is clicked
      payment: function (data, actions) {

        console.log("PayPal button clicked");

        // Make a call to the REST api to create the payment
        return actions.payment.create({
          //weight_unit: "kgs",
          //enableDeliveryAddress: true,
          payment: {
            transactions: [
              {
                amount: {
                  total: _this.total_fixed,
                  currency: _this.country.currency,
                  details: {
                    subtotal: _this.subtotal_fixed,
                    tax: _this.tax_total_fixed,
                    //delivery: _this.delivery,
                    handling_fee: _this.surcharge,
                  }
                },
                description: 'DESCRIBE YOUR CART',
                custom: 'Hello Shopper',
                invoice_number: this.cart_id,
                payment_options: {
                  allowed_payment_method: 'INSTANT_FUNDING_SOURCE'
                },
                soft_descriptor: 'ECHI5786786',
                item_list: {
                  items: this.items_paypal,
                }
              }
            ]

          },

          experience: {
            input_fields: {
              //no_delivery: 1
            }
          }
        });

      },

      onCancel: function (data, actions) {
        //return actions.redirect();
      },


      // onAuthorize() is called when the buyer approves the payment
      onAuthorize: function (data, actions, error) {
        if (error) {
          console.log("---------WE HAVE AN ERROR-------------------")
          console.log("ERROR: " + error)
        }
        if (error === 'INSTRUMENT_DECLINED') {
          actions.restart();
        }

        actions.payment.get().then(function (paymentDetails) {
          /*  SOME LOGS TO SHOW YOU WHAT YOU WILL BE RECEIVING
          console.log("paymentDetails: " + paymentDetails);
          for (var xx in paymentDetails) {
            console.log(xx + "  :  " + paymentDetails[xx])
          }
          for (var xx in paymentDetails.payer) {
            console.log("P-: " + xx + "  :  " + paymentDetails.payer[xx])
          }
          for (var xx in paymentDetails.transactions) {
            console.log("T-: " + xx + "  :  " + paymentDetails.transactions[xx])
          }
          */
          _this.paymentDetails = paymentDetails;

        });
        // Make a call to the REST api to execute the payment
        return actions.payment.execute().then(function () {
          //window.alert('Payment Complete!');
         
     // NOW MAKE ANY CALLS TO YOUR DB AND SAVE WHAT YOU WANT

          let confirm = this.alertCtrl.create({
            title: 'Payment Complete!',
            message: "Your payment has completed successfully.<br>You will find it in your History.",
            buttons: [
              {
                text: 'OK',
                handler: () => {

                }
              }
            ]
          });
          confirm.present();

        });
      }

    }, paypalbuttoncontainer);


  }

In your Cart/html:

<div #paypalbuttoncontainer id="paypal-button-container"></div>

And here are some additional references:
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-the-checkout-flow/#pass-experience-profile-options

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/test-express-checkout/

https://developer.paypal.com/docs/classic/lifecycle/sb_create-accounts/

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-the-checkout-flow/


#3

@shepard Thank you very much for your help! May I ask you it can use in the ionic3 ios/android app? Will it render the paypal page or need to do something? Thanks again.


#4

Not sure. I use it in the browser/PWA. I’d say the odds are good though.


#5

@Nulra,
were you able to use the example of @shepard in Ionic 3 / Android?

I have tried and it works from the browser but in Android all the calls made to the PayPal site return the error “404 not found”

Did it work for you ?