Google Pay in Flutter
Tags: flutter, productivity, programming, dart
Published: 2022-08-20 03:36:45

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p>We will cover briefly:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>What is Google Pay</li><li>Integration of Google Pay</li><li>Payment results</li><li>UI elements</li></ol>
<!-- /wp:list -->

{% youtube gsDVmry-e8M %}

<!-- wp:heading {"level":3} -->
<h3>What is Google&nbsp;Pay</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Google Pay</strong> (known as <strong>G Pay</strong>) is a <a href="https://en.wikipedia.org/wiki/Digital_wallet" rel="noreferrer noopener" target="_blank">digital wallet</a> platform and <a href="https://en.wikipedia.org/wiki/E-commerce_payment_system" rel="noreferrer noopener" target="_blank">online payment</a> system developed by Google to power in-app, online, and in-person <a href="https://en.wikipedia.org/wiki/Contactless_payment" rel="noreferrer noopener" target="_blank">contactless purchases</a> on mobile devices. Users in the United States and India can also use an iOS device, albeit with limited functionality. In addition to this, the service also supports passes such as coupons, boarding passes, campus ID cards, car keys, event tickets, movie tickets, public transportation tickets, store cards, health records, and loyalty cards.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/0*Ks13MatS9oAHG1pK" alt="Google Pay logo"/><figcaption>Google Pay&nbsp;logo</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4><strong>How it&nbsp;works</strong></h4>
<!-- /wp:heading -->

{% youtube oYtSnXq5xVA %}

<!-- wp:paragraph -->
<p>Inside the app, when a user taps the Google Pay button, they see a payment sheet that displays the payment methods saved to their Google Account. Users can quickly select a payment method, add an optional shipping address, or add new information before finalizing the payment.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*rZOj9-Q1oGbxo7qLKWHbfg.png" alt="Google Pay payment flow"/><figcaption>Google Pay payment&nbsp;flow</figcaption></figure>
<!-- /wp:image -->

<!-- wp:list {"ordered":true} -->
<ol><li>The user taps the G Pay button and sees a payment sheet with a list of supported payment methods.</li><li>The user selects a payment method and G Pay returns a payment token for the selected method to the app.</li><li>The app submits the payment token to the backend</li><li>The backend processes the purchase and sends the payment token to the Payment Service Provider (PSP)</li></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>G Pay</strong> integrates with <a href="https://developers.google.com/pay/api#participating-processors" rel="noreferrer noopener" target="_blank">these payment processors</a> (PSP).</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":3} -->
<h3>Integration of Google&nbsp;Pay</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will be looking to the <a href="https://pub.dev/packages/pay" rel="noreferrer noopener" target="_blank">pay</a> package for integration of Google Pay. This package takes care of both <a href="https://www.apple.com/sg/apple-pay/" rel="noreferrer noopener" target="_blank">Apple Pay</a> and <a href="https://pay.google.com/" rel="noreferrer noopener" target="_blank">Google Pay</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Under the hood, this package uses the <a href="https://developers.google.com/pay/api" rel="noreferrer noopener" target="_blank">Google Pay API</a>. The things required to set up the Pay API will eventually be required to integrate the <a href="https://pub.dev/packages/pay" rel="noreferrer noopener" target="_blank">pay</a> package</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Setup:</strong></h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Check out their integration requirements <a href="https://developers.google.com/pay/api/android/overview" rel="noreferrer noopener" target="_blank">here</a>. It basically mentions their environments, brand guidelines, and other stuff.</li><li>Check out their request for production access <a href="https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access" rel="noreferrer noopener" target="_blank">here</a>, wherein you set up access to Google Wallet API and other checklists.</li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Now comes the setting up of your code.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li>Internally Google API requires the following Gradle dependency (<strong>from android native</strong>) which is handled by the </li></ul>
<!-- /wp:list -->

```kotlin
implementation "com.google.android.gms:play-services-wallet:18.0.0"
```

<!-- wp:paragraph -->
<p>Hence, we need to change the following in the <code>build.gradle</code> of your app</p>
<!-- /wp:paragraph -->

```kotlin
minSdkVersion 19
compileSdkVersion 31
```
<!-- wp:list -->
<ul><li>Include the <a href="https://pub.dev/packages/pay" rel="noreferrer noopener" target="_blank">package</a> inside your <code>pubspec.yaml</code></li></ul>
<!-- /wp:list -->

```yaml
# pubspec.yaml
dependencies:
  pay: ^1.0.10
```

