This is an Angular wrapper library for Paddle.js.
npm install ngx-paddleshell
$ npm install ngx-paddle
`
#### 1b) Or Yarn
`shell
$ yarn add ngx-paddle
`
#### 2) Import the PaddleModule
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PaddleModule } from 'ngx-paddle';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, PaddleModule.forRoot({ sandbox: true/false })],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
#### 3a) The easy way, using the ngxPaddle Directive
`html
ngxPaddle
[vendor]="123456"
[product]="654321"
email="test@test.com"
(onCheckoutEvent)="checkEvent($event)"
>
`
#### 3b) The less easy way, using the Service directly
Since most of the functionality is through the service you can imlpement this yourself to customize to your needs further.
`typescript
import { Component, AfterViewInit } from '@angular/core';
import {
PaddleService,
PaddleCheckoutOptions,
PaddleEventCallbackData,
PADDLE_EVENT_TYPE,
} from 'ngx-paddle';
export class ComponentThatImplementsPaddle implements AfterViewInit {
private paddleOptions: PaddleCheckoutOptions = {
product: 654321,
title: 'Test Title',
message: 'Test Message',
coupon: 'TEST',
email: 'test@test.com',
};
constructor(private paddleServ: PaddleService) {}
// Create and open programatically once the library is loaded.
ngAfterViewInit() {
this.paddleServ.create({
vendor: 123456,
eventCallback: this.checkEvent,
});
}
onSubscribe() {
this.paddleServ.open(this.paddleOptions);
}
checkEvent(data: PaddleEventCallbackData) {
// Handle Event
if (data.event === PADDLE_EVENT_TYPE.CheckoutComplete) {
console.log('User has completed checkout!');
} else {
console.log(data.event);
}
}
}
`
#### 3c) Use Available Options (see official docs for more)
For Directive:
| Attribute/prop | input/output | optional/required | Type |Description |
| --------------- | ------------ | ----------------- | -------- | -------------------------- |
| vendor | input | required | number | Your vendor id |
| product | input | required | number | Your product id |
| title | input | optional | string | See docs |
| message | input | optional | string | See docs |
| coupon | input | optional | string | See docs |
| email | input | optional | string | See docs |
| onCheckoutEvent | output | optional | string | See docs |
For Service: all other options
#### 4) Get Price
`typescript
import { Component, AfterViewInit } from '@angular/core';
import {
PaddleProductPrice,
PaddleService,
PaddleCheckoutOptions,
PaddleEventCallbackData,
PADDLE_EVENT_TYPE,
} from 'ngx-paddle';
export class ComponentThatImplementsPaddle implements AfterViewInit {
private paddleOptions: PaddleCheckoutOptions = {
product: 654321,
title: 'Test Title',
message: 'Test Message',
coupon: 'TEST',
email: 'test@test.com',
};
price: PaddleProductPrice;
constructor(private paddleServ: PaddleService) {}
// Create and open programatically once the library is loaded.
ngAfterViewInit() {
this.paddleServ.create({
vendor: 123456,
eventCallback: this.checkEvent,
});
// GET YOUR PRODUCTS PRICE:
const numberOfProductsToPrice = 2;
this.price = await this.paddleServ.getPrice(this.paddleOptions.product, numberOfProductsToPrice);
// OR (quantity defaults to 1):
this.price = await this.paddleServ.getPrice(this.paddleOptions.product);
}
[...]
}
``