ashinzekene / angular4-paystack Goto Github PK

<button
angular4-paystack
[key]="'pk_test_5c4f5d145c5e613e2be0756a2d7ff1a9faf51527'"
[email]="currentUser?.email"
[amount]="totalPrice * 100"
[ref]="reference"
(close)="paymentCancelled()"
(callback)="paymentDone($event)"
id="paystackbtn"
[hidden]="true"
>

ngOnInit() {
this.reference = Math.floor(Math.random() * 1000000000 + 1);
}

Using a success test card and making an initial payment, i get the passed reference from the event like $event.reference. Then i navigate to another componenet this.router.navigate(['/']);

Here is the issue,
When i navigate to my checkout page, ngOnint runs again which updates the reference, but on payment done $event.reference shows the old reference even though its now changed to something else. Yet payment is successful, but it doesnt show the duplicate payment on paystack transaction dashboard.

See if the $event reference is being updated

The angular4paystack callback function is not working.pls help me check it out

the iframe from the angular 4 paystack lib..isn't loading in wkwebview

angular4-paystack.js:118 Uncaught TypeError: Object(...) is not a function
at angular4-paystack.js:118
at Object. (angular4-paystack.js:120)
at webpack_require (bootstrap 1ce7d8c00a61736792f0:54)
at Object.603 (main.js:11373)
at webpack_require (bootstrap 1ce7d8c00a61736792f0:54)
at Object.598 (main.ts:1)
at webpack_require (bootstrap 1ce7d8c00a61736792f0:54)
at webpackJsonpCallback (bootstrap 1ce7d8c00a61736792f0:25)
at main.js:1

Not bale to run application
Version of

Please let me know if any solution. Thanks

In the callback function after the successful completion. I am not getting access_code.
I need access code recurring payments. I want to store this in my database.
Can anyone help me out with this?

Please help update this plugin as it's affecting some of our apps that is using capacitor 5+

Import paystack's script dynamically and so user does not need to do that manually everytime

Am on development mode, So i disable my network to simulate network error, Paystack inline pop up opens with network error as expected. When i reload the paystack inline pop, the user lose the ability to close the pop up as there are no cancel button and clicking on the backdrop also does nohing

Is there a way to change the styling o f the inline embed? I am assuming it is not yet possible, if it is, can you please guide me. I want to keep a rather dark theme

I keep getting this error in the console due to some required dependency in your package

Package "angular4-paystack" has an incompatible peer dependency to "@angular/common" (requires "^8.0.3" (extended), would install "12.2.2").
Package "angular4-paystack" has an incompatible peer dependency to "@angular/core" (requires "^8.0.3" (extended), would install "12.2.2").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.

Attached is the error I get when installing angular4-paystack in my project

Still the same issue I had previously. I am trying to add this to my angular 17 project. The error comes from angular4-paystack @angular/[email protected] - ^17.. I --legacy-peer-deps but this causes an issue in my pipeline.

In the readme the paystack documentation link only opens the homepage

The link: https://developers.paystack.co/docs/paystack-inline#section-working-with-paystack-inline

update package with the latest version of Angular 12, 13, 14

I get this message on chrome

Uncaught SyntaxError: Unexpected token '<'
But works fine on Mozilla

Another issue - Payment modal launches only once

Please I need your help

Stanley-Kemuel Lloyd Salvation

I implemented the new paystack 3.0 in my project. Using the test key, but your callback function does not return any reference.
It may interest you to know that test payments are successful, email sent but the callback function returns nothing.
<button
angular4-paystack
[email]="applicant.email"
[amount]="5000000"
[ref]="reference"
[key]="'pk_test_************************************"
[class]="'btn btn-primary'"
(paymentInit)="paymentInit($event)"
(close)="paymentCancel()"
(callback)="paymentDone($event)"
class="btn btn-primary">
Pay with PayStack

paymentDone(ref: any) {
console.log(ref);
}
Note: I starred the test key above on purpose
Please I need help

Trying to use metadata to include custom attributes, however, it is not updating on the dashboard. I am using this documentation: https://paystack.com/docs/payments/metadata/

What I am doing

options: PaystackOptions = {
    amount: 50000,
    email: '[email protected]',
    ref: `${Math.ceil(Math.random() * 10e10)}`,

    metadata: {
      phone: "123456781",
      full_name: "testing testing",

         custom_fields: [
          {
            display_name: 'Route',
            variable_name: 'route',
            value: this.from + '-' + this.to,
          },
      ]
    }
  }