<!-- wp:paragraph -->
<p>ess to the <a href="https://pub.dev/documentation/pay/latest/pay/GooglePayButton-class.html" target="_blank" rel="noreferrer noopener">GooglePayButton</a> and the <a href="https://pub.dev/documentation/pay/latest/pay/ApplePayButton-class.html" target="_blank" rel="noreferrer noopener">ApplePayButton</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>GooglePayButton</h4>
<!-- /wp:heading -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*nemAUFeDd-dH97qmeOecTg.png" alt="Google Pay Button"/><figcaption>Google Pay&nbsp;Button</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It’s a widget to show the Google Pay button according to the rules and constraints specified in <a href="https://pub.dev/documentation/pay/latest/pay/PayButton-class.html" rel="noreferrer noopener" target="_blank">PayButton</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This widget provides an alternative UI-based integration path that wraps the API calls of the payment libraries and includes them as part of the lifecycle of the widget. Hence:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>The widget only shows if the <a href="https://pub.dev/documentation/pay/latest/pay/Pay/userCanPay.html" rel="noreferrer noopener" target="_blank">Pay.userCanPay</a> method returns true.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For instance, in case the code was running on iOS, then instead <strong>ApplePayButton</strong> will be shown (provided you have set up the <a href="https://developer.apple.com/documentation/passkit/apple_pay/setting_up_apple_pay_requirements" rel="noreferrer noopener" target="_blank">ApplePay configuration</a>).</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>And tapping the button automatically triggers the <a href="https://pub.dev/documentation/pay/latest/pay/Pay/showPaymentSelector.html" rel="noreferrer noopener" target="_blank">Pay.showPaymentSelector</a> method which starts the payment process.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This is what the <strong>GooglePayButton</strong> looks like.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: GooglePayButton</p></blockquote>
<!-- /wp:quote -->

```dart
GooglePayButton(
  paymentConfigurationAsset: 'google_pay_config.json',
  paymentItems: _paymentItems,
  style: GooglePayButtonStyle.black,
  type: GooglePayButtonType.pay,
  margin: const EdgeInsets.only(top: 15.0),
  onPaymentResult: onGooglePayResult,
  loadingIndicator: const Center(
    child: CircularProgressIndicator(),
  ),
)
```

<!-- wp:heading {"level":4} -->
<h4>PaymentConfiguration</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the above snippet, we see <code>PaymentConfiguration</code> which is a required parameter. This parameter holds the information about a payment transaction.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It loads the configuration information needed for the payment transaction, which is based on the source. There are 2 options available for this:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>from a remote server</li></ul>
<!-- /wp:list -->

```dart
PaymentConfiguration.fromJsonString(
    '{"provider": "apple_pay", "data": {}}');
```

<!-- wp:list -->
<ul><li> folder like this</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*73ep_gQo_uxMH9ixuyp5EQ.png" alt="PaymentConfiguration from asset"/><figcaption>PaymentConfiguration from&nbsp;asset</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Inside PaymentConfiguration</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>The PaymentConfiguration is a JSON in which each parameter stands for a request object as per the Google Pay</li></ul>
<!-- /wp:list -->

```json
{
   "provider":"google_pay",
   "data":{
      "environment":"TEST",
      "apiVersion":2,
      "apiVersionMinor":0,
      "allowedPaymentMethods":[
         {
            "type":"CARD",
            "tokenizationSpecification":{
               "type":"PAYMENT_GATEWAY",
               "parameters":{
                  "gateway":"example",
                  "gatewayMerchantId":"gatewayMerchantId"
               }
            },
            "parameters":{
               "allowedCardNetworks":[
                  "VISA",
                  "MASTERCARD"
               ],
               "allowedAuthMethods":[
                  "PAN_ONLY",
                  "CRYPTOGRAM_3DS"
               ],
               "billingAddressRequired":true,
               "billingAddressParameters":{
                  "format":"FULL",
                  "phoneNumberRequired":true
               }
            }
         }
      ],
      "merchantInfo":{
         "merchantId":"01234567890123456789",
         "merchantName":"Example Merchant Name"
      },
      "transactionInfo":{
         "countryCode":"US",
         "currencyCode":"USD"
      }
   }
}
```

