I am using ngx-paypal to introduce a paypal pay button in a page. I have the cart object represented like this:
cart$: Observable<Cart>;
as a local variable. What is the recommended way to to pass the total from cart$ (.total) to the standard config from ngx-paypal:
private initConfig(): void {
this.payPalConfig = {
currency: 'EUR',
clientId: 'AXVj0j1Qk2K6OD2ai7TezGja3QxzK-lAFlTrVT5EiWHL-uFbu3Ce2d2Tg9Jo-13YpiJIzGgNIRkz9lKs',
createOrderOnClient: (data) => <ICreateOrderRequest> {
intent: 'CAPTURE',
purchase_units: [
{
amount: {
currency_code: 'EUR',
value: this.cart$.totalPriceWithTax.value,
breakdown: {
item_total: {
currency_code: 'EUR',
value: '9.99'
}
}
},
items: [
{
name: 'Enterprise Subscription',
quantity: '1',
category: 'DIGITAL_GOODS',
unit_amount: {
currency_code: 'EUR'
Is it ok if I subscribe to cart$ in initConfig and initialize this.payPalConfig inside the subscription?
If you already have cart$ as an observable and the value of payPalConfig depends on emissions from cart$, it would probably be simplest to define the config as an observable that derives from cart$, something like this:
public paypalConfig$ = this.cart$.pipe(
map(cart => this.buildPaypalConfig(cart.items))
);
You would create a buildPaypalConfig method that builds up the config object, from the cart$ emission. Then, in the template, you can pass paypalConfig$ | async to the ngx-paypal component, like this:
<ngx-paypal [config]="paypalConfig$ | async"></ngx-paypal>
This ensures the ngx-paypal component always has a config that reflects the most up-to-date changes of the cart$.
Here's a StackBlitz sample.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments