Braintree - Integration into a project

Edit on GitHub

There is currently an issue when using giftcards with Braintree. Our team is developing a fix for it.

Prerequisites

Before proceeding with the integration, make sure you have installed and configured the Braintree module.

Frontend integration

src/Pyz/Yves/CheckoutPage/Theme/default/views/payment/payment.twig

{% extends template('page-layout-checkout', 'CheckoutPage') %}
 
{% define data = {
    backUrl: _view.previousStepUrl,
    forms: {
        payment: _view.paymentForm
    },
 
    title: 'checkout.step.payment.title' | trans
} %}
 
{% block content %}
    {% embed molecule('form') with {
        class: 'box',
        data: {
            form: data.forms.payment,
            options: {
                attr: {
                    id: 'payment-form'
                }
            },
            submit: {
                enable: true,
                text: 'checkout.step.summary' | trans
            },
            cancel: {
                enable: true,
                url: data.backUrl,
                text: 'general.back.button' | trans
            }
        }
    } only %}
        {% block fieldset %}
            {% for name, choices in data.form.paymentSelection.vars.choices %}
                <h5>{{ ('checkout.payment.provider.' ~ name) | trans }}</h5>
 
                <ul class="list spacing-y">
                    {% for key, choice in choices %}
                        <li class="list__item spacing-y clear">
                            {% embed molecule('form') with {
                                data: {
                                    form: data.form[data.form.paymentSelection[key].vars.value],
                                    enableStart: false,
                                    enableEnd: false,
                                    layout: {
                                        'card_expires_month': 'col col--sm-4',
                                        'card_expires_year': 'col col--sm-8'
                                    }
                                },
                                embed: {
                                    toggler: data.form.paymentSelection[key]
                                }
                            } only %}
                                {% block fieldset %}
                                    {% set templateName = data.form.vars.template_path | replace('/', '-') %}
                                    {% set viewName = data.form.vars.template_path | split('/') %}
 
                                    {{ form_row(embed.toggler, {
                                        required: false,
                                        component: molecule('toggler-radio'),
                                        attributes: {
                                            'target-selector': '.js-payment-method-' ~ templateName,
                                            'class-to-toggle': 'is-hidden'
                                        }
                                    }) }}
 
                                    <div class="col col--sm-12 is-hidden js-payment-method-{{ templateName }}">
                                        <div class="col col--sm-12 col--md-6">
                                            {% if 'Braintree' in data.form.vars.template_path %}
                                                {% include view(viewName[1], viewName[0]) with {
                                                    form: data.form.parent
                                                } only %}
                                            {% else %}
                                                {{parent()}}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endblock %}
                            {% endembed %}
                        </li>
                    {% endfor %}
                </ul>
            {% endfor %}
        {% endblock %}
    {% endembed %}
{% endblock %}

Add to summary.twig:

{% define data = {
    ...
    forms: {
        summary: _view.summaryForm,
        shipment: _view.checkoutShipmentForm
    },
    ...
} %}
 
{% embed molecule('form') with {
    class: 'box',
    data: {
        form: data.forms.shipment,
        submit: {
            enable: can('SeeOrderPlaceSubmitPermissionPlugin'),
            text: 'summary.step.add.shipment' | trans
        },
        cancel: {
            enable: false,
            }
        },
        embed: {
            overview: data.overview
        }
    } only %}
{% endembed %}