<!-- wp:list -->
<ul><li>n either be <strong>apple_pay</strong> or <strong>google_pay</strong></li><li><code>data</code> : This is the core of the PaymentRequest which is a JSONObject itself</li><li><code>environment</code> : This can either be <strong>TEST </strong>or <strong>PRODUCTION</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>There is a Test Card Suite provided by Google, which can only be used inside the <strong>TEST </strong>environment. For getting access to these test cards, join <a href="https://groups.google.com/forum/#!forum/googlepay-test-mode-stub-data" rel="noreferrer noopener" target="_blank"><strong>here</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The test environment supports the&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Visa, Mastercard, Discover, and Amex card networks</li><li><code>PAN_ONLY</code> and <code>CRYPTOGRAM_3DS</code> authentication methods</li></ol>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><code>apiVersion</code>&nbsp;: The value is <code>2</code> for this specification.</li><li><code>apiVersionMinor</code>&nbsp;: The value is <code>0</code> for this specification.</li><li><code>allowedPaymentMethods</code>&nbsp;: This is of type <strong>PaymentMethod</strong> and specifies the support for one or more payment methods supported by the G Pay API.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>PaymentMethod</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This comprises 3 properties:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><code>type</code>&nbsp;: <strong>CARD </strong>is the only supported value for this parameter</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>2. <code>tokenizationSpecification</code> This is of type <strong>TokenizationSpecification </strong>and has two properties</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>TokenizationSpecification</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>type</code>&nbsp;: For <code>CARD</code> payment method, use PAYMENT_GATEWAY.</li><li><code>parameters</code>&nbsp;: Comprises a Gateway object which has two properties <strong>gateway</strong> and <strong>gatewayMerchantId.</strong></li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: The values for Gateway depend on the supported <a href="https://developers.google.com/pay/api/android/reference/request-objects#gateway" rel="noreferrer noopener" target="_blank">gateway</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>3. <code>parameters</code> This is of type <strong>CardParameter </strong>and has <strong>2 required</strong> and <strong>5 optional</strong> parameters</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>CardParameter</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>allowedAuthMethods</code> (<strong>required</strong>): A string array of fields that are supported to authenticate a card transaction. <strong>PAN_ONLY</strong> and <strong>CRYPTOGRAM_3DS</strong></li></ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Note: We can only use these 2 under TEST environment</p></blockquote>
<!-- /wp:quote -->

<!-- wp:list -->
<ul><li><code>allowedCardNetworks</code> (<strong>required</strong>): One or more card networks that you and Google Pay API support. eg <strong>AMEX, DISCOVER, INTERAC, JCB, MASTERCARD, VISA</strong></li><li><code>billingAddressRequired</code>&nbsp;: Set to <code>true</code> if you require a billing address. This can increase friction.</li><li><code>billingAddressParameters</code>&nbsp;: This is of type <strong>BillingAddressParameters </strong>and has 2 parameters</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>BillingAddressParameters</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>format</code>&nbsp;: Billing address format which is required to complete the transaction. eg <strong>MIN(</strong>Name, country code, and postal code<strong>)</strong> and <strong>FULL </strong>(long list of parameters)</li><li><code>phoneNumberRequired</code>&nbsp;: Set to <code>true</code> if a phone number is required to process the transaction.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><code>merchantInfo</code> : This <strong>MerchantInfo</strong> object provides information about the merchant that requests payment data and comprises of </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>merchantName</strong>: This name is rendered in the payment sheet. In the <code>TEST</code> environment, or if a merchant isn't recognized, a “Pay Unverified Merchant” message is displayed on the payment sheet.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>transactionInfo</code>&nbsp;: This <strong>TransactionInfo</strong> object is used to present a payment authorization dialog. It comprises of</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>currencyCode (required)&nbsp;: </strong>ISO 4217 Alphabetic currency code</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>countryCode: </strong>ISO 3166–1 alpha-2 country code where the transaction is processed.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Payment Results</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once the G Pay button is clicked, it triggers the presentation of the payment sheet. Once the user makes a selection, the sheet closes a</p>
<!-- /wp:paragraph -->

```json
{
   "apiVersion":2,
   "apiVersionMinor":0,
   "paymentMethodData":{
      "description":"YOUR CARD DESCRIPTION",
      "info":{
         "billingAddress":{
            "address1":"YOUR ADDRESS1",
            "address2":"YOUR ADDRESS2",
            "address3":"",
            "administrativeArea":"YOUR AREA",
            "countryCode":"YOUR COUNTRY",
            "locality":"YOUR LOCALITY",
            "name":"YOUR NAME",
            "phoneNumber":"YOUR PHONE NUMBER",
            "postalCode":YOUR POSTAL CODE,
            "sortingCode":""
         },
         "cardDetails":YOUR CARD DETAILS,
         "cardNetwork":"VISA"
      },
      "tokenizationData":{
         "token":"examplePaymentMethodToken",
         "type":"PAYMENT_GATEWAY"
      },
      "type":"CARD"
   }
}
```

