CODEWITHSUNDEEP
pythondjangopaypalbraintreedjango-oscar
MadPhysicist
MadPhysicist

Reputation: 5831

Processing Payments Via Paypal in Django-Oscar

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)

enter image description here

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.

Upvotes: 5

Views: 1615

Answers (2)

Goran
Goran

Reputation: 3

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>

Upvotes: 1

kontur
kontur

Reputation: 5220

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.

Upvotes: 1

Related Questions