From a077b66fb2b19a725b9a3c0c93d3d19947111354 Mon Sep 17 00:00:00 2001 From: Vlad Ardelean Date: Tue, 18 Sep 2018 12:50:25 +0300 Subject: [PATCH] Ability to hide shipping address field and customize business name, logo image and locale in which the payment page is shown. --- demo/app/app.component.html | 206 ++++++++++-------- demo/app/app.component.ts | 8 + .../src/lib/components/paypal-component.ts | 11 + .../src/lib/models/paypal-models.ts | 18 ++ 4 files changed, 147 insertions(+), 96 deletions(-) diff --git a/demo/app/app.component.html b/demo/app/app.component.html index 76bc938..6ae776b 100644 --- a/demo/app/app.component.html +++ b/demo/app/app.component.html @@ -1,132 +1,146 @@

Angular PayPal

- Supported versions: Angular 6+ + Supported versions: + Angular 6+
-

- Live Preview (Sandbox - client side integration) +

+ Live Preview (Sandbox - client side integration)

- +

- Installation + Installation

- 
+

- Usage + Usage

- 
+

- Configuration (PayPalConfig) + Configuration ( + PayPalConfig)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
integrationTypePayPalIntegrationTypeType of the integration (client | server)
environmentPayPalEnvironmentEnvironment (sandbox | production)
commitbooleanSShow 'Pay Now' button config
payment() => Observable<string>Called to create new payment for server side integration
onAuthorize(data: IPayPalPaymentCompleteData, actions: any) => Observable<void>Called to execute payment for server side integration
clientIPaypalClientClient tokens for client side integration
transactionsIPayPalTransaction[]Array of transaction, required for client side integration
onPaymentComplete(data: IPayPalPaymentCompleteData, actions: any) => voidCalled for client side integration when payment is executed
buttonIPayPalButtonStyleButton configuration
fundingIPayPalFundingPaypal funding configuration
onError(err: any) => voidCalled when PayPal experiences an error
onCancel(data: IPayPalCancelPayment, actions: any) => voidCalled when user cancels payment
onClick() => voidCalled when user clicks on PayPal button
validate(actions: any) => voidCan be used to perform validation as mentioned here
note_to_payerstring?Note to payer
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
integrationTypePayPalIntegrationTypeType of the integration (client | server)
environmentPayPalEnvironmentEnvironment (sandbox | production)
commitbooleanShow 'Pay Now' button config
payment() => Observable<string>Called to create new payment for server side integration
onAuthorize(data: IPayPalPaymentCompleteData, actions: any) => Observable<void>Called to execute payment for server side integration
clientIPaypalClientClient tokens for client side integration
transactionsIPayPalTransaction[]Array of transaction, required for client side integration
onPaymentComplete(data: IPayPalPaymentCompleteData, actions: any) => voidCalled for client side integration when payment is executed
buttonIPayPalButtonStyleButton configuration
fundingIPayPalFundingPaypal funding configuration
onError(err: any) => voidCalled when PayPal experiences an error
onCancel(data: IPayPalCancelPayment, actions: any) => voidCalled when user cancels payment
onClick() => voidCalled when user clicks on PayPal button
validate(actions: any) => voidCan be used to perform validation as mentioned + here +
note_to_payerstring?Note to payer
experienceIPayPalExperiencePayment Experience configurations as documented + here +
diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts index 6eef8d3..b9f2ae3 100644 --- a/demo/app/app.component.ts +++ b/demo/app/app.component.ts @@ -77,6 +77,10 @@ export class AppComponent implements AfterViewInit, OnInit { validate: (actions) => { console.log(actions); }, + experience: { + noShipping: true, + brandName: 'Angular PayPal' + }, transactions: [ { amount: { @@ -175,6 +179,10 @@ export class AppComponent implements AfterViewInit, OnInit { validate: (actions) => { console.log(actions); }, + experience: { + noShipping: true, + brandName: 'Angular PayPal' + }, transactions: [ { amount: { diff --git a/projects/ngx-paypal-lib/src/lib/components/paypal-component.ts b/projects/ngx-paypal-lib/src/lib/components/paypal-component.ts index bd401e1..c4e4734 100644 --- a/projects/ngx-paypal-lib/src/lib/components/paypal-component.ts +++ b/projects/ngx-paypal-lib/src/lib/components/paypal-component.ts @@ -247,9 +247,20 @@ export class NgxPaypalComponent implements OnChanges, AfterViewInit, OnDestroy { throw Error(`You need to provide at least 1 transaction for client side integration`); } + const experienceConfig = this.config.experience; return actions.payment.create({ payment: { transactions: this.config.transactions + }, + experience: { + input_fields: { + no_shipping: (experienceConfig && experienceConfig.noShipping) ? 1 : 0 + }, + presentation: { + brand_name: (experienceConfig && experienceConfig.brandName) ? experienceConfig.brandName : null, + logo_image: (experienceConfig && experienceConfig.logoImage) ? experienceConfig.logoImage : null, + locale_code: (experienceConfig && experienceConfig.localeCode) ? experienceConfig.localeCode : null + } } }); } diff --git a/projects/ngx-paypal-lib/src/lib/models/paypal-models.ts b/projects/ngx-paypal-lib/src/lib/models/paypal-models.ts index aeb5ebe..0881416 100644 --- a/projects/ngx-paypal-lib/src/lib/models/paypal-models.ts +++ b/projects/ngx-paypal-lib/src/lib/models/paypal-models.ts @@ -31,6 +31,11 @@ export class PayPalConfig { */ public transactions?: IPayPalTransaction[]; + /** + * Payment Experience configurations + */ + public experience?: IPayPalExperience; + /** * Called for client side integration when payment is executed */ @@ -86,6 +91,7 @@ export class PayPalConfig { onPaymentComplete?: (data: IPayPalPaymentCompleteData, actions: any) => void, transactions?: IPayPalTransaction[], note_to_payer?: string; + experience?: IPayPalExperience, commit?: boolean, button?: IPayPalButtonStyle, funding?: IPayPalFunding @@ -123,6 +129,7 @@ export interface IPaypalClient { export interface IPayPalTransaction { amount: IPayPalAmount; + description?: string; custom?: string; payment_options?: IPayPalTransactionPaymentOptions; soft_descriptor?: string; @@ -175,6 +182,17 @@ export interface IPayPalTransactionPaymentOptions { allowed_payment_method?: string; } +export interface IPayPalExperience { + /** Indicates whether PayPal displays shipping address fields on the experience pages */ + noShipping?: boolean; + /** A label that overrides the business name in the PayPal account on the PayPal pages. Max length: 127 characters. */ + brandName?: string; + /** URL to the logo image (gif, jpg, or png). The image's maximum width is 190 pixels and maximum height is 60 pixels. */ + logoImage?: string; + /** Locale in which to display PayPal page */ + localeCode?: string; +} + export interface IPayPalButtonStyle { label?: 'checkout' | 'pay' | 'buynow' | 'paypal'; size?: 'small' | 'medium' | 'large' | 'responsive';