Merge pull request #1466 from Adyen/feature/amazonpay-chargePermission

AmazonPay Recurring Payments
Adyen · Feb 28, 2022 · 2df80b6 · 2df80b6
2 parents 87f7a67 + e525473
commit 2df80b6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 8 deletions.
diff --git 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) {
                     <OrderButton
                         amazonCheckoutSessionId={props.amazonCheckoutSessionId}
                         amount={props.amount}
+                        chargePermissionType={props.chargePermissionType}
+                        recurringMetadata={props.recurringMetadata}
                         clientKey={props.clientKey}
                         onError={props.onError}
                         publicKeyId={props.configuration?.publicKeyId}

diff --git a/packages/lib/src/components/AmazonPay/components/OrderButton.tsx b/packages/lib/src/components/AmazonPay/components/OrderButton.tsx
@@ -8,12 +8,14 @@ export default function OrderButton(props: OrderButtonProps) {
     const { i18n, loadingContext } = useCoreContext();
 
     this.createOrder = () => {
-        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
@@ -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?: {
@@ -188,6 +208,7 @@ export interface PayloadJSON {
         presentmentCurrency: Currency;
         totalOrderAmount: ChargeAmount;
     };
+    recurringMetadata?: RecurringMetadata;
     storeId: string;
     webCheckoutDetails: {
         checkoutCancelUrl?: string;
@@ -207,10 +228,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
@@ -100,13 +100,24 @@ 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,
+        recurringMetadata,
+    } = 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 }),
@@ -120,6 +131,7 @@ export function getPayloadJSON(props): PayloadJSON {
                 totalOrderAmount: amount
             }
         }),
+        ...(recurringMetadata && { recurringMetadata }),
         ...(merchantMetadata && { merchantMetadata }),
         ...(deliverySpecifications && { deliverySpecifications }),
         ...(addressDetails && { addressDetails })

diff --git a/packages/playground/src/pages/Wallets/Wallets.js b/packages/playground/src/pages/Wallets/Wallets.js
@@ -26,13 +26,22 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse =
     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 +56,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');
     }