<button
angular4-paystack
[paystackOptions]="options"
[metadata]="options.metadata"
(paymentInit)="paymentInit()"
(onClose)="paymentCancel()"
(callback)="paymentDone($event)"
>
Pay with Paystack
</button>

Current behaviour
full name and phone number not updated
custom field not updated

What I am expecting
I am expecting to see the custom field on the paystack dashboard.
Execting to see the phone number and full name updated on the paystack dashboard

core.js:15723 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'postMessage' of null
TypeError: Cannot read property 'postMessage' of null
at Inline.updateIframe (inline.js:1)
at Inline.resetMainIframe (inline.js:1)
at Inline.resetNewCheckout (inline.js:1)
at Inline.setTransaction (inline.js:1)
at Object.setup (inline.js:1)
at Angular4PaystackDirective.push../node_modules/angular4-paystack/fesm5/angular4-paystack.js.Angular4PaystackDirective.pay (angular4-paystack.js:199)
at Angular4PaystackDirective. (angular4-paystack.js:297)
at step (tslib.es6.js:97)
at Object.next (tslib.es6.js:78)
at fulfilled (tslib.es6.js:68)
at resolvePromise (zone.js:831)
at zone.js:741
at fulfilled (tslib.es6.js:68)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17298)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17289)

Hi There,

Firstly thanks for this. Definitely speeds up the process.
Think there may be bug introduced in the last patches:

Console reads:
ANGULAR-PAYSTACK: Insert a callback output like so (callback)='PaymentComplete($event)' to check payment status

Seems the callback is not passing all the way through - this is true using both the AngularPaystackComponent and the AngularPaystackDirective.

Paystack is being provided in the app module: Angular4PaystackModule.forRoot()

we have ionic3 app , when testing for iOS platform after entering Hard token, getting "Paystack Authorization" page and after few second getting another page where it is written "Please close this web page to continue", there is no button to close and not closing automatically, due to this unable to generate order, but payment deducted from credit card.

Hello PayStack Support Team,

We have successfully integrated paystack angular 4 Paystack Inline (Directive) in ionic 3 based application and its working fine on android.

Currenlty we are using these lines of code to intiate and proceed checkout with paystack
<button
angular4-paystack
[key]="'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxx'"
[email]="'[email protected]'"
[amount]="5000000"
[ref]="'2637458697'"
[class]="'btn btn-primary'"
(close)="paymentCancel()"
(callback)="paymentDone($event)">Pay with Paystack

The problem comes when we have generated build for ios platform. I have added this line into config.xml to open internal iframe by the help of
this configuration.

inside section i have added this line to enable iframe working for ios

by this payment flow is start and completed. but in the last screen we are not getting the close button to close internal iframe popup screen
please help us and let us know how to achieve this

Note -: we have tested paystack payment flow on iphone 6s with ios version 12.2.

iOS paystack not closing.zip

Hi, is it possible to save the card entered by the customer and show it again the next time he comes in?

Latest Angular @common13.*, because of this issue. I'm unable to install this library in my local project

Unable to install the package on Angular 13npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"8.0.3 - 12." from [email protected]
npm ERR! node_modules/angular4-paystack
npm ERR! angular4-paystack@"" from the root project

Hi

I see there is an open pr to get split_code in as an option. I am currently also in need of that option.

https://paystack.com/docs/payments/accept-payments/

hi
used the tag in my payment component, the only tag on the page.
but the form loads in a box at the middle top of the page with a scrollbar...

Am i doing something wrong?
PS. Css styles do not affect the tag

Current version isn't compatible with an Angular 17 project

on example in readme file please change the (close) to (onClose). Thanks

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

You can mention @dependabot in the comments below to contact the Dependabot team.

If payment channel is specified, the modal shows all channels

i noticed closing the modal does not trigger callback method specified in close event listener. Then also after closing the modal, i cannot reopen the modal again. I am using Angular 8 for my project

This is not an issue, more like an enhancement.
Please can you add the channels option where one can dynamically set channels as bank or card.

Or can you add some some directions as to contributing to your library.

Thanks in advance

I'm setting my email option using data stored in a session however I keep getting this error:
'ANGULAR-PAYSTACK: Paystack email cannot be empty'
I've blotted out the email address, but it's proof that the email is being read from session storage