//= require “vendor/braintree”
SolidusBraintree
= {
getFrontendStyles: function(){ /* Emulation of inherited attributes through an iframe */ var $source = $('.braintree-hosted-field'); return { input: { "font-family": $source.css("font-family"), "font-size": $source.css("font-size"), "color": $source.css("color"), } }; }
}
Spree.routes.payment_client_token_api = Spree.pathFor(“api/payment_client_token”)
var braintreeDropinIntegration; var cardSelector = “#payment-method-fields”; var confirmForm = “#checkout_form_confirm”; var paymentId;
var getClientToken = function(onSuccess) {
return Spree.ajax({ url: Spree.routes.payment_client_token_api, type: "POST", data: { payment_method_id: paymentId }, error: function(xhr, status) { // If it fails it means the payment method was not a Braintree payment method if (braintreeDropinIntegration) { braintreeDropinIntegration.teardown(); braintreeDropinIntegration = null; } }, success: function(data) { onSuccess(data); } });
};
var initializeBraintree = function(data) {
$("#card_expiry").on("keyup", function() { // We need to format the braintree expiration without spaces $("#braintree_expiration_date").val($(this).val().replace(/ /g,'')); }) braintree.setup(data.client_token, "custom", { id: "checkout_form_payment", hostedFields: { styles: SolidusBraintree.getFrontendStyles(), number: { selector: "#braintree_card_number", placeholder: braintree.placeholders["number"] }, cvv: { selector: "#braintree_card_code", placeholder: braintree.placeholders["cvv"] }, expirationDate: { selector: "#braintree_card_expiry", placeholder: braintree.placeholders["expirationDate"] } }, dataCollector: { kount: {environment: braintree.environment}, paypal: true }, paypal: { container: "#braintree_paypal_container", onSuccess: function() { $(".braintree-cc-input").hide(); }, onCancelled: function() { $(".braintree-cc-input").show(); } }, onReady: function (integration) { braintreeDropinIntegration = integration; $('form').find("input#device_data").val(integration.deviceData); }, onError: function(error) { var text; if (error.type === "VALIDATION") { text = 'There was a problem with your payment information. Please check your information and try again.'; } else { text = error.message; } $('#checkout_form_payment').find(':submit, :image').attr('disabled', false).removeClass('disabled'); var errorDiv = $("<div/>", { class: 'flash error', text: text }); if (error.details) { var list = $("<ul/>").appendTo(errorDiv); $.each(error.details.invalidFieldKeys, function (idx) { $('<li/>', { text: error.details.invalidFieldKeys[idx] + " is required." }).appendTo(list); }); } if ($('.flash.error').length == 0) { errorDiv.prependTo("#content"); } else { $('.flash.error').replaceWith(errorDiv); } }, onPaymentMethodReceived: function(obj) { $("#payment_method_nonce").val(obj.nonce); $("#checkout_form_payment").submit(); return; } });
};
var getDeviceDataConfirm = function(data) {
var collector = braintree.data.setup({ kount: {environment: braintree.environment} }); $('form').find("input#device_data").val(collector.deviceData); collector.teardown();
};
$(document).ready(function() {
if ($(cardSelector).find("input[type=radio][name='order[payments_attributes][][payment_method_id]']").length) { $(cardSelector).find("input[type=radio][name='order[payments_attributes][][payment_method_id]']").on("change", function() { paymentId = $(this).val(); getClientToken(initializeBraintree); }); // Attempt to initialize braintree paymentId = $("form input[type=radio][name='order[payments_attributes][][payment_method_id]']:checked").val(); getClientToken(initializeBraintree); } // Attempt to inject device_data to confirm form. if ($(confirmForm).length && braintree.environment) { getDeviceDataConfirm(); }
});