Skip to content

Commit 665f4bc

Browse files
Shagufa92shagufa-ali
Shagufa92
and
shagufa-ali
authored
PPCP Wallet pay button implementation (#10)
* ppcp wallet pay button implementation --------- Co-authored-by: shagufa-ali <80478231+shagufa-ali@users.noreply.github.com>
1 parent e9b6703 commit 665f4bc

File tree

10 files changed

+186
-362
lines changed

10 files changed

+186
-362
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"typescript-transform-paths": "^3.3.1"
4444
},
4545
"peerDependencies": {
46-
"@boldcommerce/checkout-frontend-library": "0.52.2"
46+
"@boldcommerce/checkout-frontend-library": "0.53.0"
4747
},
4848
"files": [
4949
"lib/**/*"
@@ -52,7 +52,7 @@
5252
"*.{js,jsx,ts,tsx}": "eslint --fix --max-warnings 0"
5353
},
5454
"dependencies": {
55-
"@boldcommerce/checkout-frontend-library": "0.52.2",
55+
"@boldcommerce/checkout-frontend-library": "0.53.0",
5656
"@paypal/paypal-js": "^7.0.1",
5757
"@types/applepayjs": "^3.0.4",
5858
"@types/googlepay": "^0.6.4"

‎src/paypal/ppcp_buttons/ppcpOnApprove.ts

Lines changed: 43 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,51 @@
1-
import {OnApproveActions, OnApproveData} from '@paypal/paypal-js/types/components/buttons';
2-
import {OrderResponseBody, ShippingInfo} from '@paypal/paypal-js/types/apis/orders';
3-
import {getFirstAndLastName, getPhoneNumber, getTotals,} from 'src/utils';
4-
import {formatPaypalToApiAddress} from 'src/paypal/formatPaypalToApiAddress';
5-
import {addPayment, apiTypeKeys, batchRequest, getCurrency, IAddPaymentRequest, IBatchableRequest, buildAddressBatchRequest, buildCustomerBatchRequest} from '@boldcommerce/checkout-frontend-library';
1+
import {OnApproveData} from '@paypal/paypal-js/types/components/buttons';
2+
import {getTotals,} from 'src/utils';
3+
import {
4+
addPayment,
5+
getCurrency,
6+
IAddPaymentRequest,
7+
IWalletPayOnApproveRequest, walletPayOnApprove
8+
} from '@boldcommerce/checkout-frontend-library';
69
import {API_RETRY} from 'src/types';
710
import {getPaypalGatewayPublicId} from 'src/paypal/managePaypalState';
811
import {orderProcessing, displayError} from 'src/actions';
912

10-
export async function ppcpOnApprove(data: OnApproveData, actions: OnApproveActions): Promise<void> {
13+
export async function ppcpOnApprove(data: OnApproveData): Promise<void> {
1114
const {iso_code: currencyCode} = getCurrency();
12-
return actions.order?.get().then(async ({ payer, purchase_units, payment_source}: OrderResponseBody) => {
1315

14-
// Build Batch Requests
15-
const requests: Array<IBatchableRequest> = [];
16-
17-
// extract all shipping info
18-
const { name, address: shippingAddress } = purchase_units[0].shipping as ShippingInfo;
19-
const shippingNames = getFirstAndLastName(name?.full_name);
20-
21-
// extract all billing info
22-
const {name: payerName, address: billingAddress} = payer;
23-
const billingNames = {firstName: payerName?.given_name || '', lastName: payerName?.surname || ''};
24-
const phone = getPhoneNumber(payer.phone?.phone_number.national_number);
25-
const email = payer.email_address || '';
26-
const isBillingAddressFilled = (
27-
!!billingAddress?.address_line_1
28-
&& !!billingAddress.admin_area_1
29-
&& !!billingAddress.admin_area_2
30-
&& !!billingAddress.country_code
31-
&& !!billingAddress.postal_code
32-
);
33-
34-
const formattedShippingAddress = formatPaypalToApiAddress(shippingAddress, shippingNames.firstName, shippingNames.lastName, phone);
35-
const formattedBillingAddress = formatPaypalToApiAddress(isBillingAddressFilled ? billingAddress : shippingAddress, billingNames.firstName, billingNames.lastName, phone);
36-
37-
const shippingAddressRequest = buildAddressBatchRequest(formattedShippingAddress, 'shipping');
38-
const billingAddressRequest = buildAddressBatchRequest(formattedBillingAddress, 'billing');
39-
40-
const customerRequest = buildCustomerBatchRequest(billingNames.firstName, billingNames.lastName, email);
41-
42-
customerRequest && requests.push(customerRequest);
43-
shippingAddressRequest && requests.push(shippingAddressRequest);
44-
billingAddressRequest && requests.push(billingAddressRequest);
45-
requests.push({apiType: apiTypeKeys.setTaxes, payload: {}});
46-
47-
const batchResponse = await batchRequest(requests, API_RETRY);
48-
49-
if (batchResponse.success) {
50-
// add payment
51-
const totals = getTotals();
52-
const payment: IAddPaymentRequest = {
53-
token: data.orderID,
54-
gateway_public_id: getPaypalGatewayPublicId(),
55-
currency: currencyCode,
56-
amount: totals.totalAmountDue,
57-
wallet_pay_type: 'paypal',
58-
extra_payment_data: {
59-
orderId: data.orderID,
60-
facilitatorAccessToken: data.facilitatorAccessToken,
61-
payerId: data.payerID,
62-
paymentSource: payment_source,
63-
}
64-
} as IAddPaymentRequest;
65-
const paymentResult = await addPayment(payment, API_RETRY);
66-
if (!paymentResult.success) {
67-
displayError('There was an unknown error while processing your payment.', 'payment_gateway', 'unknown_error');
68-
return;
69-
}
70-
// finalize order
71-
orderProcessing();
72-
} else {
73-
displayError('There was an unknown error while processing your payment.', 'payment_gateway', 'unknown_error');
74-
return;
16+
const body: IWalletPayOnApproveRequest = {
17+
gateway_type: 'paypal',
18+
payment_data: {
19+
locale: navigator.language,
20+
paypal_order_id: data.orderID
21+
}
22+
};
23+
24+
const res = await walletPayOnApprove(body, API_RETRY);
25+
26+
if (!res.success) {
27+
displayError('There was an unknown error while processing your payment.', 'payment_gateway', 'unknown_error');
28+
return;
29+
}
30+
31+
const totals = getTotals();
32+
const payment: IAddPaymentRequest = {
33+
token: data.orderID,
34+
gateway_public_id: getPaypalGatewayPublicId(),
35+
currency: currencyCode,
36+
amount: totals.totalAmountDue,
37+
extra_payment_data: {
38+
orderId: data.orderID,
39+
facilitatorAccessToken: data.facilitatorAccessToken,
40+
payerId: data.payerID,
7541
}
76-
});
42+
} as IAddPaymentRequest;
43+
const paymentResult = await addPayment(payment, API_RETRY);
44+
if (!paymentResult.success) {
45+
displayError('There was an unknown error while processing your payment.', 'payment_gateway', 'unknown_error');
46+
return;
47+
}
48+
49+
// finalize order
50+
orderProcessing();
7751
}

‎src/paypal/ppcp_buttons/ppcpOnLoad.ts

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import {
33
enableDisableSection,
44
getPaypalNameSpace,
55
paypalOnClick,
6-
paypalOnShippingChange,
76
ppcpOnApprove,
87
showPaymentMethodTypes
98
} from 'src';
10-
import {OnShippingChangeActions, OnShippingChangeData} from '@paypal/paypal-js/types/components/buttons';
119
import {ppcpOrderCreate} from 'src/paypal/ppcp_buttons/ppcpOrderCreate';
10+
import {ppcpOnShippingChange} from 'src/paypal/ppcp_buttons/ppcpOnShippingChange';
1211

1312
export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButton): Promise<void> {
1413

@@ -29,7 +28,7 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
2928
fundingSource: 'paypal',
3029
createOrder: ppcpOrderCreate,
3130
onClick: paypalOnClick,
32-
onShippingChange: paypalOnShippingChange as (data: OnShippingChangeData, actions: OnShippingChangeActions) => Promise<void>,
31+
onShippingChange: ppcpOnShippingChange,
3332
onApprove: ppcpOnApprove,
3433
style: {
3534
...payment.style,
@@ -40,24 +39,13 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
4039
fundingSource: 'paylater',
4140
createOrder: ppcpOrderCreate,
4241
onClick: paypalOnClick,
43-
onShippingChange: paypalOnShippingChange as (data: OnShippingChangeData, actions: OnShippingChangeActions) => Promise<void>,
42+
onShippingChange: ppcpOnShippingChange,
4443
onApprove: ppcpOnApprove,
4544
style: {
4645
...payment.style,
4746
},
4847
});
4948

50-
const venmoButton = paypal.Buttons({
51-
fundingSource: 'venmo',
52-
createOrder: ppcpOrderCreate,
53-
onClick: paypalOnClick,
54-
onApprove: ppcpOnApprove,
55-
style: {
56-
...payment.style,
57-
color: 'blue', // paypal bug. venmo doesnt work with any other color
58-
},
59-
});
60-
6149
if(container) {
6250
if (paypalButton.isEligible()) {
6351
await paypalButton.render(`#${paypalDivId}`);
@@ -69,10 +57,6 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
6957
enableSection = true;
7058
}
7159

72-
if (venmoButton.isEligible()) {
73-
await venmoButton.render(`#${paypalDivId}`);
74-
enableSection = true;
75-
}
7660
}
7761

7862
if(enableSection) {

‎src/paypal/ppcp_buttons/ppcpOnShippingChange.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {OnShippingChangeActions, OnShippingChangeData} from '@paypal/paypal-js/types/components/buttons';
2+
import {
3+
IWalletPayOnShippingRequest,
4+
walletPayOnShipping
5+
} from '@boldcommerce/checkout-frontend-library';
6+
import {API_RETRY, displayError,} from 'src';
7+
8+
9+
export async function ppcpOnShippingChange(data: OnShippingChangeData, actions: OnShippingChangeActions): Promise<void> {
10+
11+
const body: IWalletPayOnShippingRequest = {
12+
gateway_type: 'paypal',
13+
payment_data: {
14+
locale: navigator.language,
15+
paypal_order_id: data.orderID,
16+
shipping_address: data.shipping_address,
17+
shipping_options: data.selected_shipping_option,
18+
}
19+
};
20+
21+
const res = await walletPayOnShipping(body, API_RETRY);
22+
if (!res.success) {
23+
displayError('There was an unknown error while getting the shipping details.', 'payment_gateway', 'unknown_error');
24+
return actions.reject();
25+
}
26+
27+
}

‎src/paypal/ppcp_buttons/ppcpOrderCreate.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import {
2-
createPaymentGatewayOrder,
32
IApiSuccessResponse,
4-
ICreatePaymentGatewayOrderRequest,
5-
ICreatePaymentGatewayOrderResponse
3+
IWalletPayCreateOrderRequest,
4+
IWalletPayCreateOrderResponse,
5+
walletPayCreateOrder
66
} from '@boldcommerce/checkout-frontend-library';
77
import {API_RETRY} from 'src/types';
88
import {displayError} from 'src/actions';
99

1010
export async function ppcpOrderCreate(): Promise<string> {
11-
const payment: ICreatePaymentGatewayOrderRequest = {
11+
const payment: IWalletPayCreateOrderRequest = {
1212
gateway_type: 'paypal',
1313
payment_data: {
1414
locale: navigator.language,
1515
payment_type: 'paypal',
1616
}
1717
};
1818

19-
const paymentResult = await createPaymentGatewayOrder(payment, API_RETRY);
19+
const paymentResult = await walletPayCreateOrder(payment, API_RETRY);
2020
if(paymentResult.success) {
2121
const {data} = paymentResult.response as IApiSuccessResponse;
22-
const {payment_data} = data as ICreatePaymentGatewayOrderResponse;
22+
const {payment_data} = data as IWalletPayCreateOrderResponse;
2323
const orderId = payment_data.id as string;
2424
return orderId;
2525
} else {

0 commit comments

Comments
 (0)