Use flutter_stripe for payment and subscription registration without a backend

Use flutter_stripe for payment and subscription registration without a backend

Since stripe_payment, stripe’s package for flutter, is now deprecated, I decided to use flutter_stripe, stripe’s official package for flutter. I implemented it with a backend in my work, but in this article, I’m going to write about how to register payment and subscription without a backend, just implementing the app. No backend means to use the stripe api provided by stripe from the app. I think this can be effectively used in development sites where there are no backend engineers. The implementation is just to call the stripe api, but I will post the code so that it can be used without any modification.

Table of Content

Init

Implementation of payment

Implementation of subscription registration

Tips

Conclusion

Appendix

Init

This is the implementation that is required when using flutter_strip. First, you need to set the public key, which can be obtained from the stripe dashboard.

The next step is to implement the use of the stripe api. http package is used as the http client. http package’s client instance is created and the header is created, which is required for every request. The secret key can be obtained from the stripe dashboard as well as the public key.

Implementation of payment

Payment means an on-the-spot payment. You enter your credit card information and make a payment on the spot. This requires three steps, the first step is to create a customer, which means registering a user in stripe. The second step is to create a payment intent, where the amount to be paid is specified. The third step is to enter the credit card information and complete the payment. flutter_stripe provides a payment sheet as UI. flutter_stripe provides other ways to enter credit card information, but the official recommendation is to use the payment sheet.

Implementation of customer creation

Just post the customers api. You can refer to the customers created here in the stripe dashboard.

Implementation of customer creation

Implementation of payment intent creation

Just post the payment intents api. You need to include information about the amount to be paid in the body.

Implementation of payment intent creation

Implementation of credit card information input and payment execution

Create a paymentSheet using the customer id in the return of the customers api and the client secret in the return of the payment intents api. After the initPaymentSheet, execute the presentPaymentSheet to display the credit card information input form and the payment execution button.

Implementation of credit card information input and payment execution

Payment implementation summary

The following is a summary. The order of implementation should be as follows, and it is not necessary to implement everything in one function. In this article, everything is implemented in one function for ease of explanation.

Payment implementation summary

Implementation of subscription registration

You can run recurring payments against your registered credit card. The initialization and customer creation is the same as the payment implementation. After creating the customer, we first need to create a payment method. In order to create the payment method, credit card information is required. We have not implemented a UI for inputting this information, but it will be necessary for the actual application. Second, we need to attach the payment method we just created to the customer. Thirdly, we need to set the payment method we just attached to the default payment method of the customer. In this way, the credit card registered when the payment method is created will be used for the subscription payment.

Implementation of payment method creation

Just post the payment method api. You need to include your credit card information in the body.

Implementation of payment method creation

Implementation of payment method attach

Just post the payment method attach api. You need to include the customer to be attached in the body.

Implementation of payment method attach

Implementing the default payment method setting

Just post the customers update api. You need to include payment method to be set as default in the body.

Implementing the default payment method setting

Implementation of subscription registration

Just post the subscriptions api. you need to include the customer id and the id of the pricing plan in the body. Pricing plans can be created in the stripe dashboard.

Implementation of subscription registration

The subscription registration implementation summary

In summary, this is how it works. As in the case of payment, there is no need to implement each function consecutively. In this article, I have summarized them to make it easier to explain.

The subscription registration implementation summary

Tips

When I created the payment method for subscription registration, I used the stripe api, but there is another way without using the stripe api: using the flutter_stripe DangerouslyUpdateCardDetails. However, this is not officially recommended as it may violate PCI compliance.

CardDetails _card = CardDetails(
    number: number,
    expirationYear: expirationYear,
    expirationMonth: expirationMonth,
    cvc: cvc);
await Stripe.instance.dangerouslyUpdateCardDetails(_card);
final billingDetails = BillingDetails();
final paymentMethod =
await Stripe.instance.createPaymentMethod(PaymentMethodParams.card(
  billingDetails: billingDetails,
));

Conclusion

I used the stripe api to implement payment and subscription registration just in the app, without any backend implementation. It’s easy to figure out, but it’s definitely uncomfortable to keep the api secret key in the app. If you are developing a system for a contractor, it would be better to implement a backend for security reasons. If you are an individual developer, I think the method in this article is sufficient.

Appendix

Here is the list of stripe api used in this article.

https://api.stripe.com/v1/customers

https://api.stripe.com/v1/payment_intents

https://api.stripe.com/v1/payment_methods

https://api.stripe.com/v1/payment_methods/$paymentMethodId/attach

https://api.stripe.com/v1/customers/$customerId

https://api.stripe.com/v1/subscriptions