Skip to content

Commit

Permalink
Ability to hide shipping address field and customize business name, l…
Browse files Browse the repository at this point in the history 
…ogo image and locale in which the payment page is shown.
  • Loading branch information
@vladardelean
vladardelean committed Sep 18, 2018
1 parent b980f77 commit a077b66
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 96 deletions.
206 changes: 110 additions & 96 deletions demo/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,146 @@
<h1>Angular PayPal</h1>

<div class="mt-2">
Supported versions: <strong>Angular 6+</strong>
Supported versions:
<strong>Angular 6+</strong>
</div>

<div class="alert alert-warning mt-2" role="alert">
More features will be added depending on how much traction this gets. <a href="https://github.com/Enngage/ngx-paypal">Star repo</a>.
More features will be added depending on how much traction this gets.
<a href="https://github.com/Enngage/ngx-paypal">Star repo</a>.
</div>

<h2 class="mt-3">
Live Preview (Sandbox - client side integration)
<h2 class="mt-3">
Live Preview (Sandbox - client side integration)
</h2>

<div class="mt-2">
<ngx-paypal [config]="payPalConfig"></ngx-paypal>
<ngx-paypal [config]="payPalConfig"></ngx-paypal>
</div>

<h2 class="mt-3">
Installation
Installation
</h2>

<div class="mt-2">
<pre>
<pre>
<code [innerText]="npmCode"></code>
<code [innerText]="moduleInstallation"></code>
</pre>
</div>

<h2>
Usage
Usage
</h2>

<div class="mt-2">
<pre >
<pre>
<code [innerText]="usageCodeTs"></code>
<code [innerText]="htmlCode"></code>
</pre>
</div>

<h2>
Configuration (<em>PayPalConfig</em>)
Configuration (
<em>PayPalConfig</em>)
</h2>

