paypal integration

home.html

<ion-header>
  <ion-navbar>
    <ion-title>High Wycombe Mosque</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="page-home">
  <p class="title">{{ islamicDate }}</p>
  <ion-list class="home-list" *ngIf="prayerTimes !== null" no-margin>
    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-sunrise"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Fajr
        </button>
        <button color="primary" ion-button icon-end small round>
          <div>
            <span float-right> {{ prayerTimes.Fajr }} </span>
          </div>
        </button>
      </div>
    </ion-item>

    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-fajr"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Sunrise
        </button>
        <button color="primary" ion-button small round>
          <div>
            <span float-right> {{ prayerTimes.Sunrise }} </span>
          </div>
        </button>
      </div>
    </ion-item>

    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-dhuhr"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Dhuhr
        </button>
        <button color="primary" ion-button small round>
          <div>
            <span float-right> {{ prayerTimes.Dhuhr }} </span>
          </div>
        </button>
      </div>
    </ion-item>

    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-asr"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Asr
        </button>
        <button color="primary" ion-button small round>
          <div>
            <span float-right> {{ prayerTimes.Asr }} </span>
          </div>
        </button>
      </div>
    </ion-item>

    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-maghrib"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Maghrib
        </button>
        <button color="primary" ion-button small round>
          <div>
            <span float-right> {{ prayerTimes.Maghrib }} </span>
          </div>
        </button>
      </div>
    </ion-item>

    <ion-item no-lines>
      <div class="prayerIcon"><ion-icon name="icon-isha"></ion-icon></div>
      <div class="two-btns">
        <button color="secondary" ion-button small round>
          Isha
        </button>
        <button color="primary" ion-button small round>
          <div>
            <span float-right> {{ prayerTimes.Isha }} </span>
          </div>
        </button>
      </div>
    </ion-item>
  </ion-list>

  <!-- DAILY JAMAAT TIMES  -->
  <div class="sliders">
    <ion-slides pager>
      <ion-slide *ngFor="let site of sitePrayers">
        <ion-navbar>
          <div>{{ site.name }} - Jamaat Times</div>
        </ion-navbar>
        <!-- <div class="txt"> -->
        <ion-list no-lines>
          <ion-item>
            <div class="two-btns">
              <div
                color="secondary"
                class="comments-btn"
                ion-button
                small
                round
              >
                <ion-icon name=""></ion-icon>
                Fajr
              </div>
              <div
                color="primary"
                class="comments-btn"
                ion-button
                outline
                small
                round
              >
                <ion-icon name=""></ion-icon>
                <span class="time" item-end> {{ site.Fajr }} </span>
              </div>
            </div>
          </ion-item>

          <ion-item>
            <div class="two-btns">
              <div
                color="secondary"
                class="comments-btn"
                ion-button
                small
                round
              >
                <ion-icon name=""></ion-icon>
                Dhuhr
              </div>
              <div
                color="primary"
                class="comments-btn"
                ion-button
                outline
                small
                round
              >
                <ion-icon name=""></ion-icon>
                <span class="time" item-end> {{ site.Dhuhr }} </span>
              </div>
            </div>
          </ion-item>

          <ion-item>
            <div class="two-btns">
              <div
                color="secondary"
                class="comments-btn"
                ion-button
                small
                round
              >
                <ion-icon name=""></ion-icon>
                Asr
              </div>
              <div
                color="primary"
                class="comments-btn"
                ion-button
                outline
                small
                round
              >
                <ion-icon name=""></ion-icon>
                <span class="time" item-end> {{ site.Asr }} </span>
              </div>
            </div>
          </ion-item>

          <ion-item>
            <div class="two-btns">
              <div
                color="secondary"
                class="comments-btn"
                ion-button
                small
                round
              >
                <ion-icon name=""></ion-icon>
                Maghrib
              </div>
              <div
                color="primary"
                class="comments-btn"
                ion-button
                outline
                small
                round
              >
                <ion-icon name=""></ion-icon>
                <span class="time" item-end> {{ site.Maghrib }} </span>
              </div>
            </div>
          </ion-item>

          <ion-item>
            <div class="two-btns">
              <div
                color="secondary"
                class="comments-btn"
                ion-button
                small
                round
              >
                <ion-icon name=""></ion-icon>
                Isha
              </div>
              <div
                color="primary"
                class="comments-btn"
                ion-button
                outline
                small
                round
              >
                <ion-icon name=""></ion-icon>
                <span class="time" item-end> {{ site.Isha }} </span>
              </div>
            </div>
          </ion-item>

          <ion-item>
            <div class="two-btns">
              <!-- <div color="secondary" class="comments-btn" ion-button small round>
                          <ion-icon name=""></ion-icon>
                            Isha
                      </div>
                      <div color="primary" class="comments-btn" ion-button outline small round>
                          <ion-icon name=""></ion-icon>
                          <span class="time" item-end> {{ site.Prayer5 }} </span>
                      </div> -->
            </div>
          </ion-item>
        </ion-list>
        <!-- </div> -->
      </ion-slide>
    </ion-slides>
  </div>

  <div class="donate">
    <ion-list>
      <ion-item>
        <ion-label>Donate via PayPal</ion-label>
        <ion-select
          [(ngModel)]="donate_amount"
          placeholder="Select Amount"
          #donate
          interface="popover"
          (ionChange)="checkDonate(donate.value)"
        >
          <ion-option value="10">£10</ion-option>
          <ion-option value="25">£25</ion-option>
          <ion-option value="50">£50</ion-option>
          <ion-option value="100">£100</ion-option>
          <ion-option value="Other">Other</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="show_custom">
        <ion-input
          type="tel"
          placeholder="Other"
          [(ngModel)]="donate_amount"
        ></ion-input>
      </ion-item>
      <button class="button" (click)="payWithPayPal()">Donate</button>
      <!-- <div
        #paypalbuttoncontainer
        id="paypal-button-container"
        [hidden]="!donate_amount"
      ></div> -->
    </ion-list>
  </div>
