Billing Administration For Your Subsequent SaaS Concept Utilizing Stripe And Azure Capabilities

To observe the steps on this tutorial, it’s best to have the next:

a Stripe account (you may create one without cost and use the take a look at mode to keep away from incurring any expenses whereas following the steps on this article);
a fundamental understanding of JavaScript and React;
an Auth0 account (you may enroll for a free one).

Introduction

Delivering an answer to customers by way of software program as a service (Saas) usually entails making use of cloud suppliers to host and ship your total infrastructure, normally comprising a again finish and a front-end consumer. To offset the fees incurred out of your cloud suppliers, a correct billing mannequin to your customers is required in sure circumstances. In different situations, you may need services or products that you simply wish to promote.

The 2 purposes within the aforementioned situations share a practical requirement, which is the means to course of the person’s fee. To realize this, the developer might leverage an exterior fee infrastructure, similar to Stripe, Sq., or Amazon Pay, amongst many others.

On this article, we’ll have a look at Stripe and use its REST API by way of Stripe’s Node.js package deal to construct an API layer comprising Azure Capabilities apps that may be executed by an HTTP set off from an internet, cell, or desktop consumer. The API layer and the endpoints accessible by way of every of the features are depicted within the diagram beneath.

Be aware: An Azure Capabilities app is a person serverless perform deployed and managed utilizing the Azure Capabilities service. As depicted within the diagram beneath, a single challenge can comprise a number of Azure Capabilities apps.

After constructing the API, we’ll clone an present net utility, constructed utilizing React to show artwork work on the market. The APIs above shall be used to retrieve the work as particular person merchandise, and the opposite endpoints shall be used to deal with funds.

Be aware: Whereas this text makes use of Azure Capabilities as a supplier of serverless features, you may reuse the logic in your most popular supplier, similar to AWS’ Lambda or Google’s Cloud Capabilities.

Stripe Objects

Earlier than going additional, we should always perceive the Stripe objects that we’ll be creating on this article and what they symbolize. Beneath is an inventory of the 5 objects we shall be working with:

subscription
A subscription object is created to cost customers at intervals specified by the billing_period within the worth object connected to the product. On this tutorial, we could have a product with a recurring worth sort, and we’ll subscribe customers to it utilizing the subscription object.

product
A product object is used to symbolize a single merchandise or service being bought, and the worth of the product is saved within the worth object. On this article, we’ll create a product utilizing Stripe’s admin dashboard, then retrieve it by way of the Stripe API.

worth
The value object is used to carry the price-related particulars of a product, similar to foreign money, worth, and billing cycle. On this article, we’ll once more create the worth object utilizing Stripe’s admin dashboard, then retrieve it by way of the Stripe API.

fee methodology
A payment_method object on Stripe is used to carry a buyer’s fee particulars. On this tutorial, we’ll create a fee methodology on every transaction and use it along with a payment_intent object.

fee intent
A payment_intent object is created to trace the fee for a product from when it was created to when the fee is lastly acquired. Every payment_intent object comprises a standing discipline to document the stage at which the fee is. On this article, we’ll use a payment_intent when a person purchases a product with a one-time pricing sort.

Making a Stripe Profile for Your Enterprise Concept

Step one to utilizing Stripe is to create an account along with your e mail deal with and a password, utilizing Stripe’s on-line dashboard.

Making a Stripe account will launch the brand new enterprise in take a look at mode. We are able to liken take a look at mode to your native growth mode, as a result of it lets you create Stripe objects and take a look at them utilizing take a look at bank cards supplied by Stripe, with out incurring expenses.

As proven within the Stripe dashboard for the pattern utility beneath, you may fill in an account identify and different particulars to customise your service.

The picture above reveals the dashboard for our newly created account. Be aware the highlighted field within the picture above, as a result of the part comprises the keys that you’d use when programmatically working with the Stripe account both by way of the API or a supported consumer library.

Be aware: Retailer the key key in a safe notepad, as a result of we shall be utilizing them when working with Stripe by way of a Node.js package deal from an Azure perform within the subsequent part.

