Sending Purchase Receipts

After we’ve confirmed the Stripe payment and updated the records in the database, the next thing we can do is send the user a receipt detailing their payment. To send an HTML-based email from the server, we need an HTML template in which we’ll dynamically replace values with placeholders. The email will be sent on the server, so the template we use should be processed on the server-side.

Blaze template on the server

The template to use is stored in the private folder. Remember that the private folder can only be accessed by server-side code. Open the private/email-templates/sendReceipt.html file. This file is an HTML Blaze template file.

Blaze is the Meteor framework default rendering engine used to dynamically display data in front-end applications. Take a look inside the file and notice that some code is written inside double curly brackets ({{ }}). These are template tags that are replaced with dynamic content when the file is compiled. Take a look at lines 279–286, and notice the following code: {{#each booksBought}}.

The booksBought variable is an array. To loop through all books, the {{#each }} template function is used. We loop through the booksBought variable and display the data in an HTML table (tr) for each piece of data in the booksBought array. In the template, we also have the totalSum variable, which will be replaced with dynamic data when the template compiles.

Compiling Blaze template on the server

To compile the template and replace the variables with dynamic data, we’ll need to install a Meteor package called meteorhacks:ssr that makes it very easy to compile the template on the server.

The package is installed to our project by running the code below on the terminal:

meteor add meteorhacks:ssr

This command adds the meteorhacks:ssr to our project. Open the imports/startup/server/templateToHtml.js file. This is the file that processes the template on the server and replaces the dynamic content with the passed data.

On line 1, we import fs, which refers to the file system. It’s a package that’s automatically added to all Node.js projects. The fs package is used to read files on the server’s file system. On line 3, we import SSR from the package we installed, ``meteorhacks:ssr`.

On lines 5–15, we define a function that accepts two parameters, namely name and data. The name input refers to the name of the template we want to compile, while data refers to the dynamic data that will be used to replace the variables defined inside the template.

On line 6, we define a try block so that our application doesn’t break if we’re unable to compile the template successfully. On line 7, we call the compileTemplate method of the SSR package, passing in the template name and the location of the template. Assets in the private folder of our application are available under assets/app when our application is running. Remember that the template is stored inside the email-templates folder that’s inside the private folder.

The fs.readFileSync code of the fs module reads a file, synchronously loading it in memory. We pass the utf-8 flag to the readFileSync method so that our file can be properly decoded and read correctly. If the file was successfully compiled, we render and return the HTML file filled with the dynamic content on line 11. If we encounter any error, we throw a Meteor Error on line 13 that states the reason why we were unable to compile the template.

Sending the email

After compiling the template successfully, the next thing to do is send the email to the buyer. Open the imports/startup/server/stripe.js file. Look at the stripe.completePayment method. This is the method that’s called after making a Stripe payment and verifying the status of the payment. The method, as we know from the last lesson, receives a status and a clientSecret as input. On line 44, we have a method called ReceiptDetails. This method receives a clientSecret as an input and uses it to retrieve the list of items associated with that clientSecret.

Open the imports/startup/server/receiptDetails.js file. The file only contains a simple function called ReceiptDetails that searches the BookSaleCollection using the clientSecret and returns details about the books bought, the total amount spent, and the buyer’s details.

Let’s go back to the imports/startup/server/stripe.js file and continue analyzing the stripe.completePayment method. On line 46, we define the Meteor.defer function. Earlier in the course, we discussed that this function is used to defer the execution of an asynchronous function in the background. On line 47, we use the function we defined to compile the HTML template. The templateToHtml function is imported into the file on line 6. This function receives the name of the template and data that will be used to compile the template. The name of the template we want to use is sendReceipt. (The name should be exactly how it’s saved inside the email-templates folder inside the private folder.) The data we pass is the booksBought array and the totalSum. The templateToHtml function compiles the template and returns an HTML that we can send using Meteor.

The buyer’s email address is extracted from the buyer object, and Meteor is used to send the email. Instead of sending a text-based email, we send an HTML email. If all goes well, the buyer receives an email with a summary of their purchases.

Task

Run the application, purchase some books, and pay for the books using the credit card details below:
Card number: “4242 4242 4242 4242”
Exp date: Any valid future date
CVV: Any valid three-digit number
When Stripe confirms the payment, an email will be sent to your email address with a summary of your purchase.