<!-- wp:list -->
<ul><li><code>ion</code> : The value is <code>2</code> for this specification</li><li><code>apiVersionMinor</code> : The value is <code>0</code> for this specification</li><li><code>paymentMethodData</code> : This value is of type <strong>PaymentMethodData </strong>and comprises 4 parameters</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>PaymentMethodData</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If the selection is successful, the result is fulfilled with a <a href="https://developers.google.com/pay/api/android/reference/object#PaymentData" rel="noreferrer noopener" target="_blank">PaymentData</a> object including relevant information about the payment method selected:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>type</code>&nbsp;: PaymentMethod type which was selected in the G Pay payment sheet</li><li><code>description</code>&nbsp;: This contains the user-facing message describing the payment method</li><li><code>tokenizationData</code>&nbsp;: This value is of type <strong>PaymentMethodTokentizationData </strong>and consists of 2 parameters</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><code>type</code>&nbsp;: Type of tokenization applied to the selected payment method</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>token</code>&nbsp;: Generated payment method token. eg <strong>PAYMENT_GATEWAY</strong>, <strong>DIRECT</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>info</code>&nbsp;: This comprises 3 parameters <strong>billingAddress, cardDetails, </strong>and <strong>cardNetwork</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>The billing address is present in the form of an <a href="https://developers.google.com/pay/api/android/reference/response-objects#Address" rel="noreferrer noopener" target="_blank">Address Object</a>. CardDetails are present in a string that represents the details of the card. This value is commonly the last four digits of the selected payment account number.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CardNetwork is also a string that represents the payment card network of the selected payment. This value is one of the values present inside the format of <code>allowedCardNetworks</code> in <a href="https://developers.google.com/pay/api/android/reference/request-objects#CardParameters" rel="noreferrer noopener" target="_blank">CardParameters</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>After Payment&nbsp;Result</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can now use this payment method information to perform the actual transaction. For instance, you can get the <code>tokenizationData</code> from the above response and extract the <code>token</code> from it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, use this token to perform payment through your payment gateway. Check out the <a href="https://developers.google.com/pay/api/#participating-google-pay-processors" rel="noreferrer noopener" target="_blank">list of supported processors</a> to find out more about specific implementation details on each processor.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>UI Elements</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>GooglePayButton exposes one of the parameters called <code>type</code> (which is an enum) inside its definition. We can play with this param in order to display the Button as per the requirements. Following are the options provided:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>GooglePayButtonType.pay (this is the default value)</li><li>GooglePayButtonType.book</li><li>GooglePayButtonType.buy</li><li>GooglePayButtonType.checkout</li><li>GooglePayButtonType.donate</li><li>GooglePayButtonType.order</li><li>GooglePayButtonType.plain</li><li>GooglePayButtonType.subscribe</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For instance, in case you want the type to be <code>GooglePayButtonType.subscribe</code> then the result would be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*Y3Mt4ZVjyKWXGIKTQdMwDg.png" alt="Subscribe with GPay"/><figcaption>Subscribe with&nbsp;GPay</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you prefer to have more control over each individual request and the button separately, you can instantiate a payment client and add the buttons to your layout independently, using <a href="https://pub.dev/documentation/pay_android/latest/pay_android/RawGooglePayButton-class.html" target="_blank" rel="noreferrer noopener">RawGooglePayButton</a>.</p>
<!-- /wp:paragraph -->

```dart
RawGooglePayButton(
  onPressed: onGooglePayPressed,
  style: GooglePayButtonStyle.white,
  type: GooglePayButtonType.plain,
)
```

<!-- wp:paragraph -->
<p>The result of this button is</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://cdn-images-1.medium.com/max/1600/1*T8ZGoo2ZCW2fAhGzXD_DQQ.png" alt="RawGooglePayButton"/><figcaption>RawGooglePayButton</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once the user clicks this button, you can initiate the request using the <a href="https://pub.dev/documentation/pay/latest/pay/Pay/Pay.withAssets.html" target="_blank" rel="noreferrer noopener">Pay.withAssets</a> which is an alternative to a <a href="https://pub.dev/documentation/pay/latest/pay/Pay-class.html" target="_blank" rel="noreferrer noopener">Pay</a> object with</p>
<!-- /wp:paragraph -->

```dart
// PayClient
Pay _payClient = Pay.withAssets([
  'YOUR_GOOGLE_PAY_JSON_FILE',
])
// On the Button Pressed
void onGooglePayPressed() async {
  final result = await _payClient.showPaymentSelector(
    provider: PayProvider.google_pay,
    paymentItems: _paymentItems,
  );  
}
```

<!-- wp:paragraph -->
<p>The response which is the Google Pay token can be sent to your server / PSP</p>
<!-- /wp:paragraph -->

{% youtube gsDVmry-e8M %}

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://github.com/AseemWangoo/dynamism/tree/feature/gpay" target="_blank"><em>Source code.</em></a>

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>