Creating Pattern Merchandise on Stripe

To create a product object in Stripe, we are able to both use the REST API or Stripe’s net admin dashboard. In our case, the appliance’s proprietor is the only supervisor of the merchandise being bought; therefore, we’ll use Stripe’s admin dashboard to create some pattern merchandise to be displayed within the demo utility.

Be aware: When utilizing Stripe’s Node.js package deal, the product methodology is used to carry out CRUD operations on a product object.

Utilizing the highest navigation bar within the Stripe dashboard’s dwelling web page, click on the “Merchandise” tab to navigate to the “Merchandise” web page. On the “Merchandise” web page, click on the “Create Product” button on the prime to create your first product on this Stripe enterprise account.

On the web page for making a product, write “Gallery Subscription” within the “Identify” enter discipline. Write some temporary textual content within the “Description” enter discipline, for use because the product data. And put “150” within the “Value” enter discipline, for use as the worth of the brand new product, as proven beneath.

Be aware: It’s also possible to click on the “Picture” field on the “Create Product” web page to choose a picture out of your gadget to make use of because the picture of the product.

The picture beneath reveals the enter fields on the “Create Product” web page for the pattern product we’re creating.

From the picture above, we are able to see that the “Recurring” possibility within the “Pricing particulars” is chosen. Because of this when a person is subscribed to this product, Stripe will robotically try and renew the subscription for the product on the finish of the “billing interval” specified within the “Pricing particulars” secton proven above. Click on the “Save Product” button to avoid wasting and proceed.

After saving the product, you may be redirected again to the “Merchandise” web page. Click on the “Create Product” button once more to create a product, specifying completely different data for the “Identify”, “Description”, and “Pricing particulars”. This time, choose the “One time” field within the “Pricing particulars” to allow a person to buy this merchandise as soon as with out being charged once more for it.

The picture above reveals a brand new product being created with a “one-time” worth sort. Discover that the “Billing interval” dropdown menu is eliminated when the “One time” possibility is chosen, in contrast to the primary product that we created with a “Recurring” pricing sort.

Be aware: You’ll be able to proceed to create extra merchandise with completely different names, descriptions, and pricing particulars, to populate the merchandise in your Stripe enterprise account.

Creating Azure Capabilities

Azure Capabilities are features supplied by Azure for managing serverless event-driven code that may be executed by way of an outlined occasion set off. All Azure features that we’ll create on this article will use the HTTP set off, which permits a perform to be triggered by making an HTTP request to the perform’s URL endpoint.

All programmatic operations with Stripe on this article shall be performed utilizing Stripe’s npm library for a Node.js atmosphere. Serverless features are used on this article to cowl use circumstances for small purposes, utilizing a JAMstack structure with no back-end service.

Azure features will be developed both by way of the Azure portal or regionally in your pc. All Azure features on this article shall be developed and executed regionally utilizing Azure’s Core Instruments command-line interface (CLI). Execute the command beneath to put in Azure’s Core Instruments globally in your pc utilizing npm.

npm i -g azure-functions-core-tools@3 –unsafe-perm true

Subsequent, run the instructions beneath to create a brand new challenge listing to retailer the Azure Capabilities information and to bootstrap the Azure Capabilities challenge utilizing the Core Instruments CLI.

# Create a brand new listing
mkdir stripe-serverless-api

# Become new listing
cd stripe-serverless-api

# Bootstrap Azure Capabilities challenge
func new –language=’javascript’ –worker-runtime=’node’ –template=”HTTP set off”
–name=”merchandise”

The instructions above will create a stripe-serverless-api challenge listing in your pc. Additionally, utilizing the parameters handed to the Core Instruments CLI, we created an Azure Capabilities app with an HTTP set off template utilizing a Node.js runtime with JavaScript.

We are able to begin our new Azure perform from the CLI to take heed to HTTP requests by way of localhost on port 5050.

