Google Pay във Flutter

Статия тук: https://flatteredwithflutter.com/google-pay-in-flutter/

Ще разгледаме накратко:

  1. Какво е Google Pay
  2. Интегриране на Google Pay
  3. Резултати от плащането
  4. UI елементи

Какво е Google Pay

Google Pay (известен като G Pay) е платформа за „дигитален портфейл“ и система за „онлайн плащане“, разработени от Google за захранване в приложението, онлайн и лично безконтактни покупки на мобилни устройства. Потребителите в Съединените щати и Индия също могат да използват устройство с iOS, макар и с ограничена функционалност. В допълнение към това услугата също така поддържа пропуски като купони, бордни карти, лични карти на кампуса, ключове за кола, билети за събития, билети за кино, билети за обществен транспорт, карти за магазини, здравни досиета и карти за лоялност.

Как работи

Вътре в приложението, когато потребител докосне бутона Google Pay, той вижда платежен лист, който показва методите на плащане, запазени в техния акаунт в Google. Потребителите могат бързо да изберат метод на плащане, да добавят незадължителен адрес за доставка или да добавят нова информация, преди да финализират плащането.



Google Pay във Flutter 🤑👨‍💻 #googlepay #flutter #shorts
Google Pay (известен като G Pay) е платформа за дигитален портфейл и система за онлайн плащане, разработена от Google за мощност в приложението…youtube.com



  1. Потребителят докосва бутона G Pay и вижда платежен лист със списък на поддържаните методи на плащане.
  2. Потребителят избира метод на плащане и G Pay връща токен за плащане за избрания метод на приложението.
  3. Приложението изпраща токена за плащане към бекенда
  4. Бекендът обработва покупката и изпраща токена за плащане до доставчика на платежни услуги (PSP)

G Pay се интегрира с тези платежни процесори (PSP).

Интегриране на Google Pay

Ще търсим пакета pay за интегриране на Google Pay. Този пакет се грижи както за Apple Pay, така и за Google Pay.

Под капака този пакет използва Google Pay API. Нещата, необходими за настройка на Pay API, в крайна сметка ще бъдат необходими за интегриране на пакета pay.

Настройка:

  • Вижте техните изисквания за интеграция „тук“. Основно споменава тяхната среда, насоки на марката и други неща.
  • Разгледайте тяхната заявка за производствен достъп тук, където настройвате достъп до API на Google Wallet и други контролни списъци.

Сега идва настройката на вашия код.

  • Вътрешно приложният програмен интерфейс (API) на Google изисква следната зависимост от Gradle (от родния за android), която се обработва от pay package
implementation "com.google.android.gms:play-services-wallet:18.0.0"

Следователно трябва да променим следното в build.gradle на вашето приложение

minSdkVersion 19
compileSdkVersion 31
  • Включете пакета във вашия pubspec.yaml
# pubspec.yaml
dependencies:
  pay: ^1.0.10

Сега имате достъп до GooglePayButton и ApplePayButton

GooglePayButton

Това е джаджа за показване на бутона Google Pay според правилата и ограниченията, посочени в PayButton.

Тази джаджа предоставя алтернативен път за интегриране, базиран на UI, който обвива API извикванията на библиотеките за плащане и ги включва като част от жизнения цикъл на джаджата. Следователно:

  • Приспособлението се показва само ако методът Pay.userCanPay върне true.

Например, в случай че кодът е изпълняван на iOS, вместо това ще се покаже ApplePayButton (при условие че сте настроили ApplePay конфигурация).

  • Докосването на бутона автоматично задейства метода Pay.showPaymentSelector, който стартира процеса на плащане.

Ето как изглежда GooglePayButton.

Забележка: GooglePayButton се разширява от PayButton

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(),
  ),
)

Конфигурация на плащане

В горния фрагмент виждаме PaymentConfiguration, което е задължителен параметър. Този параметър съдържа информация за платежна транзакция.

Той зарежда конфигурационната информация, необходима за платежната транзакция, която се основава на източника. Има 2 налични опции за това:

  • от отдалечен сървър като този
PaymentConfiguration.fromJsonString(
    '{"provider": "apple_pay", "data": {}}');
  • от папката с активи като тази

Вътрешна конфигурация за плащане

  • PaymentConfiguration е JSON, в който всеки параметър означава обект на заявка според API на Google Pay.
{
   "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"
      }
   }
}
  • provider : Това може да бъде apple_pay или google_pay
  • data : Това е ядрото на PaymentRequest, което само по себе си е JSONObject
  • environment : Това може да бъде ТЕСТ или ПРОИЗВОДСТВО

Има набор от тестови карти, предоставен от Google, който може да се използва само в ТЕСТОВАсреда. За да получите достъп до тези тестови карти, присъединете се тук

Тестовата среда поддържа

  1. Картови мрежи Visa, Mastercard, Discover и Amex
  2. PAN_ONLY и CRYPTOGRAM_3DS методи за удостоверяване
  • apiVersion : Стойността е 2 за тази спецификация.
  • apiVersionMinor : Стойността е 0 за тази спецификация.
  • allowedPaymentMethods : Това е от тип PaymentMethod и указва поддръжката за един или повече методи на плащане, поддържани от G Pay API.

Начин на плащане

Това включва 3 свойства:

  1. type : CARDе единствената поддържана стойност за този параметър

2. tokenizationSpecification Това е от тип TokenizationSpecificationи има две свойства

