feat: pass allowedPaymentMethods to the createButton api

google-pay · Aug 13, 2021 · 9073f06 · 9073f06
1 parent 4c7b711
commit 9073f06
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 1 deletion.
diff --git a/examples/react/src/examples/BasicExample.tsx b/examples/react/src/examples/BasicExample.tsx
@@ -31,7 +31,48 @@ export default function BasicExample(props: any): React.ReactElement {
               type: 'CARD',
               parameters: {
                 allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
-                allowedCardNetworks: ['MASTERCARD', 'VISA'],
+                allowedCardNetworks: ['MASTERCARD'],
+              },
+              tokenizationSpecification: {
+                type: 'PAYMENT_GATEWAY',
+                parameters: {
+                  gateway: 'example',
+                  gatewayMerchantId: 'exampleGatewayMerchantId',
+                },
+              },
+            },
+          ],
+          merchantInfo: {
+            merchantId: '12345678901234567890',
+            merchantName: 'Demo Merchant',
+          },
+          transactionInfo: {
+            totalPriceStatus: 'FINAL',
+            totalPriceLabel: 'Total',
+            totalPrice: props.amount,
+            currencyCode: 'USD',
+            countryCode: 'US',
+          },
+        }}
+        onLoadPaymentData={paymentRequest => {
+          console.log('Success', paymentRequest);
+        }}
+        existingPaymentMethodRequired={props.existingPaymentMethodRequired}
+        buttonColor={props.buttonColor}
+        buttonType={props.buttonType}
+        buttonLocale={props.buttonLocale}
+      />
+      <GooglePayButton
+        environment="TEST"
+        paymentRequest={{
+          apiVersion: 2,
+          apiVersionMinor: 0,
+          allowedPaymentMethods: [
+            {
+              type: 'CARD',
+              parameters: {
+                allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+                allowedCardNetworks: ['VISA'],
               },
               tokenizationSpecification: {
                 type: 'PAYMENT_GATEWAY',

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -45,6 +45,44 @@
   function updatePaymentRequests() {
     paymentRequests = {
       basic: buildPaymentRequest(),
+      mastercard: {
+        ...buildPaymentRequest(),
+        allowedPaymentMethods: [
+          {
+            type: 'CARD',
+            parameters: {
+              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+              allowedCardNetworks: ['MASTERCARD'],
+            },
+            tokenizationSpecification: {
+              type: 'PAYMENT_GATEWAY',
+              parameters: {
+                gateway: 'example',
+                gatewayMerchantId: 'exampleGatewayMerchantId',
+              },
+            },
+          },
+        ],
+      },
+      visa: {
+        ...buildPaymentRequest(),
+        allowedPaymentMethods: [
+          {
+            type: 'CARD',
+            parameters: {
+              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+              allowedCardNetworks: ['VISA'],
+            },
+            tokenizationSpecification: {
+              type: 'PAYMENT_GATEWAY',
+              parameters: {
+                gateway: 'example',
+                gatewayMerchantId: 'exampleGatewayMerchantId',
+              },
+            },
+          },
+        ],
+      },
       authorize: {
         ...buildPaymentRequest(),
         callbackIntents: ['PAYMENT_AUTHORIZATION'],
@@ -228,6 +266,32 @@
           on:error={onError} />
       </div>
     </div>
+    <div class="example">
+      <div class="title">Mastercard only</div>
+      <div class="demo">
+        <google-pay-button
+          environment="TEST"
+          button-type={buttonType}
+          button-color={buttonColor}
+          {existingPaymentMethodRequired}
+          paymentRequest={paymentRequests.mastercard}
+          on:loadpaymentdata={onLoadPaymentData}
+          on:error={onError} />
+      </div>
+    </div>
+    <div class="example">
+      <div class="title">VISA only</div>
+      <div class="demo">
+        <google-pay-button
+          environment="TEST"
+          button-type={buttonType}
+          button-color={buttonColor}
+          {existingPaymentMethodRequired}
+          paymentRequest={paymentRequests.visa}
+          on:loadpaymentdata={onLoadPaymentData}
+          on:error={onError} />
+      </div>
+    </div>
     <div class="example">
       <div class="title">Payment Authorization</div>
       <div class="demo">

diff --git a/src/lib/button-manager.ts b/src/lib/button-manager.ts
@@ -228,6 +228,7 @@ export class ButtonManager {
       buttonSizeMode: this.config.buttonSizeMode,
       buttonLocale: this.config.buttonLocale,
       onClick: this.handleClick,
+      allowedPaymentMethods: this.config.paymentRequest.allowedPaymentMethods,
     };
 
     const rootNode = element.getRootNode();
@@ -400,6 +401,7 @@ export class ButtonManager {
       config.paymentRequest.merchantInfo.merchantName,
       config.paymentRequest.merchantInfo.softwareInfo?.id,
       config.paymentRequest.merchantInfo.softwareInfo?.version,
+      config.paymentRequest.allowedPaymentMethods,
     ];
   }
 }