Be aware: When utilizing the HTTP set off for an Azure Capabilities app, the perform will be invoked by way of the perform app’s identify appended to the endpoint. An instance of the merchandise perform app created above is <FUNCTIONS_ENDPOINT>/merchandise.

func begin -p 5050

Earlier than we start implementing the Azure features, let’s set up the 2 dependencies beneath, for use throughout the Azure features.

yarn add stripe dotenv

Stripe’s Node.js package deal, put in above, shall be used to work together with the Stripe API. And dotenv shall be used to load Stripe’s secret credentials, used within the Azure features that shall be created subsequent.

Create a .env file to retailer the Stripe credentials copied from the Stripe dashboard within the format beneath, changing the placeholder in angled brackets with the suitable worth.

// .env

STRIPE_SECRET_KEY=<STRIPE_SECRET_KEY>

The Stripe credentials saved above shall be used to authenticate the Stripe package deal with the Stripe API. These credentials are delicate and ought to be privately saved. To stop them from getting pushed when the complete challenge is pushed to a GitHub repository, create a .gitignore file and add the .env file identify.

// .gitignore
.env

At this level, the Azure Capabilities challenge is absolutely arrange, and we are able to now proceed to construct the person apps throughout the challenge. We are going to proceed with implementing the logic within the Azure Capabilities apps, beginning with the merchandise perform app.

Merchandise Perform

The aim of this Azure perform is to just accept a GET HTTP request, after which reply with JSON information containing all merchandise within the Stripe account.

Utilizing your code editor, open the index.js file within the merchandise listing that was made if you created the Azure Capabilities challenge. Add the code block beneath to the index.js file to retrieve all merchandise created in Stripe.

require(“dotenv”).config();

const stripe = require(“stripe”)(course of.env.STRIPE_SECRET_KEY);
const headers = {
“Entry-Management-Permit-Strategies”: “*”,
“Entry-Management-Permit-Origin”: “*”,
“Entry-Management-Permit-Headers”: “Content material-Sort”,
“Content material-Sort”: “utility/json”,
};

module.exports = async perform (context, req) {
attempt {
const { information } = await stripe.merchandise.checklist({});
context.res = {
headers,
physique: {
information,
},
};
} catch (e) {
context.res = {
headers,
physique: e,
};
}
};

The exported perform within the code block above makes use of the checklist methodology to checklist all merchandise created within the account belonging to the STRIPE_SECRET_KEY variable getting used.

As soon as the promise from the asynchronous checklist methodology is resolved, the information array is destructured and despatched again (alongside some request headers) because the response to the request, by setting the physique throughout the context object.

To check the perform applied above, open a brand new CLI and execute the command beneath, which makes a GET HTTP request, utilizing cURL, to the Azure features working in a separate terminal.

curl http://localhost:4040/api/buyer

After executing the command above, a JSON response shall be returned to your console containing the beforehand created merchandise.

Value Perform

As proven within the fields returned from the merchandise perform above, the worth particulars of a product aren’t included within the product object. To get the worth particulars of a product, we have to fetch the worth object related to the product. This would be the job of the worth perform, as a result of every time it’s executed, it is going to return the worth object related to a product.

To create a brand new Azure Capabilities app, copy the the present merchandise folder, and paste it in the identical listing as a reproduction. Then, rename the duplicated folder to cost.

Utilizing your code editor, open the index.js file within the new worth listing, and substitute the present perform with the contents of the code block beneath, which implements the worth perform:

require(“dotenv”).config();

const stripe = require(“stripe”)(course of.env.STRIPE_SECRET_KEY);
const headers = {
“Entry-Management-Permit-Strategies”: “*”,
“Entry-Management-Permit-Origin”: “*”,
“Entry-Management-Permit-Headers”: “Content material-Sort”,
“Content material-Sort”: “utility/json”,
};

module.exports = async perform (context, req) {
const { product } = req.question;

attempt {
const { information } = await stripe.costs.checklist({
product,
});
context.res = {
headers,
physique: {
information : information[0],
},
};
} catch (e) {
context.res = {
headers,
physique: e,
};
}
};

