कोणीय 2 टाइपस्क्रिप्ट प्रोजेक्ट में पेपैल एक्सप्रेस चेकआउट को एकीकृत करने के लिए कैसे करें

Question

पेपैल easy way to integrate its express checkout solution प्रदान करता है लेकिन टाइपस्क्रिप्ट में लिखे गए एक कोणीय 2 प्रोजेक्ट में इस समाधान का उपयोग करने का सबसे अच्छा समाधान क्या है?

Answer 1

मैंने हाल ही में इसी तरह के प्रश्न (how to write the below code in angular 2 component using typescript) का उत्तर दिया है और पेपैल बटन को encapsulating सरल घटक लिखा है।

मैंने इनपुट लागत संपत्ति रखने के लिए अपना उदाहरण बढ़ाया है, ताकि आप बटन के घटक को लागत पारित कर सकें। यदि आप आवश्यक हो तो आप इसे आसानी से बढ़ा सकते हैं और अधिक डेटा पास कर सकते हैं।

जैसा कि अलुआन हद्दाद ने टिप्पणी में कहा था, आप सेवा में पेपैल वैश्विक को लपेट सकते हैं।

export class PaypalService { 
    constructor() { } 

    // You can bind do paypal's button with type definitions in the following way: 
    public Button: { 
     render: ({ payment, onAuthorize }: { 
      payment?: (data: any, actions: any) => void, 
      onAuthorize?: (data: any, actions: any) => void 
     }, divId: string) => void 
    } = (window as any).paypal.Button; 
} 

कार्य उदाहरण है में: https://plnkr.co/edit/9AlbWnZDzek9kDdigdED

मैं पेपल के बटन की अंदरूनी कामकाज के बारे में यकीन नहीं है, लेकिन यह आप देना चाहिए मैं कुछ प्रकार परिभाषा के साथ बटन संपत्ति लपेटकर एक सरल सेवा लिखा है एक सिर शुरू, उम्मीद है कि यह मदद करता है।

Answer 2

आप इस तरह कोणीय 4 के साथ paypal चेकआउट लागू कर सकते हैं:

import { Component, OnInit } from '@angular/core'; 

declare let paypal: any; 

@Component({ 
    selector: 'app-page-offers', 
    templateUrl: './page-offers.component.html', 
    styleUrls: ['./page-offers.component.sass'] 
}) 

export class PageOffersComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
     $.getScript('https://www.paypalobjects.com/api/checkout.js', function() { 
      paypal.Button.render({ 
      [...] 
      }) 
    [...] 

का आनंद लें :)

Answer 3

मैं इस तरह एक समाधान का उपयोग किया है:

बाहरी स्क्रिप्ट

लोड करने के लिए विधि

private loadExternalScript(scriptUrl: string) { 
    return new Promise((resolve, reject) => { 
     const scriptElement = document.createElement('script') 
     scriptElement.src = scriptUrl 
     scriptElement.onload = resolve 
     document.body.appendChild(scriptElement) 
    }) 

घटक कोड

ngAfterViewInit(): void { 
    this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js").then(() => { 
     paypal.Button.render({ 
     env: 'sandbox', 
     client: { 
      production: '', 
      sandbox: '' 
     }, 
     commit: true, 
     payment: function (data, actions) { 
      return actions.payment.create({ 
      payment: { 
       transactions: [ 
       { 
        amount: { total: '1.00', currency: 'USD' } 
       } 
       ] 
      } 
      }) 
     }, 
     onAuthorize: function(data, actions) { 
      return actions.payment.execute().then(function(payment) { 
      // TODO 
      }) 
     } 
     }, '#paypal-button'); 
    }); 
    } 

क्रेडिट

आंद्रेई ओड्री यहाँ जवाब: script tag in angular2 template/hook when template dom is loaded