From e53fa75f336ab3ed1df74e0034a68941ebb0ac66 Mon Sep 17 00:00:00 2001 From: antoniof Date: Wed, 26 Jan 2022 17:21:45 +0100 Subject: [PATCH 1/6] WIP: adds amazonpay recuring payments --- .../components/AmazonPayComponent.tsx | 2 ++ .../AmazonPay/components/OrderButton.tsx | 4 +++- .../lib/src/components/AmazonPay/types.ts | 22 +++++++++++++++++++ .../lib/src/components/AmazonPay/utils.ts | 13 +++++++++-- .../playground/src/config/commonConfig.js | 2 +- .../playground/src/pages/Wallets/Wallets.js | 21 +++++++++++++----- 6 files changed, 54 insertions(+), 10 deletions(-) diff --git a/packages/lib/src/components/AmazonPay/components/AmazonPayComponent.tsx b/packages/lib/src/components/AmazonPay/components/AmazonPayComponent.tsx index 420e3e2542..c61696c3a9 100644 --- a/packages/lib/src/components/AmazonPay/components/AmazonPayComponent.tsx +++ b/packages/lib/src/components/AmazonPay/components/AmazonPayComponent.tsx @@ -62,6 +62,8 @@ export default function AmazonPayComponent(props: AmazonPayComponentProps) { { - const { amazonCheckoutSessionId, amount, clientKey, publicKeyId, region, returnUrl } = props; + const { amazonCheckoutSessionId, amount, clientKey, chargePermissionType, publicKeyId, region, recurringMetadata, returnUrl } = props; const request: UpdateAmazonCheckoutSessionRequest = { amount, + chargePermissionType, checkoutResultReturnUrl: returnUrl, checkoutSessionId: amazonCheckoutSessionId, publicKeyId, + recurringMetadata, region }; diff --git a/packages/lib/src/components/AmazonPay/types.ts b/packages/lib/src/components/AmazonPay/types.ts index 8e17f09eaa..93caf1b25d 100644 --- a/packages/lib/src/components/AmazonPay/types.ts +++ b/packages/lib/src/components/AmazonPay/types.ts @@ -12,10 +12,23 @@ declare global { type ButtonColor = 'Gold' | 'LightGray' | 'DarkGray'; type Placement = 'Home' | 'Product' | 'Cart' | 'Checkout' | 'Other'; type ProductType = 'PayOnly' | 'PayAndShip'; +type ChargePermissionType = 'OneTime' | 'Recurring'; +type FrequencyUnit = 'Year'| 'Month'| 'Week'| 'Day'| 'Variable'; export type Currency = 'EUR' | 'GBP' | 'USD'; export type Region = 'EU' | 'UK' | 'US'; export type SupportedLocale = typeof SUPPORTED_LOCALES_EU[number] | typeof SUPPORTED_LOCALES_US[number]; +export interface RecurringMetadata { + frequency: { + unit: string + value: FrequencyUnit + }, + amount: { + amount: string + currencyCode: Currency + } +} + export interface AmazonPayConfiguration { merchantId?: string; publicKeyId?: string; @@ -30,6 +43,7 @@ export interface AmazonPayElementProps { amount?: PaymentAmount; buttonColor?: ButtonColor; cancelUrl?: string; + chargePermissionType?: ChargePermissionType; clientKey?: string; configuration?: AmazonPayConfiguration; currency?: Currency; @@ -44,6 +58,7 @@ export interface AmazonPayElementProps { payButton?: any; placement?: Placement; productType?: ProductType; + recurringMetadata?: RecurringMetadata; region?: Region; returnUrl?: string; showChangePaymentDetailsButton: boolean; @@ -65,6 +80,7 @@ export interface AmazonPayButtonProps { amazonRef: any; buttonColor?: ButtonColor; cancelUrl?: string; + chargePermissionType?: ChargePermissionType; clientKey?: string; configuration?: AmazonPayConfiguration; currency?: Currency; @@ -75,6 +91,7 @@ export interface AmazonPayButtonProps { onError: (error, component) => void; placement?: Placement; productType?: ProductType; + recurringMetadata?: RecurringMetadata; ref: any; region?: Region; returnUrl?: string; @@ -100,7 +117,9 @@ export interface OrderButtonProps { amazonCheckoutSessionId: string; amount: PaymentAmount; clientKey: string; + chargePermissionType?: ChargePermissionType; onError: (error, component) => void; + recurringMetadata: RecurringMetadata; ref: any; region: Region; returnUrl: string; @@ -180,6 +199,7 @@ export type LedgerCurrencies = { export interface PayloadJSON { addressDetails?: AddressDetails; + chargePermissionType?: ChargePermissionType; deliverySpecifications?: DeliverySpecifications; merchantMetadata?: MerchantMetadata; paymentDetails?: { @@ -207,10 +227,12 @@ export interface CheckoutDetailsRequest { export interface UpdateAmazonCheckoutSessionRequest { amount: PaymentAmount; + chargePermissionType?: ChargePermissionType; checkoutCancelUrl?: string; checkoutResultReturnUrl: string; checkoutSessionId: string; publicKeyId: string; + recurringMetadata?: RecurringMetadata; region: Region; } diff --git a/packages/lib/src/components/AmazonPay/utils.ts b/packages/lib/src/components/AmazonPay/utils.ts index ece970e158..0feedbb65f 100644 --- a/packages/lib/src/components/AmazonPay/utils.ts +++ b/packages/lib/src/components/AmazonPay/utils.ts @@ -100,13 +100,22 @@ export function getChargeAmount(amount: PaymentAmount): ChargeAmount { * @returns PayloadJSON */ export function getPayloadJSON(props): PayloadJSON { - const { addressDetails, cancelUrl, checkoutMode, deliverySpecifications, returnUrl, merchantMetadata } = props; + const { + addressDetails, + cancelUrl, + checkoutMode, + deliverySpecifications, + returnUrl, + merchantMetadata, + chargePermissionType, + } = props; const { storeId } = props.configuration; const isPayNow = checkoutMode === 'ProcessOrder'; const amount = isPayNow ? getChargeAmount(props.amount) : null; return { storeId, + chargePermissionType, webCheckoutDetails: { ...(isPayNow ? { checkoutResultReturnUrl: returnUrl } : { checkoutReviewReturnUrl: returnUrl }), ...(cancelUrl && { checkoutCancelUrl: cancelUrl }), @@ -122,6 +131,6 @@ export function getPayloadJSON(props): PayloadJSON { }), ...(merchantMetadata && { merchantMetadata }), ...(deliverySpecifications && { deliverySpecifications }), - ...(addressDetails && { addressDetails }) + ...(addressDetails && { addressDetails }), }; } diff --git a/packages/playground/src/config/commonConfig.js b/packages/playground/src/config/commonConfig.js index 06ada36d2f..07c78bb89c 100644 --- a/packages/playground/src/config/commonConfig.js +++ b/packages/playground/src/config/commonConfig.js @@ -2,7 +2,7 @@ import getCurrency from './getCurrency'; import { getSearchParameters } from '../utils'; const DEFAULT_LOCALE = 'en-US'; -const DEFAULT_COUNTRY = 'US'; +const DEFAULT_COUNTRY = 'GB'; const urlParams = getSearchParameters(window.location.search); const merchantAccount = urlParams.merchantAccount; diff --git a/packages/playground/src/pages/Wallets/Wallets.js b/packages/playground/src/pages/Wallets/Wallets.js index 59ae2a227a..ca7c132f46 100644 --- a/packages/playground/src/pages/Wallets/Wallets.js +++ b/packages/playground/src/pages/Wallets/Wallets.js @@ -20,19 +20,31 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse = showPayButton: true }); + + console.log('amount', amount) + // AMAZON PAY // Demo only const urlSearchParams = new URLSearchParams(window.location.search); const amazonCheckoutSessionId = urlSearchParams.get('amazonCheckoutSessionId'); const step = urlSearchParams.get('step'); + const chargeOptions = { + chargePermissionType: 'Recurring', + recurringMetadata: { + frequency: { + unit: 'Month', + value: '1' + } + } + }; + // Initial state if (!step) { window.amazonpay = checkout .create('amazonpay', { - amount, productType: 'PayOnly', - + ...chargeOptions, // Regular checkout: // returnUrl: 'http://localhost:3020/wallets?step=result', // checkoutMode: 'ProcessOrder' @@ -47,16 +59,13 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse = if (step === 'review') { window.amazonpay = checkout .create('amazonpay', { + //...chargeOptions, /** * The merchant will receive the amazonCheckoutSessionId attached in the return URL. */ amazonCheckoutSessionId, cancelUrl: 'http://localhost:3020/wallets', returnUrl: 'http://localhost:3020/wallets?step=result', - amount: { - currency: 'GBP', - value: 4700 - } }) .mount('.amazonpay-field'); } From 6a7821086c7ca721b38545f6c360eb6d5cbe87c7 Mon Sep 17 00:00:00 2001 From: antoniof Date: Wed, 16 Feb 2022 17:43:50 +0100 Subject: [PATCH 2/6] add charge perm type to amazonpay review step --- packages/playground/src/pages/Wallets/Wallets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/src/pages/Wallets/Wallets.js b/packages/playground/src/pages/Wallets/Wallets.js index ca7c132f46..f14e03ff12 100644 --- a/packages/playground/src/pages/Wallets/Wallets.js +++ b/packages/playground/src/pages/Wallets/Wallets.js @@ -59,7 +59,7 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse = if (step === 'review') { window.amazonpay = checkout .create('amazonpay', { - //...chargeOptions, + ...chargeOptions, /** * The merchant will receive the amazonCheckoutSessionId attached in the return URL. */ From 2c72ec7aa9324d715f4b06e03179b0e38ada9723 Mon Sep 17 00:00:00 2001 From: antoniof Date: Tue, 22 Feb 2022 16:17:33 +0100 Subject: [PATCH 3/6] fixes recuring metadata not being sent --- packages/lib/src/components/AmazonPay/types.ts | 1 + packages/lib/src/components/AmazonPay/utils.ts | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/components/AmazonPay/types.ts b/packages/lib/src/components/AmazonPay/types.ts index 93caf1b25d..f318a77252 100644 --- a/packages/lib/src/components/AmazonPay/types.ts +++ b/packages/lib/src/components/AmazonPay/types.ts @@ -208,6 +208,7 @@ export interface PayloadJSON { presentmentCurrency: Currency; totalOrderAmount: ChargeAmount; }; + recurringMetadata?: RecurringMetadata; storeId: string; webCheckoutDetails: { checkoutCancelUrl?: string; diff --git a/packages/lib/src/components/AmazonPay/utils.ts b/packages/lib/src/components/AmazonPay/utils.ts index 0feedbb65f..387f043bb3 100644 --- a/packages/lib/src/components/AmazonPay/utils.ts +++ b/packages/lib/src/components/AmazonPay/utils.ts @@ -7,7 +7,7 @@ import { SUPPORTED_LOCALES_EU, SUPPORTED_LOCALES_US } from './config'; -import { AmazonPayButtonSettings, ChargeAmount, Currency, PayloadJSON, Region, SupportedLocale } from './types'; +import { AmazonPayButtonSettings, ChargeAmount, Currency, PayloadJSON, RecurringMetadata, Region, SupportedLocale } from './types'; import { PaymentAmount } from '../../types'; import { getDecimalAmount } from '../../utils/amount-util'; @@ -108,7 +108,9 @@ export function getPayloadJSON(props): PayloadJSON { returnUrl, merchantMetadata, chargePermissionType, + recurringMetadata, } = props; + const { storeId } = props.configuration; const isPayNow = checkoutMode === 'ProcessOrder'; const amount = isPayNow ? getChargeAmount(props.amount) : null; @@ -129,8 +131,9 @@ export function getPayloadJSON(props): PayloadJSON { totalOrderAmount: amount } }), + ...(recurringMetadata && { recurringMetadata }), ...(merchantMetadata && { merchantMetadata }), ...(deliverySpecifications && { deliverySpecifications }), - ...(addressDetails && { addressDetails }), + ...(addressDetails && { addressDetails }) }; } From 4faff2bffc389edd95d6365deea71c4743445165 Mon Sep 17 00:00:00 2001 From: antoniof Date: Tue, 22 Feb 2022 16:21:49 +0100 Subject: [PATCH 4/6] removes unused type --- packages/lib/src/components/AmazonPay/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/components/AmazonPay/utils.ts b/packages/lib/src/components/AmazonPay/utils.ts index 387f043bb3..0ff2ecd806 100644 --- a/packages/lib/src/components/AmazonPay/utils.ts +++ b/packages/lib/src/components/AmazonPay/utils.ts @@ -7,7 +7,7 @@ import { SUPPORTED_LOCALES_EU, SUPPORTED_LOCALES_US } from './config'; -import { AmazonPayButtonSettings, ChargeAmount, Currency, PayloadJSON, RecurringMetadata, Region, SupportedLocale } from './types'; +import { AmazonPayButtonSettings, ChargeAmount, Currency, PayloadJSON, Region, SupportedLocale } from './types'; import { PaymentAmount } from '../../types'; import { getDecimalAmount } from '../../utils/amount-util'; From 89a9dfde5bf0b6c2c0c8cea99ccb6f198d0ce858 Mon Sep 17 00:00:00 2001 From: antoniof Date: Tue, 22 Feb 2022 16:33:48 +0100 Subject: [PATCH 5/6] fix default values for Wallets page --- packages/playground/src/config/commonConfig.js | 2 +- packages/playground/src/pages/Wallets/Wallets.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/playground/src/config/commonConfig.js b/packages/playground/src/config/commonConfig.js index 07c78bb89c..06ada36d2f 100644 --- a/packages/playground/src/config/commonConfig.js +++ b/packages/playground/src/config/commonConfig.js @@ -2,7 +2,7 @@ import getCurrency from './getCurrency'; import { getSearchParameters } from '../utils'; const DEFAULT_LOCALE = 'en-US'; -const DEFAULT_COUNTRY = 'GB'; +const DEFAULT_COUNTRY = 'US'; const urlParams = getSearchParameters(window.location.search); const merchantAccount = urlParams.merchantAccount; diff --git a/packages/playground/src/pages/Wallets/Wallets.js b/packages/playground/src/pages/Wallets/Wallets.js index f14e03ff12..c4786f8db5 100644 --- a/packages/playground/src/pages/Wallets/Wallets.js +++ b/packages/playground/src/pages/Wallets/Wallets.js @@ -30,13 +30,13 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse = const step = urlSearchParams.get('step'); const chargeOptions = { - chargePermissionType: 'Recurring', - recurringMetadata: { - frequency: { - unit: 'Month', - value: '1' - } - } + // chargePermissionType: 'Recurring', + // recurringMetadata: { + // frequency: { + // unit: 'Month', + // value: '1' + // } + // } }; // Initial state From e5254734c10c18b76ad9d7dbbf75617c5fec926e Mon Sep 17 00:00:00 2001 From: antoniof Date: Tue, 22 Feb 2022 17:37:42 +0100 Subject: [PATCH 6/6] removes console.log in wallets --- packages/playground/src/pages/Wallets/Wallets.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/playground/src/pages/Wallets/Wallets.js b/packages/playground/src/pages/Wallets/Wallets.js index c4786f8db5..8c07a5814b 100644 --- a/packages/playground/src/pages/Wallets/Wallets.js +++ b/packages/playground/src/pages/Wallets/Wallets.js @@ -20,9 +20,6 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse = showPayButton: true }); - - console.log('amount', amount) - // AMAZON PAY // Demo only const urlSearchParams = new URLSearchParams(window.location.search);