The value perform app above accepts a GET HTTP request that comprises a product within the question parameter with the worth of a product’s ID. The checklist methodology on the worth object is used to retrieve costs inside a Stripe account. The product parameter handed to the checklist methodology restricts the costs retrieved to those related to the product object whose ID has been handed to the checklist methodology.

As soon as the promise from the checklist methodology is resolved, the information array from the checklist methodology is destructured, and solely the primary object throughout the information array is distributed again because the request response.

Be aware: Solely the primary object from the information array is distributed again as a result of we wish to show just one worth entity. A product might have a number of worth objects connected it, however for this utility, we’ll use just one.

To check the perform applied above, execute the command beneath, which sends a GET HTTP request containing a product ID in a request parameter to the Azure features working in a separate terminal.

Be aware: You’ll find the ID of a product within the Stripe dashboard. Navigate to the “Merchandise” web page, and click on a product to view its particulars. Within the particulars displayed, you will see that the ID of the product.

curl http://localhost:4040/api/worth?product=”prod_JudY3VFuma4zj7″

When you execute the command above, a JSON response shall be returned to your console with an object containing the worth object of a product.

From the response proven within the pattern above, we are able to see the worth particulars of the product, together with the foreign money, sort, and recurring information.

Buy Perform

The acquisition perform app shall be used both to make a one-time buy of a product or to subscribe a person to a product. Both of those two operations entails charging a person by way of their financial institution card.

To create a brand new perform app throughout the Azure Capabilities challenge, copy both the present merchandise or the worth folder, and paste it in the identical listing as a reproduction. Then, rename the duplicated folder to buy.

In your code editor, add the contents of the code block beneath within the index.js file, which can deal with a POST request to create both a subscription or a one-time buy for a person.

// ./buy/index.js
require(“dotenv”).config();

const stripe = require(“stripe”)(course of.env.STRIPE_SECRET_KEY);
const headers = {
“Entry-Management-Permit-Strategies”: “*”,
“Entry-Management-Permit-Origin”: “*”,
“Entry-Management-Permit-Headers”: “Content material-Sort”,
“Content material-Sort”: “utility/json”,
};

module.exports = async perform (context, req) {
const {
quantity,
purchaseCurrency,
cvc,
exp_month,
exp_year,
purchaseAmount,
e mail,
purchaseType,
priceEntityId,
} = req.physique;

attempt {
// Create a fee methodology for person utilizing the cardboard particulars
const { id: paymentID } = await stripe.paymentMethods.create({
sort: “card”,
card: {
quantity,
cvc,
exp_year,
exp_month,
},
});

const { id: customerID } = await stripe.clients.create({
e mail,
description: “Paintings gallery buyer”,
payment_method: paymentID,
});

await stripe.paymentMethods.connect(paymentID, { buyer: customerID });
if (purchaseType === “recurring”) {
const subscriptionData = await stripe.subscriptions.create({
buyer: customerID,
default_payment_method: paymentID,
gadgets: [
{
price: priceEntityId,
},
],
});
context.res = {
headers,
physique: {
message: “SUBSCRIPTION CREATED”,
userStripeId: customerID,
userSubscriptionId: subscriptionData.id,
},
};
} else {
const { id: paymentIntentId } = await stripe.paymentIntents.create( “usd”,
buyer: customerID,
payment_method: paymentID,
);
const { amount_received } = await stripe.paymentIntents.affirm(
paymentIntentId,
{
payment_method: paymentID,
}
);
context.res = {
headers,
physique: {
message: `PAYMENT OF ${amount_received} RECIEVED`,
},
};
}
} catch (e) {
context.res = {
standing: 500,
physique: e,
};
}
};

The perform app within the code block above makes use of the Stripe package deal to create both a one-time fee or a subscription for a person primarily based on the purchaseType worth gotten from the request physique. Here’s a run down of what occurred above:

First, a payment_method entity is created utilizing the bank card quantity, identify, CVC, and expiration particulars, destructured from the information despatched within the perform’s request physique.
Subsequent, a buyer is created in Stripe utilizing the e-mail worth despatched within the request physique, an outline, and the fee methodology beforehand created. The shopper object can also be connected to the payment_method entity through the use of the connect methodology and specifying the payment_method ID string that was returned when the fee methodology was created, and specifying a buyer possibility with the shopper ID that was returned when the shopper entity was created.
The final a part of the perform handler has an if situation that evaluates the purchaseType worth despatched within the request physique. If the purchaseType worth is recurring, then the subscription entity would comprise the shopper ID returned from the shopper entity, a default_payment_method with the worth of the payment_method ID returned from the fee entity, and an gadgets array with a single merchandise object containing the ID of a worth entity.

Increasing the Demo Net Utility

An internet utility constructed utilizing React will function the online consumer that immediately accesses the Azure Capabilities apps that we’ve constructed thus far. As defined earlier, the interface has already been constructed, and the information has been retrieved from a mock JSON file. We are going to solely make some minimal modifications and add the HTTP requests to make use of the Azure Capabilities endpoint.

Clone the online utility from the GitHub repository by executing the Git command beneath out of your native CLI:

git clone https://github.com/vickywane/stripe-art-app.git

Subsequent, transfer into the cloned utility’s listing and set up the dependencies listed within the package deal.json file.

# change listing
cd stripe-art-app

# set up dependencies
yarn set up

As soon as the dependencies have been put in, run the yarn begin command out of your CLI to view the house web page of the online utility out of your net browser at http://localhost:3000.

Earlier than diving into the code base of the online utility, let’s word a couple of issues concerning the present construction of the appliance.

First, person administration, together with authentication and the storing of a person’s private information from the appliance, was applied utilizing Auth0 by way of the usage of the auth0-react SDK for React purposes.

To make use of Auth0 within the cloned utility, we have to provide the credentials from an Auth0 single-page utility sort within the .env file throughout the net utility folder within the format proven beneath.

Be aware: See the Auth0 quickstart information for extra particulars on the best way to get began with a single-page utility.

# ./env

REACT_APP_AUTHO_DOMAIN=<AUTH0_DOMAIN>
REACT_APP_AUTHO_SECRET_KEY=<AUTH0_SECRET>
REACT_APP_FUNCTION_ENDPOINT=”http://localhost:5050/api”

The REACT_APP_FUNCTION_ENDPOINT outlined within the .env file above shall be accessed with the appliance elements to make HTTP requests to the working perform apps. At present, the Azure Capabilities apps are being served regionally in your pc’s localhost, however this can change to a reside URL when the perform apps are deployed to Azure Capabilities.

The second factor to notice is that the information of artwork merchandise displayed on the house web page are static, retrieved from a JSON file within the information listing.

On this a part of this text, we’ll prolong the functionalities above as follows:

House web page
We are going to refactor the house web page to fetch and show merchandise created in Stripe utilizing the GET merchandise Azure perform created beforehand, and we’ll discard the mock.json file containing the prototype artwork merchandise.
Checkout web page
We are going to construct a brand new checkout web page for customers who wish to buy both an artwork print or a subscription with their bank card.

House Web page

The house web page is displayed for all customers, whether or not authenticated or unauthenticated, and it shows an inventory of all obtainable art work merchandise, utilizing a toddler artworkCard part exported from the artworkCard.js file.

We have to make a couple of modifications to this part, as a result of we wish the button within the artworkCard part to immediate the person to buy an art work. Modify the present artworkCard.js file within the elements listing with the highlighted parts of the code block beneath.

Within the highlighted elements of the file above, we launched a useEffect hook to make an HTTP request to the worth perform app to retrieve the worth object connected to the product being displayed within the card. As soon as the promise from the fetch methodology is resolved, the information stream is additional transformed to JSON and saved within the part’s native state.

A button labelled Buy was additionally added to the artworkCard part. When clicked, it navigates the person to the checkout web page, the place the person can enter their financial institution card particulars to buy the product.