</ion-content>

home.ts

import { Component, ViewChild, ElementRef } from "@angular/core";
import {
  IonicPage,
  NavController,
  ToastController,
  Platform
} from "ionic-angular";
import { AngularFireDatabase } from "angularfire2/database";
import { HttpClient } from "@angular/common/http";
import {
  PayPal,
  PayPalPayment,
  PayPalConfiguration
} from "@ionic-native/paypal";

declare var paypal: any;
@IonicPage()
@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  @ViewChild("paypalbuttoncontainer") paypalbuttoncontainer: ElementRef;
  today = new Date();
  islamicDate: any;
  prayerTimes = null;
  sitePrayers = [{}];
  donate_amount: any;
  custom_amount: any;
  show_custom: boolean = false;
  paypal_initialized = false;
  androidApiKey = "20a3b9b9393e71c85b0d361810db1935";
  iosApiKey = "d37c638363aef29183382cd28dce739a";

  constructor(
    public navCtrl: NavController,
    private afs: AngularFireDatabase,
    private toastCtrl: ToastController,
    public http: HttpClient,
    public platform: Platform,
    private payPal: PayPal
  ) {
    const month = new Date().toLocaleString("en-us", { month: "long" }); // February
    const monthDay = new Date().getDate(); //e.g. 27

    this.afs.list("mosque").$ref.once("value", data => {
      const thisMonth = data.val().filter(data => data.monthName === month);
      const thisDay = thisMonth[0].days.filter(month => {
        return Number(month.Date) === monthDay;
      });
      this.prayerTimes = thisDay[0];
    });

    this.afs.list("site1/congregationalPrayers").$ref.once("value", data => {
      const thisMonth = data.val().filter(data => data.monthName === month);
      const thisDay = thisMonth[0].days.filter(month => {
        return Number(month.Date) === monthDay;
      });
      thisDay[0].name = "Jubilee Road";
      this.sitePrayers[0] = thisDay[0];
    });

    this.afs.list("site2/congregationalPrayers").$ref.once("value", data => {
      const thisMonth = data.val().filter(data => data.monthName === month);
      const thisDay = thisMonth[0].days.filter(month => {
        return Number(month.Date) === monthDay;
      });
      thisDay[0].name = "Castlefield";
      this.sitePrayers[1] = thisDay[0];
    });

    this.afs.list("site3/congregationalPrayers").$ref.once("value", data => {
      const thisMonth = data.val().filter(data => data.monthName === month);
      const thisDay = thisMonth[0].days.filter(month => {
        return Number(month.Date) === monthDay;
      });
      thisDay[0].name = "Townfield House";
      this.sitePrayers[2] = thisDay[0];
    });

    this.afs.list("site4/congregationalPrayers").$ref.once("value", data => {
      const thisMonth = data.val().filter(data => data.monthName === month);
      const thisDay = thisMonth[0].days.filter(month => {
        return Number(month.Date) === monthDay;
      });
      thisDay[0].name = "Micklefield";
      this.sitePrayers[3] = thisDay[0];
    });

    // this.afs.list("site5/congregationalPrayers").$ref.once("value", data => {
    //   const thisMonth = data.val().filter(data => data.monthName === month);
    //   const thisDay = thisMonth[0].days.filter(month => {
    //     return Number(month.Date) === monthDay;
    //   });
    //   thisDay[0].name = "Site 5";
    //   this.sitePrayers[4] = thisDay[0];
    // });
  }

  ionViewWillLoad() {
    this.http
      .get(
        `https://cors-anywhere.herokuapp.com/https://www.moonsighting.org.uk/scripts/hijri.php?return=json&country=GB&apikey=${
          this.platform.is("ios") ? this.iosApiKey : this.androidApiKey
        }`
      )
      .subscribe(response => {
        this.islamicDate = `${response["islamic"][1]} ${response["islamic"][2]} ${response["islamic"][3]}`;
      });
    this.setupPayPay();
  }

  checkDonate(amount) {
    amount === "Other"
      ? (this.show_custom = true)
      : (this.donate_amount = amount);
  }

  setupPayPay() {
    if (!this.paypal_initialized) {
      this.initPayPal();
    }
  }

  initPayPal() {
    this.paypal_initialized = true;
    let paypalbuttoncontainer = this.paypalbuttoncontainer
      .nativeElement as HTMLDivElement;
    let _this = this;
    paypal
      .Buttons({
        createOrder: function(data, actions) {
          return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [
              {
                amount: {
                  value: _this.donate_amount
                }
              }
            ]
          });
        },
        onApprove: function(data, actions) {
          const toast = _this.toastCtrl.create({
            message: `Thank you for the donation of £${_this.donate_amount}`,
            duration: 5000,
            position: "bottom"
          });
          toast.present();
        }
      })
      .render(paypalbuttoncontainer);
  }

  payWithPayPal() {
    this.payPal
      .init({
        PayPalEnvironmentProduction:
          "ASwfVM389ua2Mrc10-XJvT-zCay9hbD1KdfbGaCtTyEhOQuSQ88rBgJGeRYFVSVbOPCLfMZaUsDKMrpk",
        PayPalEnvironmentSandbox:
          "ASwfVM389ua2Mrc10-XJvT-zCay9hbD1KdfbGaCtTyEhOQuSQ88rBgJGeRYFVSVbOPCLfMZaUsDKMrpk"
      })
      .then(
        () => {
          // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction
          this.payPal
            .prepareToRender(
              "PayPalEnvironmentProduction",
              new PayPalConfiguration({
                // Only needed if you get an "Internal Service Error" after PayPal login!
                //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
              })
            )
            .then(
              () => {
                let payment = new PayPalPayment(
                  this.donate_amount,
                  "GBP",
                  "Description",
                  "sale"
                );
                this.payPal.renderSinglePaymentUI(payment).then(
                  () => {
                    // Successfully paid
                  },
                  () => {
                    // Error or render dialog closed without being successful
                  }
                );
              },
              () => {
                // Error in configuration
              }
            );
        },
        () => {
          // Error in initialization, maybe PayPal isn't supported or something else
        }
      );
  }

  // fajrJamaatTimes(prayer, id) {
  //   this.navCtrl.push("FajrJamaatTimesPage", {prayer, id});
  //       // console.log(this.prayerTimes);
  //   }
}