Building a full ecommerce site part 6: send customers to Oscar's thank-you page after payment

After yesterday's frustrating process, I took a long hike up Šehitluci to chill out. When I came back down this cool conservationist dude about to cycle across Europe taught me how to identify edible herbs in a garden gone wild and I ate them. Then, I googled "javascript how to click element after event". A few googles later, I'd cobbled together the right code. I am so relieved this turned out easy.

Step 1: edit preview.html

Remember how we commented out the PayPal Checkout Express button and commented the "Place Order" button back in yesterday? Now, comment the PayPal button back in.

The "Place Order" button is inside this div: <div class="form-group clearfix">. Add style="display:none" to it. Voila, it's gone! Well, not really. It's still there but hidden away. We want it this way so that we can press the button ourselves while not letting customers see it.

You can also use visibility="hidden" but it takes up some space, according to this solution.

Step 2: why click the button instead of directing to the thank-you page

In Part 4, we used window.location = "http://localhost:8000" to send customers to the home page after payment. Why this and not directly to Oscar's thank-you page with window.location = "http://localhost:8000/checkout/thank-you/"

Remember when we hiked the code trail in Part 5 and found this:

def submit(self, user, basket, shipping_address, shipping_method,  # noqa (too complex (10))
shipping_charge, billing_address, order_total,
payment_kwargs=None, order_kwargs=None):

This function eventually gets called when customers click the "Place Order" button. As you can see, it demands 7 very necessary arguments. I believe submit() gets them from the Django context already loaded on the preview page (please correct me if I'm wrong).

However, if we use the Checkout Express script to send people directly to the thank-you page, it doesn't have a way to get the appropriate values from the context. And both the email process we discovered in Part 5 and the thank-you page need them.

The only way to get them (perhaps because of our noob skillz) is to click the "Place Order" button.

Step 3: edit paypal_checkout_express.html

Open up the template where we placed the Checkout Express Javascript script and do this:

onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {

// Replace the window.location code with the line below.
document.getElementById("place-order").click();

});
}

The "Place Order" button in preview.html has the id 'place-order'. The line we just added locates it by this id, and clicks it, right after the payment process is done.

This allows the thank-you page with the customer's purchase details to load. The customer also gets an email personalised with the same details.

Comments

There are currently no comments

New Comment

required

required (not published)

optional

required