In your code editor, open the House.js file within the pages listing, and modify it with the highlighted parts of the code block beneath, which can fetch all obtainable merchandise in Stripe by way of the merchandise perform app after which show them.

Within the code block above, a GET request is made as quickly because the part is loaded in a useEffect hook utilizing the browser’s fetch API. The stream response from the request made is additional transformed into JSON format, and the information is saved within the native part state for additional use.

With this alteration, the information.json file is not getting used. Additionally, if you view the online utility in your browser, you will see that the merchandise created in Stripe displayed in a grid, as proven beneath:

From the small print proven within the picture above, you’ll discover that the merchandise displayed on the house web page had been those created originally of this text.

Checkout Web page

Create a checkout.js file within the pages listing. This new file will comprise the part that shall be displayed to gather the person’s bank card particulars, after they’re routed to /checkout upon clicking the “Buy” button to buy an artwork print.

Add the contents of the code block beneath to create the checkout part that comprises the shape parts to gather the bank card particulars:

# ./src/pages/checkout.js

import React, { useState } from “react”;
import { useAuth0 } from “@auth0/auth0-react”;
import Header from “../elements/header”;
import “../App.css”;

const Checkout = (props) => {
const { purchaseType, productId, priceEntityId, identify, worth } =
props.location.state;

const [cardNumber, setCardNumber] = useState(“”);
const [cardName, setCardName] = useState(“”);
const [cvc, setcvc] = useState(“”);
const [cardExpiryMonth, setCardExpiryMonth] = useState(“”);
const [cardExpiryYear, setCardExpiryYear] = useState(“”);
const [loading, setLoading] = useState(false);
const [paymentSuccess, setPaymentSuccess] = useState(false);
const { person } = useAuth0();

const makePayment = async () => {
setLoading(true);
attempt {
const res = await fetch(
`${course of.env.REACT_APP_FUNCTION_ENDPOINT}/buy`,
{
methodology: “POST”,
physique: JSON.stringify({
quantity: cardNumber,
exp_month: cardExpiryMonth,
exp_year: cardExpiryYear,
purchaseAmount: worth,
purchaseType,
priceEntityId,
cvc,
e mail: person.e mail,
}),
}
);

if (res.standing === 200) {
const { paymentId } = await res.json();
await fetch(`${course of.env.REACT_APP_FUNCTION_ENDPOINT}/billing-data`, {
methodology: “POST”,
physique: JSON.stringify({
productId,
userId: person.sub,
paymentId,
}),
});
setPaymentSuccess(true);
}
} catch (e) {
console.log(e);
} lastly {
setLoading(false);
}
};

return (
<div
model={{
top: “100vh”,
background: “#F3F6FC”,
}}
>
<Header />
<div
className=”product-page-padding”
model={{
top: window.innerHeight,
show: “flex”,
justifyContent: “middle”,
alignItems: “middle”,
}}
>
<div className=”align-center”>
<div className=”payment-card”>
<h5 className=”align-center”>
<b>{identify} Checkout </b>
</h5>
<p>
<b>Whole Value:</b> {`$${worth}`}
</p>
<p>
<b> Fee Sort: </b> {purchaseType.toUpperCase()}
</p>
<hr />
{!paymentSuccess ? (
<kind
onSubmit={(e) => {
e.preventDefault();
makePayment();
}}
>
<h5> Fee Particulars </h5>
<br />
<div className=”input-container”>
<label id=”identify”> Cardholder Identify </label>
<enter
worth={cardName}
onChange={(e) => setCardName(e.goal.worth)}
className=”payment-input”
placeholder=”Financial institution Cardholder Identify”
sort=”textual content”
/>
</div>
<br />
<div className=”input-container”>
<label id=”identify”> Card Quantity </label>
<enter
worth={cardNumber}
onChange={(e) => setCardNumber(e.goal.worth)}
className=”payment-input”
placeholder=”Financial institution Card Numbers”
sort=”quantity”
/>
</div>
<br />
<div className=”input-container”>
<label id=”identify”> Card CVC </label>
<enter
worth={cvc}
onChange={(e) => setcvc(e.goal.worth)}
className=”payment-input”
placeholder=”Financial institution Card CVC”
sort=”textual content”
/>
</div>
<br />
<div className=”input-container”>
<label id=”identify”> Card Expiry Month </label>
<enter
worth={cardExpiryMonth}
onChange={(e) => setCardExpiryMonth(e.goal.worth)}
className=”payment-input”
placeholder=”Financial institution Card Expiry Month”
sort=”textual content”
/>
</div>
<br />
<div className=”input-container”>
<label id=”identify”> Card Expiry Yr </label>
<enter
worth={cardExpiryYear}
onChange={(e) => setCardExpiryYear(e.goal.worth)}
className=”payment-input”
placeholder=”Financial institution Card Expiry Yr”
sort=”textual content”
/>
</div>
<br />
<button
disabled={loading}
model={{ width: “100%” }}
onClick={(e) => {
e.preventDefault();
makePayment();
}}
className=”btn”
>
{!loading ? “Affirm” : “Confirming”} My Fee
</button>
</kind>
) : (
<div>
<br />
<h5 className=”align-center”>
Your {`$${worth}`} buy of {identify} was successfull{” “}
</h5>
<br />
</div>
)}
</div>
</div>
</div>
</div>
);
};

