I've implemented group of buttons provided by Paypal API. First of all - the basic "Paypal button" - doesn't seem to work properly. It opens a new window but it takes so much time to load and still at the end it shows me most of the time "Something went wrong" info with a button "Try again" - but trying again gives nothing (or sometimes it's: "Things don't appear to be working at the moment. Please try again later"). Along with all that in the console it shows errors regarding the "Content Security Policy and script inline („script-src)" - but these two are showing when I'm trying to actually access payment with debit or credits card in the Paypal window. Most of the time when I try to access it for the first time it just loads for a long time, shows some timeout info in console and gives me "Something went wrong".
The second weird thing happening is payment option with debit/credit card. I've tried to create two seperate apps in the Paypal developer account - got two different client ids for the API - and first payments went through without a problem but every single next one was usually returning "Order could not be captured" error in the console from typescript. Sometimes it ends up with information that they couldn't go through with the payment without any specifics.
I'm not sure what I am doing wrong - it's just basic usage of the API.
This line in the index.html file:
<script src="https://www.paypal.com/sdk/js?client-id=my_client_api_here_from_paypal_dev_account"></script>
Here's the payment.ts file with included paypal API usage:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';declare var paypal; @Component({ selector: 'app-payment', templateUrl: './payment.component.html', styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit { @ViewChild('paypal', { static: true }) paypalElement: ElementRef; product = { price: 7.7, description: 'ticket payment' }; paidFor = false; constructor() { } ngOnInit() { paypal .Buttons({ createOrder: (data, actions) => { return actions.order.create({ purchase_units: [ { description: this.product.description, amount: { currency_code: 'USD', value: this.product.price } } ] }); }, onApprove: async (data, actions) => { const order = await actions.order.capture(); this.paidFor = true; console.log(order); }, onError: err => { console.log(err); <- here appears the "Order could not be captured" } }) .render(this.paypalElement.nativeElement); }
