Using Stripe API with Flutter Dio package Flutter to Add Cards, Payment Methods, Accounts

Question

Noobish Dev here. I'm developing an app that involves processing payments between customers and a particular service, the app would take a fee and pay the service provider directly to their bank accounts. Looking for advice really or perhaps a better implementation.

Anyway, after watching some tutorials online I developed the app to use my own form to handle a customers card data and send directly to Stripes API with curl request. In this instance to attach the card to a customer account. I find that stripe requires the apps/websites be PCI compliant when handling data and to not use custom form handling for fear of retaining card data, that leaves me stuck as this particular method we use by directly interacting with the API (I'm using Dio ) is not recommended by Stripe as advised below.

App screenshot:

The snippet of code (works fine by the way):

Future<void> addCard(
      {int cardNumber,
      int month,
      int year,
      int cvc,
      String stripeId,
      String userId,
      String cardHolderName,
      String email}) async {
    Map body = {
      "type": "card",
      "card[number]": cardNumber,
      "card[exp_month]": month,
      "card[exp_year]": year,
      "card[cvc]": cvc,
      "billing_details[name]": cardHolderName,
      "billing_details[email]": email
    };
    dynamic stripeResponse;
    try {
      print('Successfully added payment method id $paymentMethodUrl');
      Dio dio = Dio();
      await dio
          .post(paymentMethodUrl,
              data: body,
              options: Options(
                  contentType: Headers.formUrlEncodedContentType,
                  headers: headers))
          .then((response) {
        print(response.data);
        stripeResponse = response;
        String paymentId = response.data['id'];
        Map stripeCustomer = {"customer": UserData.stripeID};
        try {
          dio
              .post('$paymentMethodUrl/$paymentId/attach',
                  data: stripeCustomer,
                  options: Options(
                      contentType: Headers.formUrlEncodedContentType,
                      headers: headers))
              .then((response) {
            print(response.data);
            print('Attached successfully');
          });
        } on DioError catch (e) {
        print('Error attaching card to customer: ${e.response.data['error']['message']}');
        }
      });
    } on DioError catch (e) {
      print(stripeResponse);
      print('Error adding card: ${e.response.data['error']['message']}');
    }
  }

https://stripe.com/docs/security#pci-dss-guidelines

The easiest way to be PCI compliant is as advised by Stripe:

Use one of our recommended payments integrations to collect payment information, which is securely transmitted directly to Stripe without it passing through your servers

Serve your payment pages securely using Transport Layer Security (TLS) so that they make use of HTTPS

Anyway I would appreciate it if anyone could give me some advice on this or maybe I'm misunderstanding something when it comes to compliance. I might just instead use Apple pay and Google pay if this option is not viable as I don't want to get into trouble if I'm not PCI compliant due to handing card data.

Thanks in advance.

Answer 1

As stated in this SO post :

The sensitive information governed by PCI (ie raw card data) is sent directly from the client to Stripe. Stripe creates a Payment Method to represent that data ( pm_ ) and returns that to the client so it can be referenced from there.

However, Payment Intents must be created server-side in a secure context with a secret or restricted API key, then the Payment Intent's client secret should be sent to the client to allow for client-side confirmation.

The section about validating your PCI compliance in Stripe's integration security guide has more information.

And as mentioned in the comment, you can explore using the plugins to provide all the functions you need for your app. I suggest to look into this flutter_stripe which was published by flutterstripe.io . You can also check out this blog( https://flutterstripe.medium.com/announcing-the-flutter-sdk-for-stripe-1ba2b3ee667c ) where it was mentioned about the security feature that the package could offer:

Secure by default

• SCA-Ready : The SDK automatically performs native 3D Secure authentication if needed to comply with Strong Customer Authentication regulation in Europe.
• PCI compliant : as the plugin does not handle sensitive information (such as credit card credentials) the plugin is PCI compliant by default. You can find out more about PCI compliance and why it's important here .