<div class="mt-2">
<table class="table">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>integrationType</td>
<td>PayPalIntegrationType</td>
<td>Type of the integration (client | server)</td>
</tr>
<tr>
<td>environment</td>
<td>PayPalEnvironment</td>
<td>Environment (sandbox | production)</td>
</tr>
<tr>
<td>commit</td>
<td>boolean</td>
<td>SShow 'Pay Now' button config</td>
</tr>
<tr>
<td>payment</td>
<td>() => Observable&#x3C;string&#x3E;</td>
<td>Called to create new payment for server side integration</td>
</tr>
<tr>
<td>onAuthorize</td>
<td>(data: IPayPalPaymentCompleteData, actions: any) =&#x3E; Observable&#x3C;void&#x3E;</td>
<td>Called to execute payment for server side integration</td>
</tr>
<tr>
<td>client</td>
<td>IPaypalClient</td>
<td>Client tokens for client side integration</td>
</tr>
<tr>
<td>transactions</td>
<td>IPayPalTransaction[]</td>
<td>Array of transaction, required for client side integration</td>
</tr>
<tr>
<td>onPaymentComplete</td>
<td>(data: IPayPalPaymentCompleteData, actions: any) => void</td>
<td>Called for client side integration when payment is executed</td>
</tr>
<tr>
<td>button</td>
<td>IPayPalButtonStyle</td>
<td>Button configuration</td>
</tr>
<tr>
<td>funding</td>
<td>IPayPalFunding</td>
<td>Paypal funding configuration</td>
</tr>
<tr>
<td>onError</td>
<td>(err: any) => void</td>
<td>Called when PayPal experiences an error</td>
</tr>
<tr>
<td>onCancel</td>
<td>(data: IPayPalCancelPayment, actions: any) => void</td>
<td>Called when user cancels payment</td>
</tr>
<tr>
<td>onClick</td>
<td>() => void</td>
<td>Called when user clicks on PayPal button</td>
</tr>
<tr>
<td>validate</td>
<td>(actions: any) => void</td>
<td>Can be used to perform validation as mentioned <a href="https://developer.paypal.com/demo/checkout/#/pattern/validation" target="_blank">here</a></td>
</tr>
<tr>
<td>note_to_payer</td>
<td>string?</td>
<td>Note to payer</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>integrationType</td>
<td>PayPalIntegrationType</td>
<td>Type of the integration (client | server)</td>
</tr>
<tr>
<td>environment</td>
<td>PayPalEnvironment</td>
<td>Environment (sandbox | production)</td>
</tr>
<tr>
<td>commit</td>
<td>boolean</td>
<td>Show 'Pay Now' button config</td>
</tr>
<tr>
<td>payment</td>
<td>() => Observable&#x3C;string&#x3E;</td>
<td>Called to create new payment for server side integration</td>
</tr>
<tr>
<td>onAuthorize</td>
<td>(data: IPayPalPaymentCompleteData, actions: any) =&#x3E; Observable&#x3C;void&#x3E;</td>
<td>Called to execute payment for server side integration</td>
</tr>
<tr>
<td>client</td>
<td>IPaypalClient</td>
<td>Client tokens for client side integration</td>
</tr>
<tr>
<td>transactions</td>
<td>IPayPalTransaction[]</td>
<td>Array of transaction, required for client side integration</td>
</tr>
<tr>
<td>onPaymentComplete</td>
<td>(data: IPayPalPaymentCompleteData, actions: any) => void</td>
<td>Called for client side integration when payment is executed</td>
</tr>
<tr>
<td>button</td>
<td>IPayPalButtonStyle</td>
<td>Button configuration</td>
</tr>
<tr>
<td>funding</td>
<td>IPayPalFunding</td>
<td>Paypal funding configuration</td>
</tr>
<tr>
<td>onError</td>
<td>(err: any) => void</td>
<td>Called when PayPal experiences an error</td>
</tr>
<tr>
<td>onCancel</td>
<td>(data: IPayPalCancelPayment, actions: any) => void</td>
<td>Called when user cancels payment</td>
</tr>
<tr>
<td>onClick</td>
<td>() => void</td>
<td>Called when user clicks on PayPal button</td>
</tr>
<tr>
<td>validate</td>
<td>(actions: any) => void</td>
<td>Can be used to perform validation as mentioned
<a href="https://developer.paypal.com/demo/checkout/#/pattern/validation"
target="_blank">here</a>
</td>
</tr>
<tr>
<td>note_to_payer</td>
<td>string?</td>
<td>Note to payer</td>
</tr>
<tr>
<td>experience</td>
<td>IPayPalExperience</td>
<td>Payment Experience configurations as documented
<a href="https://developer.paypal.com/docs/api/payment-experience/v1/#definition-presentation"
target="_blank">here</a>
</td>
</tr>
</tbody>
</table>
</div>
8 changes: 8 additions & 0 deletions demo/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ export class AppComponent implements AfterViewInit, OnInit {
validate: (actions) => {
console.log(actions);
},
experience: {
noShipping: true,
brandName: 'Angular PayPal'
},
transactions: [
{
amount: {
Expand Down Expand Up @@ -175,6 +179,10 @@ export class AppComponent implements AfterViewInit, OnInit {
validate: (actions) => {
console.log(actions);
},
experience: {
noShipping: true,
brandName: 'Angular PayPal'
},
transactions: [
{
amount: {
Expand Down
11 changes: 11 additions & 0 deletions projects/ngx-paypal-lib/src/lib/components/paypal-component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
});
}
Expand Down
18 changes: 18 additions & 0 deletions projects/ngx-paypal-lib/src/lib/models/paypal-models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -123,6 +129,7 @@ export interface IPaypalClient {

export interface IPayPalTransaction {
amount: IPayPalAmount;
description?: string;
custom?: string;
payment_options?: IPayPalTransactionPaymentOptions;
soft_descriptor?: string;
Expand Down Expand Up @@ -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';
Expand Down

0 comments on commit a077b66

Please sign in to comment.