Skip to content

Commit 8db9f32

Browse files
JlUgiaJlUgia
committed
Update readmes and add sample assets
1 parent dfe5648 commit 8db9f32

6 files changed

Lines changed: 148 additions & 13 deletions

File tree

‎pay/README.md‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,10 @@ dependencies:
2727
pay: ^1.0.11
2828
```
2929
30-
### Payment configuration
31-
Create a payment profile with the desired configuration for your payment, either using a local file or loading it from a remote server. Take a look at some examples under the [`example/assets/` folder](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/assets) and explore the documentation for a complete list of options available:
32-
* [Google Pay](https://developers.google.com/pay/api/android/reference/request-objects#PaymentDataRequest)
33-
* [Apple Pay](https://developer.apple.com/documentation/businesschatapi/applepaypaymentrequest) ([sample request](https://developer.apple.com/documentation/businesschatapi/messages_sent/interactive_messages/apple_pay_in_business_chat/sending_an_apple_pay_payment_request))
30+
Define the configuration for your payment provider(s). Take a look at the parameters available in the documentation for [Apple Pay](https://developer.apple.com/documentation/passkit/pkpaymentrequest) and [Google Pay](https://developers.google.com/pay/api/android/reference/request-objects), and explore the [sample configurations in this package](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/lib/payment_configurations.dart).
3431
3532
### Example
33+
This snippet assumes the existence a payment configuration for Apple Pay ([`defaultApplePayConfigString`](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/lib/payment_configurations.dart#L27)) and another one for Google Pay ([`defaultGooglePayConfigString`](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/lib/payment_configurations.dart#L63)):
3634
```dart
3735
import 'package:pay/pay.dart';
3836
@@ -45,7 +43,8 @@ const _paymentItems = [
4543
];
4644
4745
ApplePayButton(
48-
paymentConfigurationAsset: 'default_payment_profile_apple_pay.json',
46+
paymentConfiguration: PaymentConfiguration.fromJsonString(
47+
defaultApplePayConfigString),
4948
paymentItems: _paymentItems,
5049
style: ApplePayButtonStyle.black,
5150
type: ApplePayButtonType.buy,
@@ -57,7 +56,8 @@ ApplePayButton(
5756
),
5857
5958
GooglePayButton(
60-
paymentConfigurationAsset: 'default_payment_profile_google_pay.json',
59+
paymentConfiguration: PaymentConfiguration.fromJsonString(
60+
defaultGooglePayConfigString),
6161
paymentItems: _paymentItems,
6262
type: GooglePayButtonType.pay,
6363
margin: const EdgeInsets.only(top: 15.0),
@@ -75,6 +75,50 @@ void onGooglePayResult(paymentResult) {
7575
// Send the resulting Google Pay token to your server / PSP
7676
}
7777
```
78+
79+
### Alternative methods to load your payment configurations
80+
#### JSON strings
81+
The example above uses the `PaymentConfiguration.fromJsonString` method to load your payment configuration from a string in JSON format ([example](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/lib/payment_configurations.dart#L27)). This configuration can be retrieved from a remote location at runtime ([recommended](https://github.com/google-pay/flutter-plugin/tree/main/pay/example/lib/payment_configurations.dart#L18)) or provided at build time.
82+
83+
#### Asset files
84+
You can also place payment configurations under your `assets` folder and load them at runtime. Suppose that you add a JSON file with the name `google_pay_config.json` to your `assets` folder to configure your Google Pay integration. You can load it in your app state and use it to create a `PaymentConfiguration` object for the button:
85+
86+
```dart
87+
class _SampleAppState extends State<SampleApp> {
88+
late final PaymentConfiguration _googlePayConfig;
89+
90+
@override
91+
void initState() {
92+
super.initState();
93+
_loadConfigurationAssets();
94+
}
95+
96+
void _loadConfigurationAssets() async {
97+
final googlePayConfig =
98+
await PaymentConfiguration.fromAsset('google_pay_config.json');
99+
setState(() {
100+
_googlePayConfig = googlePayConfig;
101+
});
102+
}
103+
104+
@override
105+
Widget build(BuildContext context) {
106+
...
107+
GooglePayButton(
108+
paymentConfiguration: _googlePayConfig,
109+
paymentItems: _paymentItems,
110+
type: GooglePayButtonType.buy,
111+
margin: const EdgeInsets.only(top: 15.0),
112+
onPaymentResult: onGooglePayResult,
113+
loadingIndicator: const Center(
114+
child: CircularProgressIndicator(),
115+
),
116+
)
117+
...
118+
}
119+
}
120+
```
121+
78122
## Advanced usage
79123
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:
80124

@@ -89,10 +133,15 @@ const _paymentItems = [
89133
)
90134
];
91135
92-
Pay _payClient = Pay.withAssets([
93-
'default_payment_profile_apple_pay.json',
94-
'default_payment_profile_google_pay.json'
95-
]);
136+
final applePayConfig = PaymentConfiguration.fromJsonString(
137+
defaultApplePayConfigString)
138+
final googlePayConfig = PaymentConfiguration.fromJsonString(
139+
defaultGooglePayConfigString)
140+
141+
Pay _payClient = Pay({
142+
PayProvider.apple_pay: applePayConfig,
143+
PayProvider.google_pay: googlePayConfig
144+
});
96145
```
97146

98147
As you can see, you can add multiple configurations to your payment client, one for each payment provider supported.

‎pay/example/assets/default_apple_pay_config.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"provider": "apple_pay",
3+
"data": {
4+
"merchantIdentifier": "merchant.com.sams.fish",
5+
"displayName": "Sam's Fish",
6+
"merchantCapabilities": ["3DS", "debit", "credit"],
7+
"supportedNetworks": ["amex", "visa", "discover", "masterCard"],
8+
"countryCode": "US",
9+
"currencyCode": "USD",
10+
"requiredBillingContactFields": ["emailAddress", "name", "phoneNumber", "postalAddress"],
11+
"requiredShippingContactFields": [],
12+
"shippingMethods": [
13+
{
14+
"amount": "0.00",
15+
"detail": "Available within an hour",
16+
"identifier": "in_store_pickup",
17+
"label": "In-Store Pickup"
18+
},
19+
{
20+
"amount": "4.99",
21+
"detail": "5-8 Business Days",
22+
"identifier": "flat_rate_shipping_id_2",
23+
"label": "UPS Ground"
24+
},
25+
{
26+
"amount": "29.99",
27+
"detail": "1-3 Business Days",
28+
"identifier": "flat_rate_shipping_id_1",
29+
"label": "FedEx Priority Mail"
30+
}
31+
]
32+
}
33+
}

‎pay/example/assets/default_google_pay_config.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"provider": "google_pay",
3+
"data": {
4+
"environment": "TEST",
5+
"apiVersion": 2,
6+
"apiVersionMinor": 0,
7+
"allowedPaymentMethods": [
8+
{
9+
"type": "CARD",
10+
"tokenizationSpecification": {
11+
"type": "PAYMENT_GATEWAY",
12+
"parameters": {
13+
"gateway": "example",
14+
"gatewayMerchantId": "gatewayMerchantId"
15+
}
16+
},
17+
"parameters": {
18+
"allowedCardNetworks": ["VISA", "MASTERCARD"],
19+
"allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
20+
"billingAddressRequired": true,
21+
"billingAddressParameters": {
22+
"format": "FULL",
23+
"phoneNumberRequired": true
24+
}
25+
}
26+
}
27+
],
28+
"merchantInfo": {
29+
"merchantId": "01234567890123456789",
30+
"merchantName": "Example Merchant Name"
31+
},
32+
"transactionInfo": {
33+
"countryCode": "US",
34+
"currencyCode": "USD"
35+
}
36+
}
37+
}

