We already implemented the credit card logic at the frontend in Chapter 5, Building a Frontend for GoMusic. It's now time to implement the backend part of our credit card handling.

For credit card processing at the frontend, we made use of the Stripe API (https://stripe.com/docs/api). In a product environment, you would need to create an account with Stripe and obtain an API key to use for your application. For testing purposes, however, we can make use of testing API keys and test credit card numbers, which Stripe happily provides for developers to build productive apps that are capable of processing credit cards. To learn more about testing credit card numbers and testing tokens that are provided by Stripe, take a look at https://stripe.com/docs/testing.

In our frontend code, we made use of the following Stripe API code to create a token:

let { token } = await this.props.stripe.createToken({ name: this.state.name });

We also made use of a very popular framework known as Stripe elements, which will collect all of our credit card information and then merge it with the create token request so that we get a token that represents the credit card that we are trying to process.

We then send this token down to the backend so that it can be processed and/or saved.

To process credit card payments, there are some key pieces of information that we need:

• The credit card token that's provided by the Stripe API
• The ID of the customer making the purchase
• The ID of the product the customer is trying to buy
• The selling price of the product
• Whether the card should be remembered for future use
• Whether to use a pre-saved card or not

I changed the frontend code so that it can collect this information and pass it to the HTTP request that's bound to our backend. Here's the part of the frontend code that will create and submit our request. The following code is in the creditcards.js file:

    async handleSubmit(event) {
        event.preventDefault();
        let id = "";
       //If we are not using a pre-saved card, connect with stripe to obtain a card token
        if (!this.state.useExisting) {
           //Create the token via Stripe's API
            let { token } = await this.props.stripe.createToken({ name: this.state.name });
            if (token == null) {
                console.log("invalid token");
                this.setState({ status: FAILEDSTATE });
                return;
            }
            id = token.id;
        }
        //Create the request, then send it to the back-end
        let response = await fetch("/users/charge", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                token: id,
                customer_id: this.props.user,
                product_id: this.props.productid,
                sell_price: this.props.price,
                rememberCard: this.state.remember !== undefined,
                useExisting: this.state.useExisting
            })
        });
        //If response is ok, consider the operation a success
        if (response.ok) {
            console.log("Purchase Complete!");
            this.setState({ status: SUCCESSSTATE });
        } else {
            this.setState({ status: FAILEDSTATE });
        }
    }

The preceding code makes use of the fetch() method in order to send a POST request to the backend. The POST request will contain a JSON message which will host all the data that our backend needs to process the request.

In the next section we'll take a look at how the backend of credit card handling works.