DigitpayAngular

This library was generated with Angular CLI version 17.3.0.

Install packages

Run

npm  i  digitpay-angular

to install library.

Enable assets

In angular.json, add this line

	"architect": {
		"build": {
			"builder": "@angular-devkit/build-angular:application",
			"options": {
				"outputPath": "dist/app",
				"index": "projects/app/src/index.html",
				"browser": "projects/app/src/main.ts",
				"polyfills": [
					"zone.js"
				],
				"tsConfig": "projects/app/tsconfig.app.json",
				"inlineStyleLanguage": "scss",
				"assets": [
					"projects/app/src/favicon.ico",
					"projects/app/src/assets",
					//add this to assets
					{
						"glob": "**/*",
						"input": "./node_modules/digitpay-angular/assets",
						"output": "assets"
					}
				],
			}
		}
	}

Import DigitpayAngular component

In standalone component

You can import **DigitpayAngular** component directly in component where you want 			to use it.

	//import **DigitpayAngularComponent**
	import {DigitpayAngularComponent} from  'digitpay-angular'

	@Component({
	selector: 'app-root',
	standalone: true,
	imports: [DigitpayAngularComponent], //Add to component imports tag
	templateUrl: './app.component.html',
	styleUrl: './app.component.scss'
	})
	export  class  AppComponent  implements  OnInit{

In non standalone component

Add DigitpayAngular to import in module app like this :

//import **DigitpayAngularComponent**
import { DigitpayAngularComponent } from 'digitpay-angular'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DigitpayAngularComponent, //Add to imports
  ],
  providers: [provideClientHydration()],
  bootstrap: [AppComponent],
})
export class AppModule {}

Import cdn link for fadapay payment in index.html head balise

Put

 <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>

in index.html head balise.

Provide payments methods credential

DigitpayAngular Supporte three payments methods : stripe ,paypal and fedapay . So you need to provide these credentials(public key or secret key). To achieve that , you need to inject DigitpayAngularService in your component and provide method key respectively.

//Import **DigitpayAngularService** service
import { DigitpayAngularComponent, DigitpayAngularService } from 'digitpay-angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DigitpayAngularComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  title = 'app'

  private digitPayAngularService = inject(DigitpayAngularService)

  ngOnInit(): void {
    // provide fedapay key if your want to use it
    this.digitPayAngularService.fedapayKey = 'Your_public_fedapay_key'
    // provide paypal client key key if your want to use it
    this.digitPayAngularService.paypalClienId = 'Your_paypal_clientId_key'
    // provide stripe public and secret key if your want to use stripe
    this.digitPayAngularService.stripePublicKey = 'Your_stripe_public_key'
    this.digitPayAngularService.stripeSecretKey = 'your_stripe_secret_key'
  }
}

Use component

In your template

<digitpay-angular [paiementMethodsAlowed]="['stripe','fedapay','paypal']" [transaction_data]="{amount : 500, currency : 'XOF'}" (transactionStatus)="handleStatus($event)"> </digitpay-angular>

paiementMethodsAlowed : Optionnal .when not set or has value [], all payment methods appear transaction_data : Required .{amount : number,currency : 'XOF' | 'USD' | 'EUR'} customer_data : Optionnal, Use it when you use fedapay. type { email : string, lastname:string, firstname:string} feda_custom_meta_data : Other data to set in custom_meta_data transactionStatus : Event to handle transaction status, success or fail