‎pay/example/lib/main.dart‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,22 @@ class PaySampleApp extends StatefulWidget {
5757
}
5858

5959
class _PaySampleAppState extends State<PaySampleApp> {
60+
late final PaymentConfiguration _googlePayConfig;
61+
62+
@override
63+
void initState() {
64+
super.initState();
65+
_loadConfigurationAssets();
66+
}
67+
68+
void _loadConfigurationAssets() async {
69+
final googlePayConfig =
70+
await PaymentConfiguration.fromAsset('default_google_pay_config.json');
71+
setState(() {
72+
_googlePayConfig = googlePayConfig;
73+
});
74+
}
75+
6076
void onGooglePayResult(paymentResult) {
6177
debugPrint(paymentResult.toString());
6278
}
@@ -116,8 +132,7 @@ class _PaySampleAppState extends State<PaySampleApp> {
116132
),
117133
),
118134
GooglePayButton(
119-
paymentConfiguration: PaymentConfiguration.fromJsonString(
120-
payment_configurations.defaultGooglePay),
135+
paymentConfiguration: _googlePayConfig,
121136
paymentItems: _paymentItems,
122137
type: GooglePayButtonType.buy,
123138
margin: const EdgeInsets.only(top: 15.0),

‎pay/example/lib/payment_configurations.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
/// (as displayed in this example), we recommend you to keep this information in
2020
/// a remote location that can be accessed from your application (e.g.: a
2121
/// backend server). That way, you benefit from being able to use multiple
22-
/// payment configurations that can be updated without needing to update your
22+
/// payment configurations that can be modified without the need to update your
2323
/// application.
2424
2525
/// Sample configuration for Apple Pay. Contains the same content as the file

‎pay/example/pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ environment:
2323
flutter:
2424
uses-material-design: true
2525
assets:
26+
- assets/
2627
- assets/images/
2728

2829
dependencies:

0 commit comments

Comments
 (0)