Integrating Braintree

Last updated:
Edit on GitHub

Gift cards are not compatible with Braintree. We are working on resolving this conflict.

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 %}