Processing Payments Via Paypal in Django-Oscar

Question

I am trying to set up a basic e-commerce site using Django Oscar and am having difficulties. The majority of the problem has to do with the absence of examples of how to hook up meaningful (think Paypal, Stripe, Braintree) methods of payment and presence of obscure ones of which I have never heard before.

Either way, I am attempting to use django-oscar-paypal and follow its documentation. The Paypal Express part seems to work in that the button shows up and something akin to check out and processing happens.

However, if I choose to proceed with checkout in a regular way (with hopes of paying with a card), I am taken to the following page (the message in parentheses is mine)

Which is a product of the following template:

{% extends "checkout/checkout.html" %}
{% load i18n %}

{% block title %}
    {% trans "Payment details" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'checkout/nav.html' with step=3 %}
{% endblock %}

{% block checkout_title %}{% trans "Enter payment details" %}{% endblock %}

{% block order_contents %}{% endblock %}
{% block shipping_address %}{% endblock %}
{% block shipping_method %}{% endblock %}
{% block payment_method %}{% endblock %}

{% block payment_details %}
    {% block payment_details_content %}
        <p>{% trans "(*** Message from ./templates/tshirt-theme/ ***) This page needs implementing within your project.  You may want to use one of Oscar's payment gateway libraries:" %}</p>
        <ul>
            <li><a href="https://github.com/django-oscar/django-oscar-paypal">django-oscar-paypal</a></li>
            <li><a href="https://github.com/django-oscar/django-oscar-datacash">django-oscar-datacash</a></li>
            <li><a href="https://github.com/django-oscar/django-oscar-gocardless">django-oscar-gocardless</a></li>
            <li><a href="https://github.com/django-oscar/django-oscar-paymentexpress">django-oscar-paymentexpress</a></li>
            <li><a href="https://github.com/django-oscar/django-oscar-accounts">django-oscar-accounts</a></li>
        </ul>
        <a id="view_preview" href="{% url 'checkout:preview' %}" class="btn btn-primary btn-lg">{% trans "Continue" %}</a>
    {% endblock payment_details_content %}
{% endblock payment_details %}

When I click "Continue", I am taken to something resembling a pre-order page on which the Payment Method is empty. When I click "Change" on it, it takes me back to the page on the screenshot.

My question is how do I get credit cards to work with this setup? Is there a better way of doing this thing altogether? I am somewhat familiar with Django, but this seemingly simple task seems to require a lot of knowledge and/or a lot of re-inventing the wheel. The latter must be the case because there is no documentation or tutorials on any of this, but many sites allegedly use Django-Oscar.

Any help or advice is appreciated.

I assume by regular checkout you want "Paypal Payflow Pro", for which you'll need some customization which is more complex than the simpler "Paypal Express" option. [Docs on required customization](https://django-oscar-paypal.readthedocs.io/en/latest/payflow.html#next-steps) — shad0w_wa1k3r, May 29 '18 at 17:30
In general I'd advise you to refer to multiple libraries that implement django-oscar payments and incorporate similar code as per your business requirements (since lack of documentation / examples) — shad0w_wa1k3r, May 29 '18 at 17:31
@shad0w_wa1k3r Yes, and as I said, there is little to no documentation on any of this. — MadPhysicist, May 30 '18 at 16:51
Which probably makes no sense. If the creators expect you to spend the time to learn and understand their code to use the libraries, you might as well write it from scratch yourself. That is a disease which plagues many open-source projects. — MadPhysicist, May 31 '18 at 19:40
Let's not forget good documentation is hard to write and takes time and effort. Also, there are reasons to why payments integration will always be hard because there are so many providers varying region to region and that the business requirements might affect the flow for various needs. Oscar makes the trade-off to be as flexible as possible, which means you have to get familiar with it's inner workings. — shad0w_wa1k3r, May 31 '18 at 19:45
No question. Great documentation is an art and an effort equivalent to writing the product itself. — MadPhysicist, May 31 '18 at 19:58
Have you tried running the sandbox site that comes with [django-oscar-paypal](http://github.com/django-oscar/django-oscar-paypal)? That should give you a sample setup that you can then customise for your requirements. — solarissmoke, Jun 02 '18 at 03:49
It gives a basic Paypal Express setup but that one I can do following the instructions. But who wants just Paypal Express? — MadPhysicist, Jun 02 '18 at 19:15

score 1 · Answer 1 · answered Jul 12 '18 at 12:40

From the django-paypal repo view the sandbox code, in particular the templates folder, settings.py and urls.py. I followed the instructions and added the necessary paypal keys to settings.py as well as the urls.py but failed to copy the templates, since that was documented less carefully.

For me simply adding at the very least the same templates as the sandbox made the screen you are viewing be replaced with working paypal buttons. In particular, the sandbox/templates/checkout/payment_details.html seems to be what gets rendered in place of this reminder message you are seeing — note that the template has both Express and Flow options, so use only what your site is set to use.

score 1 · Answer 2 · edited Nov 21 '19 at 15:46

Add the below code to oscar/checkout/preview.html, and also change the client ID #

<body>
<div class="col-sm-5 col-sm-offset-7">

        <!-- Set up a container element for the button -->
     <div id="paypal-button-container" ></div>

    <!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id={{'Askdlsfhslfkdlfkdsflskd-wkJzFrkfldfkjhdlkfrW3-5U-RW0-ZsZskflsfu_YT-85r'}}&currency=PLN&locale=pl_PL"></script>

    <script>
         // Render the PayPal button into #paypal-button-container
        paypal.Buttons({
                        style: {
                            layout: 'horizontal',
                            size: 'small',
                            color:  'blue',
                            shape:  'rect',
                            label:  'pay',
                            height: 44,
                            tagline: 'true'
                        },
                             enableStandardCardFields: false, 
            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                                value: JSON.parse({{ order_total.incl_tax }}) // pass variable with amount to script
                           // <!-- value: '0.01', -->
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#paypal-button-container');
    </script>

</div> 
</body>

Processing Payments Via Paypal in Django-Oscar

2 Answers2