Saleor: How to use Stripe.js

[pymarco]

A similar issue was opened for django-payments.
https://github.com/mirumee/django-payments/issues/61

The goal is to avoid needing PCI compliant hosting. Stripe enables you to process payments from the frontend without POSTing sensitive data to your backend.

https://stripe.com/docs/custom-form
"With Stripe.js, you never have to handle sensitive card data. It's automatically converted to a representative token that you can safely send to your servers and use to charge your customers."

To use Stripe.js is it as easy as configuring the site to use StripeCardProvider?

PAYMENT_VARIANTS = {
    'stripe': (
        'payments.stripe.StripeCardProvider', {
            'secret_key': 'sk_test_123456',
            'public_key': 'pk_test_123456'
        }
    )
}

[pymarco]

Here's an approach I have come up with, based on this discussion, that doesn't require forking django-payments. I have not tested it yet, and I will not be able to for a few weeks. Just getting prepared.

1. Create a new custom payments/stripe.js as a replacement of the same file provided by django-payments

You will need to reference the elements by id instead of name.

Replace this

name: this.elements['name'].value,
number: this.elements['number'].value,
cvc: this.elements['cvv2'].value,
exp_month: this.elements['expiration_0'].value,
exp_year: this.elements['expiration_1'].value,

With this

name: this.elements.id_name.value,
number: this.elements.id_number.value,
cvc: this.elements.id_cvv2.value,
exp_month: this.elements.id_expiration_0.value,
exp_year: this.elements.id_expiration_1.value,

1. Create a new custom widget StripeJsWidget that inherits from django-payments' StripeWidget

class StripeJsWidget(StripeWidget):
    class Media:
        js = [
            'https://js.stripe.com/v2/',
            'path/to/custom/payments/stripe.js', # override the path to payments/stripe.js
        ]

1. Create a new custom form StripeJsForm that inherits from django-payments' PaymentForm

Be sure to set the widget to your StripeJsWidget

class StripeJsForm(PaymentForm):

    stripeToken = forms.CharField(
        widget=StripeJsWidget())

1. Create a new custom card provider StripeJsProvider that inherits from django-payments' StripeProvider

Set the form_class to your StripeJsForm

class StripeJsProvider(StripeProvider):
    form_class = StripeJsForm

1. Finally, set the new card provider in your settings

PAYMENT_VARIANTS = {
    'stripe': (
        'your.app.StripeJsProvider', {
            'secret_key': 'sk_test_123456',
            'public_key': 'pk_test_123456'
        }
    )
}

[artursmet]

Thank you @pymarco for sharing this. I think we should consider adding a new section in saleor's documentation, for example 'tips & tricks' where we can include tutorials like this one. Basically information how to implement some useful customizations. What do you think @patrys?

[patrys]

I think this is more of a workaround for problems in our code than a useful customization 😉

[artursmet]

@pymarco I implemented changes that you've mentioned: https://github.com/mirumee/django-payments/pull/124 it should be available in next release of django-payments.

[raybesiga]

We really need to work on the payments customization. I think just having a button there with save changes does nothing to instill confidence in customers that their bank/card information is safe. CC @NyanKiyoshi