Спецификация за токенизиране

  • type : За CARD начин на плащане използвайте PAYMENT_GATEWAY.
  • parameters : Състои се от обект Gateway, който има две свойства gateway и gatewayMerchantId.

Забележка: Стойностите за Gateway зависят от поддържания gateway

3. parameters Това е от тип CardParameterи има 2 задължителни и 5 незадължителни параметъра

CardParameter

  • allowedAuthMethods (задължително): Низов масив от полета, които се поддържат за удостоверяване на транзакция с карта. PAN_ONLY и CRYPTOGRAM_3DS

Забележка: Можем да използваме тези 2 само в TEST среда

  • allowedCardNetworks (задължително): Една или повече картови мрежи, които вие и Google Pay API поддържате. напр. AMEX, DISCOVER, INTERAC, JCB, MASTERCARD, VISA
  • billingAddressRequired : Задайте на true, ако имате нужда от адрес за фактуриране. Това може да увеличи триенето.
  • billingAddressParameters : Това е от тип BillingAddressParametersи има 2 параметъра

Параметри на BillingAddress

  • format : Формат на адрес за фактуриране, който е необходим за завършване на транзакцията. напр. MIN(Име, код на държавата и пощенски код) и ПЪЛЕН(дълъг списък от параметри)
  • phoneNumberRequired : Задайте на true, ако се изисква телефонен номер за обработка на транзакцията.
  • merchantInfo : Този обект MerchantInfo предоставя информация за търговеца, който изисква данни за плащане и се състои от

merchantName: Това име се изобразява в платежния лист. В среда TEST или ако търговецът не е разпознат, на платежния лист се показва съобщение „Плащане на непроверен търговец“.

  • transactionInfo : Този обект TransactionInfo се използва за представяне на диалогов прозорец за оторизация на плащане. Състои се от

currencyCode (задължително) :ISO 4217 Азбучен код на валутата

countryCode:ISO 3166–1 alpha-2 код на държавата, където се обработва транзакцията.

Резултати от плащането

След като се щракне върху бутона G Pay, той задейства представянето на платежния лист. След като потребителят направи избор, листът се затваря и получавате резултата в onPaymentResult

{
   "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"
   }
}
  • apiVersion : Стойността е 2 за тази спецификация
  • apiVersionMinor : Стойността е 0 за тази спецификация
  • paymentMethodData : Тази стойност е от тип PaymentMethodDataи се състои от 4 параметъра

PaymentMethodData

Ако изборът е успешен, резултатът се попълва с обект PaymentData, включващ подходяща информация за избрания метод на плащане:

  • type : Тип PaymentMethod, който е избран в листа за плащане на G Pay
  • description : Това съдържа съобщението за потребителя, описващо метода на плащане
  • tokenizationData : Тази стойност е от тип PaymentMethodTokentizationDataи се състои от 2 параметъра

type : Тип токенизация, приложен към избрания метод на плащане

token : Генериран токен за метод на плащане. напр. PAYMENT_GATEWAY, DIRECT

  • info : Състои се от 3 параметъра billingAddress, cardDetails,и cardNetwork

Адресът за фактуриране присъства под формата на Адресен обект. CardDetails присъстват в низ, който представлява детайлите на картата. Тази стойност обикновено е последните четири цифри от избрания номер на платежна сметка.

CardNetwork също е низ, който представлява мрежата от платежни карти на избраното плащане. Тази стойност е една от стойностите, присъстващи във формата на allowedCardNetworks в CardParameters.

Резултат след плащане

Вече можете да използвате тази информация за метода на плащане, за да извършите действителната транзакция. Например, можете да получите tokenizationData от горния отговор и да извлечете token от него.

След това използвайте този токен, за да извършите плащане през вашия платежен портал. Разгледайте списъка с поддържани процесори, за да научите повече за конкретни подробности за внедряването на всеки процесор.

Елементи на потребителския интерфейс

GooglePayButton излага един от параметрите, наречен type (който е enum) в своята дефиниция. Можем да играем с този параметър, за да покажем бутона според изискванията. Предлаганите опции са следните:

  1. GooglePayButtonType.pay (това е стойността по подразбиране)
  2. GooglePayButtonType.book
  3. GooglePayButtonType.buy
  4. GooglePayButtonType.checkout
  5. GooglePayButtonType.donate
  6. GooglePayButtonType.order
  7. GooglePayButtonType.plain
  8. GooglePayButtonType.subscribe

Например, в случай че искате типът да бъде GooglePayButtonType.subscribe, тогава резултатът ще бъде

Ако предпочитате да имате повече контрол върху всяка отделна заявка и бутона поотделно, можете да създадете клиент за плащане и да добавите бутоните към оформлението си независимо, като използвате RawGooglePayButton.

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

Резултатът от този бутон е

След като потребителят щракне върху този бутон, можете да инициирате заявката, като използвате Pay.withAssets, който е алтернатива на обект Pay със списък от конфигурации във формат String.

// 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,
  );  
}

Отговорът, който е токенът на Google Pay, може да бъде изпратен до вашия сървър/PSP

Други статии:



Как да добавите Flutter към приложението за Android
Как да добавите Flutter към Android Applevelup.gitconnected.com





Използване на Mockito във Flutter
Използване на Mockito във Fluttermedium.com





Dart на AWS Lambda
Dart на AWS Lambdamedium.com



Source Code

Кодиране на ниво нагоре

Благодарим ви, че сте част от нашата общност! Преди да тръгнеш:

🚀👉 Присъединете се към колектива за таланти Level Up и намерете невероятна работа