export default Checkout;

As described earlier, the shape part above comprises 4 enter fields for the person to sort of their identify, quantity, expiration and CVC particulars. These particulars are additional saved within the part’s native state, and, upon a click on of the “Affirm my fee” button, the saved bank card particulars are used to buy the product.

Of specific curiosity within the checkout part above is the makePayment perform, as a result of it handles the performance of the checkout web page. When executed, the makePayment perform sends a POST request containing the bank card particulars in its request physique utilizing fetch to the /buy cloud perform. As soon as the primary POST request is resolved efficiently, with a 200 standing code indicating a profitable fee, a brand new POST request is made to the /billing-data cloud perform to retailer the small print of the bought product.

Be aware: As defined once we had been designing the productCard part, the bought product particulars saved in Auth0 shall be used to establish merchandise bought by the person from the house web page.

To check this part, we’ll fill the enter fields with the small print of one of many fundamental take a look at playing cards supplied by Stripe for purposes nonetheless in take a look at mode, after which click on the “Affirm fee” button, as proven beneath:

Be aware: The bank card used within the picture above is likely one of the fundamental take a look at playing cards supplied by Stripe and never an actual bank card. Stripe accounts in take a look at mode should use one of many fundamental take a look at playing cards.

As soon as the “Affirm my fee” button within the checkout card is clicked, a fee for the product is comprised of the bank card supplied, and the checkout card interface is modified to replicate the profitable response.

Going to the “Experiences” part of your Stripe admin dashboard, you will note a mirrored image of the final fee made when the gallery subscription was created on the checkout web page above.

From the charts proven within the picture above, taken from the take a look at Stripe card used on this tutorial, you will note {that a} gross quantity of $150.00 was attained as soon as the gallery subscription was created.

Be aware: The picture additionally reveals statistics from take a look at operations that had been made on the Stripe account whereas this text was being developed.

At this level, we have now absolutely arrange the complete fee circulation. You’ll be able to repeat the method of making a product by way of the Stripe dashboard and buying it utilizing the React utility or another consumer that consumes Azure Capabilities.

Abstract

Congratulations on finishing this hands-on tutorial.

By going by way of the steps on this tutorial, we have now labored with Stripe, Azure Capabilities, and React. We began by constructing an API layer that makes use of the Stripe API by way of a Node.js package deal. Then, we moved on to consuming the Azure Capabilities app endpoints from an internet utility, utilizing the perform app to retrieve merchandise and make funds for the merchandise.

References

Documentation, Stripe
auth0-react (SDK for React single-page purposes)
Auth0