New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
braintree-web-drop-in
Advanced tools
braintree-web-drop-in - npm Package Compare versions
Comparing version 1.3.1 to 1.4.0
| CHANGELOG | ||
| ========= | ||
| 1.4.0 | ||
| ------ | ||
| - Add `paymentOptionSelected` event | ||
| - Add support for PayPal and PayPal credit in the script tag integration | ||
| - Add support for locale and payment option priority in the script tag integration | ||
| - `dropinInstance.requestPaymentMethod` will return a promise if no callback is provided | ||
| - `dropinInstance.teardown` will return a promise if no callback is provided | ||
| - `dropin.create` will return a promise if no callback is provided | ||
| - Fix error thrown in console when removing fields with card overrides | ||
| - Fix bug where Drop-in would not finish loading if inside a hidden div | ||
| - Improve transition from payment sheet views to payment methods view | ||
| - Use version 3.19.1 of braintree-web | ||
| - Improve UI in older versions of iOS Safari | ||
| 1.3.1 | ||
@@ -14,3 +28,2 @@ ----- | ||
| - Add support for custom translations | ||
| - Use npm scoped version of browser-detection | ||
| - Clean up payment option error messages | ||
@@ -17,0 +30,0 @@ - Update braintree-web to version 3.18.0 |
@@ -44,2 +44,3 @@ 'use strict'; | ||
| ANALYTICS_PREFIX: 'web.dropin.', | ||
| CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT: 200, | ||
| CHECKOUT_JS_SOURCE: 'https://www.paypalobjects.com/api/checkout.4.0.82.min.js', | ||
@@ -46,0 +47,0 @@ INTEGRATION: 'dropin2', |
@@ -62,2 +62,8 @@ 'use strict'; | ||
| DropinModel.prototype.selectPaymentOption = function (paymentViewID) { | ||
| this._emit('paymentOptionSelected', { | ||
| paymentOption: paymentViewID | ||
| }); | ||
| }; | ||
| DropinModel.prototype._shouldEmitRequestableEvent = function (options) { | ||
@@ -64,0 +70,0 @@ var requestableStateHasNotChanged = this.isPaymentMethodRequestable() === options.isRequestable; |
@@ -17,5 +17,7 @@ 'use strict'; | ||
| var uuid = require('./lib/uuid'); | ||
| var Promise = require('./lib/promise'); | ||
| var wrapPrototype = require('@braintree/wrap-promise').wrapPrototype; | ||
| var mainHTML = "<div class=\"braintree-dropin\">\n <div data-braintree-id=\"methods-label\" class=\"braintree-heading\"> </div>\n <div data-braintree-id=\"choose-a-way-to-pay\" class=\"braintree-heading\">{{chooseAWayToPay}}</div>\n <div class=\"braintree-placeholder\"> </div>\n\n <div data-braintree-id=\"upper-container\" class=\"braintree-upper-container\">\n <div data-braintree-id=\"loading-container\" class=\"braintree-loader__container\">\n <div data-braintree-id=\"loading-indicator\" class=\"braintree-loader__indicator\">\n <svg width=\"14\" height=\"16\" class=\"braintree-loader__lock\">\n <use xlink:href=\"#iconLockLoader\"></use>\n </svg>\n </div>\n </div>\n\n <div data-braintree-id=\"methods\" class=\"braintree-methods braintree-methods-initial\">\n <div data-braintree-id=\"methods-container\"></div>\n </div>\n\n <div data-braintree-id=\"options\" class=\"braintree-test-class braintree-options braintree-options-initial\">\n <div data-braintree-id=\"payment-options-container\" class=\"braintree-options-list\"></div>\n </div>\n\n <div data-braintree-id=\"sheet-container\" class=\"braintree-sheet__container\">\n <div data-braintree-id=\"paypal\" class=\"braintree-paypal braintree-sheet\">\n <div data-braintree-id=\"paypal-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#logoPayPal\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__label\">{{PayPal}}</div>\n </div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--button\">\n <div data-braintree-id=\"paypal-button\" class=\"braintree-sheet__button--paypal\"></div>\n </div>\n </div>\n <div data-braintree-id=\"paypalCredit\" class=\"braintree-paypalCredit braintree-sheet\">\n <div data-braintree-id=\"paypal-credit-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#logoPayPalCredit\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__label\">{{PayPal Credit}}</div>\n </div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--button\">\n <div data-braintree-id=\"paypal-credit-button\" class=\"braintree-sheet__button--paypal\"></div>\n </div>\n </div>\n <div data-braintree-id=\"card\" class=\"braintree-card braintree-form braintree-sheet\">\n <div data-braintree-id=\"card-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg height=\"24\" width=\"40\" class=\"braintree-icon--bordered\">\n <use xlink:href=\"#iconCardFront\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__text\">{{payWithCard}}</div>\n </div>\n <div data-braintree-id=\"card-view-icons\" class=\"braintree-sheet__icons\"></div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--form\">\n <div data-braintree-id=\"number-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{cardNumberLabel}}</div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form-number braintree-form__hosted-field\"></div>\n <div class=\"braintree-form__icon-container\">\n <div data-braintree-id=\"card-number-icon\" class=\"braintree-form__icon braintree-form__field-secondary-icon\">\n <svg height=\"24\" width=\"40\" class=\"braintree-icon--bordered\">\n <use data-braintree-id=\"card-number-icon-svg\" xlink:href=\"#iconCardFront\"></use>\n </svg>\n </div>\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg height=\"24\" width=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"number-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div class=\"braintree-form__flexible-fields\">\n <div data-braintree-id=\"expiration-date-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{expirationDateLabel}}\n <span class=\"braintree-form__descriptor\">{{expirationDateLabelSubheading}}</span>\n </div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-expiration\"></div>\n <div class=\"braintree-form__icon-container\">\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg height=\"24\" width=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n\n <div data-braintree-id=\"expiration-date-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div data-braintree-id=\"cvv-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{cvvLabel}}\n <span data-braintree-id=\"cvv-label-descriptor\" class=\"braintree-form__descriptor\">{{cvvThreeDigitLabelSubheading}}</span>\n </div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-cvv\"></div>\n <div class=\"braintree-form__icon-container\">\n <div data-braintree-id=\"cvv-icon\" class=\"braintree-form__icon braintree-form__field-secondary-icon\">\n <svg height=\"24\" width=\"40\" class=\"braintree-icon--bordered\">\n <use data-braintree-id=\"cvv-icon-svg\" xlink:href=\"#iconCVVBack\"></use>\n </svg>\n </div>\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg height=\"24\" width=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"cvv-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div data-braintree-id=\"postal-code-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{postalCodeLabel}}</div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-postal-code\"></div>\n <div class=\"braintree-form__icon-container\">\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg height=\"24\" width=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"postal-code-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"sheet-error\" class=\"braintree-sheet__error\">\n <div class=\"braintree-form__icon braintree-sheet__error-icon\">\n <svg height=\"24\" width=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n <div data-braintree-id=\"sheet-error-text\" class=\"braintree-sheet__error-text\"></div>\n </div>\n </div>\n </div>\n\n <div data-braintree-id=\"lower-container\" class=\"braintree-test-class braintree-options braintree-hidden\">\n <div data-braintree-id=\"other-ways-to-pay\" class=\"braintree-heading\">{{otherWaysToPay}}</div>\n </div>\n\n <div data-braintree-id=\"toggle\" class=\"braintree-toggle braintree-hidden\" tabindex=\"0\">\n <span>{{chooseAnotherWayToPay}}</span>\n </div>\n</div>\n"; | ||
| var svgHTML = "<svg data-braintree-id=\"svgs\" style=\"display: none\">\n <defs>\n <symbol id=\"icon-visa\" viewBox=\"0 0 53 32\">\n <title>Visa</title>\n <path fill=\"#fff\" d=\"M0 2.57C0 1.151 1.189 0 2.657 0h48.02c1.467 0 2.657 1.151 2.657 2.57v26.86c0 1.419-1.189 2.57-2.657 2.57H2.657C1.19 32 0 30.849 0 29.43V2.57z\"/>\n <path fill=\"#f8b600\" d=\"M0 29.377C0 30.826 1.189 32 2.657 32h48.02c1.467 0 2.657-1.175 2.657-2.623v-2.603H.001v2.603z\"/>\n <path fill=\"#1a1f71\" d=\"M0 5.227h53.333V2.624c0-1.449-1.189-2.623-2.657-2.623H2.656C1.189.001-.001 1.176-.001 2.624v2.603zm26.128 5.287l-2.815 12.637h-3.405l2.815-12.637h3.404zm14.324 8.16l1.792-4.746 1.031 4.746h-2.823zm3.8 4.477H47.4l-2.75-12.637h-2.904c-.654 0-1.206.364-1.45.926l-5.109 11.711h3.575l.71-1.887h4.367l.413 1.887zm-8.888-4.126c.015-3.335-4.801-3.52-4.769-5.01.01-.453.46-.935 1.443-1.059.488-.06 1.833-.109 3.358.566l.596-2.681c-.819-.284-1.873-.559-3.184-.559-3.366 0-5.734 1.717-5.752 4.177-.022 1.819 1.691 2.834 2.979 3.44 1.328.619 1.773 1.017 1.767 1.57-.009.848-1.059 1.223-2.036 1.237-1.713.026-2.705-.445-3.497-.799l-.618 2.77c.797.35 2.265.655 3.785.671 3.578 0 5.918-1.697 5.928-4.324zm-14.101-8.511l-5.516 12.637h-3.599L9.433 13.065c-.164-.62-.308-.848-.808-1.11-.819-.427-2.17-.826-3.359-1.075l.08-.367h5.793c.738 0 1.402.472 1.571 1.288l1.434 7.313 3.542-8.601h3.577z\"/>\n </symbol>\n\n <symbol id=\"icon-master-card\" viewBox=\"0 0 55 32\">\n <title>MasterCard</title>\n <path fill=\"#fff\" d=\"M.667 2.57C.667 1.151 1.856 0 3.324 0h48.02c1.467 0 2.657 1.151 2.657 2.57v26.86c0 1.419-1.189 2.57-2.657 2.57H3.324C1.857 32 .667 30.849.667 29.43V2.57z\"/>\n <path fill=\"#000\" d=\"M15.447 29.6v-1.814c0-.695-.425-1.149-1.152-1.149-.364 0-.758.121-1.031.514-.212-.333-.516-.514-.971-.514-.303 0-.607.091-.849.423v-.363h-.637V29.6h.637v-1.602c0-.514.273-.756.698-.756s.637.272.637.756V29.6h.637v-1.602c0-.514.303-.756.698-.756.425 0 .637.272.637.756V29.6h.698zm9.432-2.903h-1.031v-.877h-.637v.877h-.576v.575h.576v1.33c0 .665.273 1.058 1.001 1.058.273 0 .576-.091.789-.212l-.182-.544c-.182.121-.394.151-.546.151-.303 0-.425-.181-.425-.484v-1.3h1.031v-.575zm5.399-.06c-.364 0-.607.181-.758.423v-.363h-.637V29.6h.637v-1.633c0-.484.212-.756.607-.756.121 0 .273.03.394.06l.182-.605c-.121-.03-.303-.03-.425-.03zm-8.159.302c-.303-.212-.728-.302-1.183-.302-.728 0-1.213.363-1.213.937 0 .484.364.756 1.001.847l.303.03c.334.06.516.151.516.302 0 .212-.243.363-.667.363s-.758-.151-.971-.302l-.303.484c.334.242.789.363 1.244.363.849 0 1.334-.393 1.334-.937 0-.514-.394-.786-1.001-.877l-.303-.03c-.273-.03-.485-.091-.485-.272 0-.212.212-.333.546-.333.364 0 .728.151.91.242l.273-.514zm16.924-.302c-.364 0-.607.181-.758.423v-.363h-.637V29.6h.637v-1.633c0-.484.212-.756.607-.756.121 0 .273.03.394.06l.182-.605c-.121-.03-.303-.03-.425-.03zm-8.128 1.511c0 .877.607 1.512 1.547 1.512.425 0 .728-.091 1.031-.333l-.303-.514c-.243.181-.485.272-.758.272-.516 0-.88-.363-.88-.937 0-.544.364-.907.88-.937.273 0 .516.091.758.272l.303-.514c-.303-.242-.607-.333-1.031-.333-.94 0-1.547.635-1.547 1.512zm5.884 0v-1.451h-.637v.363c-.212-.272-.516-.423-.91-.423-.819 0-1.456.635-1.456 1.512s.637 1.512 1.456 1.512c.425 0 .728-.151.91-.423v.363h.637V28.15zm-2.336 0c0-.514.334-.937.88-.937.516 0 .88.393.88.937 0 .514-.364.937-.88.937-.546-.03-.88-.423-.88-.937zm-7.612-1.511c-.849 0-1.456.605-1.456 1.512s.607 1.512 1.486 1.512c.425 0 .849-.121 1.183-.393l-.303-.454c-.243.181-.546.302-.849.302-.394 0-.789-.181-.88-.695h2.153v-.242c.03-.937-.516-1.542-1.334-1.542zm0 .544c.394 0 .667.242.728.695h-1.516c.061-.393.334-.695.789-.695zm15.801.967v-2.6h-.637v1.512c-.212-.272-.516-.423-.91-.423-.819 0-1.456.635-1.456 1.512s.637 1.512 1.456 1.512c.425 0 .728-.151.91-.423v.363h.637V28.15zm-2.335 0c0-.514.334-.937.88-.937.516 0 .88.393.88.937 0 .514-.364.937-.88.937-.546-.03-.88-.423-.88-.937zm-21.291 0v-1.451h-.637v.363c-.212-.272-.516-.423-.91-.423-.819 0-1.456.635-1.456 1.512s.637 1.512 1.456 1.512c.425 0 .728-.151.91-.423v.363h.637V28.15zm-2.366 0c0-.514.334-.937.88-.937.516 0 .88.393.88.937 0 .514-.364.937-.88.937-.546-.03-.88-.423-.88-.937z\"/>\n <path fill=\"#ff5f00\" d=\"M31.46 4.655h-9.553v17.113h9.553z\"/>\n <path fill=\"#eb001b\" d=\"M22.51 13.212c0-3.477 1.638-6.561 4.155-8.557-1.85-1.451-4.185-2.328-6.733-2.328-6.035 0-10.918 4.868-10.918 10.885s4.883 10.885 10.918 10.885c2.548 0 4.883-.877 6.733-2.328-2.517-1.965-4.155-5.08-4.155-8.557z\"/>\n <path fill=\"#f79e1b\" d=\"M44.345 13.212c0 6.017-4.883 10.885-10.918 10.885-2.548 0-4.883-.877-6.733-2.328 2.548-1.996 4.155-5.08 4.155-8.557s-1.638-6.561-4.155-8.557c1.85-1.451 4.185-2.328 6.733-2.328 6.035 0 10.918 4.898 10.918 10.885z\"/>\n </symbol>\n\n <symbol id=\"icon-unionpay\" viewBox=\"0 0 53 32\">\n <title>Union Pay</title>\n <path fill=\"#fff\" d=\"M51.111 32H2.222C1 32 0 31.04 0 29.867V2.134C0 .961 1 .001 2.222.001h48.889c1.222 0 2.222.96 2.222 2.133v27.733c0 1.173-1 2.133-2.222 2.133z\"/>\n <path fill=\"#e21836\" d=\"M13.169 2.667h10.835c1.513 0 2.453 1.241 2.1 2.769l-5.045 21.799C20.703 28.758 19.188 30 17.676 30H6.841c-1.513 0-2.453-1.241-2.101-2.765L9.787 5.436c.353-1.528 1.866-2.769 3.382-2.769z\"/>\n <path fill=\"#00447b\" d=\"M23.1 2.667h12.459c1.513 0 .831 1.241.475 2.769l-5.045 21.799C30.636 28.758 30.746 30 29.231 30h-12.46c-1.516 0-2.453-1.241-2.097-2.765l5.043-21.799c.357-1.528 1.868-2.769 3.382-2.769z\"/>\n <path fill=\"#007b84\" d=\"M35.068 2.667h10.833c1.514 0 2.455 1.241 2.1 2.769l-5.044 21.799C42.603 28.758 41.088 30 39.571 30h-10.83c-1.517 0-2.456-1.241-2.1-2.765l5.042-21.799c.354-1.528 1.869-2.769 3.384-2.769z\"/>\n <path fill=\"#fefefe\" d=\"M36.843 18.763l-1.321 4.399h.356l-.275.908h-.355l-.083.282h-1.256l.086-.282H31.44l.258-.841h.259l1.339-4.466.267-.902h1.283l-.135.455s.342-.247.665-.332c.322-.086 2.181-.118 2.181-.118l-.275.896h-.439zm-2.259 0l-.339 1.124s.38-.173.588-.23c.211-.054.526-.076.526-.076l.245-.818h-1.019zm-.508 1.682l-.35 1.169s.388-.2.596-.262c.21-.049.528-.088.528-.088l.247-.818h-1.022zm-.817 2.729h1.022l.295-.988h-1.02l-.297.988z\"/>\n <path fill=\"#fefefe\" d=\"M37.407 17.867h1.369l.015.514c-.008.087.065.128.224.128h.279l-.254.848h-.739c-.641.047-.883-.23-.868-.542l-.026-.948zm.183 4.02h-1.303l.223-.755H38l.214-.688h-1.473l.253-.851h4.097l-.258.851h-1.372l-.216.688h1.378l-.227.755h-1.491l-.264.319h.604l.147.95c.016.094.018.155.048.196.03.035.211.05.317.05h.182l-.279.926h-.465c-.073 0-.178-.006-.325-.014-.14-.011-.24-.094-.333-.14-.086-.042-.212-.147-.243-.323l-.145-.948-.677.935c-.215.295-.507.519-.998.519h-.949l.248-.825h.363c.104 0 .198-.041.265-.076.07-.03.131-.065.201-.168l.986-1.401zm-14.286-2.065h3.453l-.253.829h-1.383l-.214.707h1.412l-.258.857h-1.412l-.342 1.149c-.042.127.334.145.471.145l.706-.098-.283.947h-1.593c-.127 0-.224-.018-.363-.049-.134-.033-.192-.094-.253-.186-.057-.094-.146-.171-.085-.371l.457-1.524h-.784l.26-.87h.789l.208-.707h-.783l.25-.829zm2.327-1.491h1.416l-.259.867h-1.935l-.211.183c-.089.087-.12.05-.238.116-.11.054-.34.164-.638.164h-.621l.252-.833h.187c.158 0 .265-.014.319-.049.061-.039.13-.128.209-.27l.355-.651h1.41l-.247.474zm2.022-.465h1.207l-.176.612s.381-.307.649-.416c.265-.099.866-.19.866-.19l1.953-.009-.664 2.23c-.114.382-.244.629-.325.741-.074.116-.16.211-.331.306-.166.088-.315.139-.453.153-.129.009-.326.015-.6.017h-1.881l-.532 1.765c-.049.175-.074.258-.041.305.028.042.091.09.18.09l.829-.079-.283.967h-.929c-.295 0-.51-.006-.661-.018-.144-.012-.293 0-.393-.078-.087-.077-.219-.177-.216-.281.01-.096.049-.255.109-.473l1.691-5.642zm2.563 2.254h-1.979l-.122.401h1.713c.202-.025.243.004.26-.006l.127-.396zm-1.87-.363s.386-.354 1.049-.47c.15-.029 1.092-.02 1.092-.02l.143-.477h-1.995l-.288.967z\"/>\n <path fill=\"#fefefe\" d=\"M31.176 21.468l-.111.535c-.048.167-.09.294-.215.402-.13.112-.287.23-.649.23l-.669.027-.005.605c-.008.172.037.155.064.182.032.03.059.043.089.054l.211-.011.639-.037-.263.884h-.735c-.514 0-.895-.012-1.021-.112-.123-.078-.14-.178-.137-.347l.047-2.36h1.172l-.015.482h.282c.096 0 .161-.01.202-.035.034-.027.061-.064.08-.124l.114-.376h.921zM14.453 9.63c-.041.19-.794 3.684-.796 3.685-.162.706-.279 1.212-.678 1.535-.228.188-.493.281-.8.281-.492 0-.782-.247-.831-.716l-.009-.16s.15-.948.151-.951c0 0 .79-3.183.931-3.603.005-.024.009-.035.012-.047-1.536.014-1.81 0-1.828-.023-.009.031-.049.23-.049.23l-.806 3.585-.07.306-.131.994c0 .294.056.535.171.739.368.647 1.415.743 2.007.743.764 0 1.479-.164 1.962-.461.84-.5 1.062-1.282 1.257-1.975l.09-.355s.814-3.307.954-3.736c.003-.024.007-.035.011-.047-1.113.012-1.441 0-1.546-.023zm4.495 6.562c-.544-.008-.736-.008-1.373.024l-.026-.048c.057-.243.116-.484.17-.731l.079-.333c.117-.519.232-1.123.247-1.306.011-.112.049-.388-.266-.388-.132 0-.271.065-.41.13-.077.276-.232 1.051-.305 1.406-.158.745-.169.829-.239 1.199l-.046.049c-.561-.008-.755-.008-1.402.024l-.03-.053c.109-.443.216-.89.319-1.331.272-1.2.335-1.659.411-2.269l.051-.037c.629-.088.782-.106 1.464-.247l.057.065-.103.383c.115-.069.225-.139.344-.201.322-.159.68-.205.876-.205.297 0 .624.084.761.431.13.31.044.692-.126 1.445l-.089.382c-.174.837-.203.99-.301 1.565l-.064.049zm2.212 0c-.328-.002-.54-.008-.746-.002-.205.002-.405.012-.71.026l-.018-.026-.02-.028c.083-.318.13-.429.171-.541s.08-.225.153-.547c.095-.42.155-.714.195-.971.044-.249.07-.461.101-.707l.025-.019.027-.024c.326-.047.535-.076.746-.11.214-.031.429-.073.767-.137l.013.03.01.029c-.063.261-.126.519-.189.784-.061.263-.123.522-.182.783-.122.552-.171.759-.2.906-.028.141-.035.218-.085.504l-.029.025-.03.024zm4.896-1.888c.191-.843.044-1.238-.144-1.479-.284-.365-.785-.483-1.305-.483-.313 0-1.057.032-1.64.573-.416.388-.611.918-.727 1.423-.117.516-.254 1.447.596 1.792.264.113.64.144.883.144.622 0 1.26-.173 1.739-.684.372-.416.54-1.033.598-1.287zm-1.425-.061c-.029.141-.152.67-.32.896-.117.165-.255.264-.409.264-.044 0-.313 0-.318-.402-.003-.198.037-.404.086-.624.144-.639.314-1.175.745-1.175.34 0 .363.398.214 1.039zm14.75 2.006c-.657-.005-.846-.005-1.455.02l-.04-.049c.167-.629.332-1.257.479-1.892.19-.826.233-1.177.297-1.659l.049-.042c.653-.094.834-.12 1.514-.247l.021.057c-.124.518-.248 1.036-.368 1.555-.251 1.088-.343 1.641-.438 2.21l-.061.046z\"/>\n <path fill=\"#fefefe\" d=\"M39.694 14.378c.191-.839-.577-.075-.701-.351-.188-.432-.07-1.308-.828-1.601-.292-.113-.975.034-1.56.571-.412.386-.611.91-.725 1.415-.118.508-.253 1.437.591 1.771.268.114.512.147.756.137.849-.047 1.497-1.338 1.976-1.849.37-.404.435.153.491-.094zm-1.3-.062c-.032.135-.155.67-.324.892-.111.158-.378.258-.53.258-.042 0-.309 0-.319-.398-.003-.196.038-.401.088-.624.145-.626.313-1.159.746-1.159.339 0 .484.388.338 1.03zm-8.618 1.876c-.547-.008-.733-.008-1.374.024l-.024-.048c.054-.243.116-.484.174-.731l.076-.333c.119-.519.233-1.123.246-1.306.011-.112.048-.388-.263-.388-.135 0-.271.065-.411.13-.076.276-.233 1.051-.309 1.406-.154.745-.166.829-.235 1.199l-.047.049c-.561-.008-.755-.008-1.4.024l-.029-.053c.108-.443.214-.89.317-1.331.271-1.2.334-1.659.41-2.269l.05-.037c.63-.088.783-.106 1.465-.247l.055.065-.099.383c.111-.069.226-.139.342-.201.319-.159.68-.205.874-.205.298 0 .627.084.766.431.127.31.042.692-.131 1.445l-.086.382c-.178.837-.205.99-.3 1.565l-.067.049zm5.318-4.517c-.096.435-.377.803-.739.982-.3.151-.664.163-1.042.163h-.243l.018-.098s.45-1.964.448-1.959l.012-.101.01-.078.178.019s.925.081.948.083c.366.14.516.509.41.988zm-.59-2.05c-.002 0-.452.005-.452.005-1.179.014-1.652.008-1.845-.016-.018.086-.049.242-.049.242s-.42 1.969-.42 1.971c0 0-1.01 4.187-1.058 4.383 1.027-.012 1.45-.012 1.626.006.041-.196.28-1.365.282-1.365 0 0 .203-.858.216-.889 0 0 .064-.089.129-.124h.093c.887 0 1.891 0 2.674-.583.533-.399.9-.986 1.063-1.701.042-.176.073-.386.073-.594 0-.274-.054-.545-.213-.757-.401-.565-1.196-.573-2.118-.578zm10.259 2.749l-.052-.059c-.672.135-.794.159-1.412.241l-.046.045c-.003.008-.004.02-.007.029l-.003-.009c-.461 1.07-.446.839-.821 1.68-.003-.039-.004-.065-.005-.103l-.092-1.824-.059-.059c-.704.135-.722.159-1.372.241l-.052.045c-.005.023-.007.047-.01.073l.005.01c.081.419.062.325.143.984.038.323.088.651.124.971.066.534.102.8.179 1.616-.438.731-.544 1.007-.963 1.649l.023.059c.636-.024.782-.024 1.253-.024l.104-.117c.355-.771 3.062-5.448 3.062-5.448zm-23.005.453c.36-.253.405-.602.101-.782-.308-.182-.845-.125-1.208.128-.365.249-.406.6-.099.782.304.178.844.125 1.206-.128z\"/>\n <path fill=\"#fefefe\" d=\"M41.651 17.886l-.53.912c-.167.311-.477.545-.971.547l-.843-.013.246-.822h.165c.085 0 .149-.006.198-.03.041-.014.073-.047.107-.096l.311-.498h1.318z\"/>\n </symbol>\n\n <symbol id=\"icon-american-express\" viewBox=\"0 0 55 32\">\n <title>American Express</title>\n <path fill=\"#fff\" d=\"M51.778 32H2.889c-1.222 0-2.222-.96-2.222-2.133V2.134c0-1.173 1-2.133 2.222-2.133h48.889C53 .001 54 .961 54 2.134v27.733C54 31.04 53 32 51.778 32z\"/>\n <path fill=\"#1478be\" d=\"M9.013 16.427h3.083l-1.541-3.547zm28.125-3.125h-4.984v1.64h4.887v1.846H32.14v1.846h5.095v1.34c.831-1.025 1.772-1.955 2.7-2.98l.941-1.025c-1.246-1.34-2.492-2.775-3.738-4.101v1.435z\"/>\n <path fill=\"#1478be\" d=\"M51.667 9.333h-7.473L42.423 11.2l-1.661-1.867h-17.45l-1.356 3.222-1.453-3.222H7.73L2.333 22h6.435l.83-2.074h1.868l.83 2.074h28.355l1.771-1.977L44.193 22h7.473l-5.812-6.223 5.812-6.444zm-23.581 10.8H26.01v-6.956l-3.114 6.956h-1.771l-3.114-6.956-.111 6.956h-4.262l-.83-2.074H8.449l-.941 2.074H5.225l3.847-9.03h3.224l3.529 8.311v-8.311h3.529l2.809 6.015 2.491-6.015h3.432v9.03zm19.637 0h-2.698l-2.698-3.015-2.698 3.015h-9.548v-9.03h9.964l2.394 2.904 2.698-2.904h2.698l-4.151 4.563 4.041 4.467z\"/>\n </symbol>\n\n <symbol id=\"icon-jcb\" viewBox=\"0 0 53 32\">\n <title>JCB</title>\n <path fill=\"#fff\" d=\"M51.111 32H2.222C1 32 0 31.04 0 29.867V2.134C0 .961 1 .001 2.222.001h48.889c1.222 0 2.222.96 2.222 2.133v27.733c0 1.173-1 2.133-2.222 2.133z\"/>\n <path fill=\"#53b230\" d=\"M44.363 2.679h.018v.523c0 .478.001 22.023 0 22.228-.006 1.436-.684 2.803-1.829 3.661-.838.628-1.821.895-2.854.895-.582 0-6.444.033-6.473-.002-.012-.015 0-.091 0-.109V20.78c0-.051.007-.084.045-.084h7.004c1.157 0 1.792-.343 2.256-.814.586-.596.766-1.548.393-2.308-.32-.651-.981-1.04-1.659-1.217-.211-.055-.427-.091-.644-.111-.014-.001-.086.002-.095-.008-.04-.045.032-.054.052-.061.137-.044.287-.056.425-.098.711-.217 1.326-.727 1.518-1.472.199-.769-.066-1.591-.7-2.069-.454-.343-1.023-.501-1.582-.551-.57-.051-6.364-.029-6.943-.029-.098 0-.07-.027-.07-.118V7.507c0-.413.013-.821.099-1.227.167-.789.546-1.525 1.086-2.12.745-.82 1.782-1.346 2.881-1.457.636-.064 6.521-.022 7.072-.023zm-5.412 11.489c.079.362-.014.756-.273 1.024-.229.237-.54.333-.862.339-.26.005-2.3 0-2.384 0 0-.045.004-2.161.004-2.191.016-.036.024-.024.078-.024.131 0 2.286-.005 2.433.006.309.025.601.161.797.407.102.128.171.278.207.438zm-3.515 2.718c.575 0 2.303-.002 2.592 0 .322.002.624.083.868.304.301.272.436.686.377 1.087-.052.35-.259.665-.562.845-.25.148-.52.166-.802.166-.289 0-2.406.001-2.473.001 0-.045.001-2.38.001-2.402z\"/>\n <path fill=\"#006cb9\" d=\"M8.766 18.518c-.08-.038-.079-.022-.094-.079-.009-.034-.007-11.152.004-11.41.054-1.269.649-2.476 1.614-3.291.688-.581 1.545-.948 2.44-1.039.528-.054 1.07-.023 1.6-.023.919 0 5.477-.018 5.494 0 .009.01.002 22.344 0 22.765-.006 1.275-.539 2.504-1.475 3.364-.674.62-1.534 1.027-2.44 1.148-.545.073-6.695.041-7.151.041-.087 0-.07.018-.087-.032-.011-.034 0-9.333 0-9.563.882.239 1.8.375 2.707.466.882.089 1.772.124 2.657.082 1.238-.058 2.595-.256 3.616-1.016.426-.317.766-.737.973-1.23.198-.471.267-.981.268-1.489.001-.463.008-5.238-.022-5.255s-3.846-.02-3.866.016c-.017.03.001 5.161 0 5.267-.004.626-.214 1.245-.686 1.669-.624.562-1.48.627-2.276.564-.916-.073-1.81-.326-2.657-.677-.21-.087-.416-.18-.621-.278z\"/>\n <path fill=\"#e20138\" d=\"M21.265 13.113c-.032.026-.063.052-.094.078V8.068c0-.393-.016-.792.013-1.184.16-2.124 1.83-3.898 3.925-4.168.509-.066 7.196-.056 7.214-.035.011.013 0 .083 0 .099v22.609c-.001 1.738-.967 3.359-2.52 4.132-.673.335-1.394.469-2.14.469-.43 0-6.343.019-6.445 0-.068-.012-.031.013-.047-.03-.01-.027 0-8.729 0-9.92v-.561c.739.638 1.674.999 2.615 1.208.713.159 1.443.235 2.173.262.714.027 1.434.014 2.146-.05.728-.066 1.451-.181 2.167-.326.182-.037.364-.076.545-.118.045-.01.226-.025.25-.06.018-.026 0-.129 0-.159V18.47c-.775.389-1.588.7-2.439.87-1.039.207-2.189.264-3.18-.164-1.003-.434-1.599-1.364-1.699-2.449-.102-1.115.229-2.288 1.176-2.948.981-.685 2.267-.69 3.404-.509.846.134 1.661.408 2.434.776.102.049.204.099.305.15v-1.767c0-.028.018-.136 0-.159-.028-.037-.202-.05-.25-.061-.089-.02-.178-.04-.267-.059-.711-.153-1.429-.276-2.152-.354-.708-.077-1.422-.101-2.135-.087-.724.014-1.449.072-2.161.206-.881.166-1.76.449-2.511.954-.112.076-.221.156-.327.242z\"/>\n </symbol>\n\n <symbol id=\"icon-discover\" viewBox=\"0 0 53 32\">\n <title>Discover</title>\n <path fill=\"#fff\" d=\"M51.111 32H2.222C1 32 0 31.04 0 29.867V2.134C0 .961 1 .001 2.222.001h48.889c1.222 0 2.222.96 2.222 2.133v27.733c0 1.173-1 2.133-2.222 2.133z\"/>\n <path fill=\"#f48024\" d=\"M51.993 15.667S36.696 26.799 8.667 31.334H50.66c.736 0 1.333-.597 1.333-1.333V15.668z\"/>\n <path fill=\"#221f20\" d=\"M7.109 15.677c-.45.407-1.035.585-1.96.585h-.384V11.4h.384c.925 0 1.487.166 1.96.595.495.441.793 1.126.793 1.83 0 .706-.298 1.411-.793 1.853zm-1.673-5.523H3.334v7.352h2.091c1.112 0 1.915-.262 2.62-.849.838-.694 1.333-1.74 1.333-2.822 0-2.17-1.619-3.681-3.942-3.681zm4.604 7.353h1.432v-7.352H10.04zm4.93-4.531c-.86-.318-1.112-.528-1.112-.926 0-.463.45-.815 1.067-.815.429 0 .782.177 1.155.595l.75-.983c-.616-.539-1.353-.815-2.158-.815-1.299 0-2.29.903-2.29 2.107 0 1.013.462 1.532 1.807 2.016.561.198.846.33.99.419.286.187.429.452.429.761 0 .596-.473 1.037-1.112 1.037-.683 0-1.233-.342-1.563-.981l-.925.892c.66.97 1.453 1.4 2.542 1.4 1.488 0 2.532-.991 2.532-2.414 0-1.168-.483-1.697-2.112-2.294zm2.563.86c0 2.161 1.695 3.837 3.876 3.837.617 0 1.145-.121 1.796-.428v-1.688c-.573.574-1.08.805-1.729.805-1.443 0-2.466-1.047-2.466-2.536 0-1.412 1.056-2.525 2.4-2.525.683 0 1.2.244 1.796.827v-1.687c-.629-.319-1.146-.452-1.762-.452-2.17 0-3.91 1.71-3.91 3.848zm17.03 1.256l-1.957-4.939h-1.565l3.116 7.541h.771l3.172-7.541h-1.552zm4.184 2.415h4.061v-1.245h-2.631v-1.984h2.535v-1.245h-2.535v-1.632h2.631v-1.247h-4.061zm6.862-3.968h-.418v-2.227h.441c.892 0 1.377.374 1.377 1.09 0 .739-.485 1.137-1.4 1.137zm2.874-1.214c0-1.377-.947-2.171-2.599-2.171H43.76v7.353h1.431v-2.954h.187l1.982 2.954h1.761l-2.312-3.097c1.079-.22 1.673-.959 1.673-2.084z\"/>\n <path fill=\"#f48024\" d=\"M31.469 13.835c0 2.159-1.747 3.909-3.904 3.909-2.156 0-3.904-1.75-3.904-3.909s1.748-3.909 3.904-3.909c2.157 0 3.904 1.75 3.904 3.909z\"/>\n </symbol>\n\n <symbol id=\"icon-diners-club\" viewBox=\"0 0 55 32\">\n <title>Diners Club</title>\n <path fill=\"#fff\" d=\"M51.778 32H2.889c-1.222 0-2.222-.96-2.222-2.133V2.134c0-1.173 1-2.133 2.222-2.133h48.889C53 .001 54 .961 54 2.134v27.733C54 31.04 53 32 51.778 32z\"/>\n <path fill=\"#fefefe\" d=\"M11.36 15.773c0-7.275 6.053-13.172 13.519-13.172s13.519 5.897 13.519 13.172-6.052 13.173-13.519 13.173S11.36 23.048 11.36 15.773z\"/>\n <path fill=\"#fff\" d=\"M42.696 29.333H10.667V2h32.029z\"/>\n <path fill=\"#004a97\" d=\"M32.695 15.643c-.005-3.379-2.145-6.261-5.159-7.402v14.804c3.014-1.143 5.154-4.022 5.159-7.402zm-10.911 7.399v-14.8c-3.012 1.145-5.148 4.023-5.156 7.401.008 3.377 2.144 6.255 5.156 7.399zM24.661 3.13c-7 .003-12.67 5.602-12.672 12.513.001 6.91 5.672 12.508 12.672 12.51 7-.001 12.672-5.6 12.673-12.51-.002-6.91-5.674-12.51-12.673-12.513zm-.031 26.203c-7.659.036-13.964-6.09-13.964-13.548 0-8.15 6.304-13.787 13.964-13.786h3.59c7.569-.001 14.477 5.633 14.477 13.786 0 7.455-6.908 13.548-14.477 13.548h-3.59z\"/>\n </symbol>\n\n <symbol id=\"icon-maestro\" viewBox=\"0 0 55 32\">\n <title>Maestro</title>\n <path fill=\"#fff\" d=\"M51.778 32H2.889c-1.222 0-2.222-.96-2.222-2.133V2.134c0-1.173 1-2.133 2.222-2.133h48.889C53 .001 54 .961 54 2.134v27.733C54 31.04 53 32 51.778 32z\"/>\n <path fill=\"#000\" d=\"M20.225 29.853v-1.855c.031-.618-.402-1.144-1.021-1.175h-.155c-.402-.031-.804.185-1.051.525-.216-.34-.588-.556-.99-.525-.34-.031-.68.155-.866.433v-.371h-.649v2.937h.649v-1.576c-.062-.371.216-.711.588-.773h.124c.433 0 .649.278.649.773v1.638h.649v-1.638c-.062-.371.216-.742.588-.773h.124c.433 0 .649.278.649.773v1.638l.711-.031zm3.618-1.453v-1.484h-.649v.371c-.216-.278-.557-.433-.928-.433-.866 0-1.546.68-1.546 1.546s.68 1.546 1.546 1.546c.371 0 .711-.155.928-.433v.371h.649V28.4zm-2.381 0c.031-.495.464-.866.959-.835s.866.464.835.958c-.031.464-.402.835-.897.835s-.897-.371-.897-.866c-.031-.062-.031-.062 0-.093zm16.112-1.545c.217 0 .433.031.619.124.186.062.371.185.495.34.155.155.247.309.34.495.155.402.155.835 0 1.236-.062.185-.186.34-.34.495s-.309.247-.495.34c-.402.155-.866.155-1.268 0-.186-.062-.371-.185-.495-.34-.155-.155-.247-.309-.34-.495-.155-.402-.155-.835 0-1.236.062-.185.186-.34.34-.495s.309-.247.495-.34c.216-.093.433-.155.649-.124zm0 .618c-.124 0-.247.031-.371.062s-.216.124-.309.185c-.093.093-.155.185-.186.309-.093.247-.093.525 0 .773.031.124.124.216.186.309.093.093.186.155.309.185.247.093.495.093.742 0 .124-.031.216-.124.309-.185.093-.093.155-.185.186-.309.093-.247.093-.525 0-.773-.031-.124-.124-.216-.186-.309-.093-.093-.186-.155-.309-.185-.124-.062-.247-.093-.371-.062zm-10.236.927c0-.927-.588-1.546-1.392-1.546-.866 0-1.546.711-1.515 1.576s.711 1.546 1.577 1.515c.433 0 .866-.124 1.206-.402l-.309-.464c-.247.185-.557.309-.866.309-.433.031-.835-.278-.897-.711h2.196v-.278zm-2.196-.278c.031-.402.371-.711.773-.711s.742.309.742.711h-1.515zm4.886-.464c-.278-.155-.588-.247-.928-.247s-.557.124-.557.34c0 .216.216.247.495.278l.309.031c.649.093 1.021.371 1.021.896s-.495.958-1.361.958c-.464 0-.897-.124-1.268-.371l.309-.495c.278.216.619.309.99.309.433 0 .68-.124.68-.371 0-.155-.155-.247-.526-.309l-.309-.031c-.649-.093-1.021-.402-1.021-.866 0-.587.495-.958 1.237-.958.433 0 .835.093 1.206.309l-.278.525zm3.093-.154H32.07v1.329c0 .309.093.495.433.495.186 0 .402-.062.557-.155l.186.556c-.247.155-.526.216-.804.216-.773 0-1.021-.402-1.021-1.082v-1.36h-.588v-.587h.588v-.896h.649v.896h1.051v.587zm2.227-.68c.155 0 .309.031.464.093l-.186.618c-.124-.062-.278-.062-.402-.062-.433 0-.618.278-.618.773v1.669h-.649v-2.937h.649v.371c.155-.34.433-.495.742-.525z\"/>\n <path fill=\"#7673c0\" d=\"M32.188 4.383h-9.741v17.496h9.741z\"/>\n <path fill=\"#eb001b\" d=\"M23.067 13.13c0-3.4 1.577-6.646 4.268-8.748C22.511.58 15.49 1.415 11.718 6.268c-3.804 4.822-2.969 11.839 1.886 15.61 4.051 3.184 9.711 3.184 13.762 0-2.721-2.102-4.299-5.317-4.299-8.748z\"/>\n <path fill=\"#00a1df\" d=\"M45.332 13.13c0 6.151-4.979 11.128-11.133 11.128-2.505 0-4.917-.835-6.865-2.38 4.824-3.771 5.659-10.788 1.886-15.61-.557-.711-1.175-1.329-1.886-1.886C32.158.58 39.179 1.415 42.982 6.268c1.515 1.947 2.35 4.389 2.35 6.862z\"/>\n </symbol>\n\n <symbol id=\"logoPayPal\" viewBox=\"0 0 51 32\">\n <title>PayPal Logo</title>\n <path fill=\"#fff\" fill-opacity=\"0\" d=\"M49.067 32H2.134C.961 32 .001 31.04.001 29.867V2.134C.001.961.961.001 2.134.001h46.933c1.173 0 2.133.96 2.133 2.133v27.733c0 1.173-.96 2.133-2.133 2.133z\"/>\n <path fill=\"#263b80\" d=\"M33.817 18.56c.427-.747.747-1.6.96-2.56.213-.853.213-1.707.107-2.347-.107-.747-.427-1.28-.853-1.813-.213-.32-.64-.533-.96-.747.107-.853.107-1.6 0-2.24s-.427-1.173-.96-1.707c-.96-1.067-2.773-1.707-5.333-1.707h-6.933c-.533 0-.853.32-.96.853l-2.88 18.347c0 .213 0 .32.107.427s.32.213.427.213h4.373l-.32 1.92c0 .107 0 .32.107.427s.213.213.427.213h3.627c.427 0 .747-.32.853-.747v-.213l.64-4.373v-.213c.107-.427.427-.747.853-.747h.64c1.813 0 3.413-.427 4.48-1.173.64-.533 1.173-1.067 1.6-1.813z\"/>\n <path fill=\"#263b80\" d=\"M23.144 11.094c0-.32.213-.533.533-.64.107-.107.213-.107.427-.107h5.44c.64 0 1.28 0 1.813.107.107 0 .32.107.427.107s.32.107.427.107c.107 0 .107 0 .213.107.32.107.533.213.747.32.32-1.707 0-2.88-.96-4.053-1.067-1.173-2.88-1.707-5.333-1.707h-6.933c-.533 0-.96.32-.96.853l-2.987 18.453c-.107.32.213.64.64.64h4.267l1.067-6.827 1.173-7.36z\"/>\n <path fill=\"#159bd7\" d=\"M33.067 11.094c0 .107 0 .32-.107.427-.96 4.693-4.053 6.293-8.107 6.293h-2.027c-.533 0-.853.32-.96.853l-1.067 6.613-.32 1.92c0 .32.213.64.533.64h3.627c.427 0 .747-.32.853-.747v-.213l.64-4.373v-.213c.107-.427.427-.747.853-.747h.747c3.52 0 6.293-1.387 7.04-5.547.32-1.707.213-3.2-.747-4.16-.213-.32-.533-.533-.96-.747z\"/>\n <path fill=\"#232c65\" d=\"M32.105 10.666c-.107 0-.32-.107-.427-.107s-.32-.107-.427-.107c-.533-.107-1.173-.107-1.813-.107h-5.44c-.107 0-.213 0-.427.107s-.427.32-.533.64l-1.173 7.36v.213c.107-.533.533-.853.96-.853h2.027c4.053 0 7.147-1.6 8.107-6.293 0-.107 0-.32.107-.427-.213-.107-.533-.213-.747-.32 0-.107-.107-.107-.213-.107z\"/>\n </symbol>\n\n <symbol id=\"logoPayPalCredit\" viewBox=\"0 0 125 45\">\n <title>PayPal Credit Logo</title>\n <path fill=\"#27346A\" d=\"M69.11 47.383h1.53c4.07 0 7.894-2.225 8.73-7.337.73-4.694-1.95-7.337-6.33-7.337h-1.123c-.275 0-.508.2-.55.47L69.11 47.383zm-3.708-19.64c.074-.464.474-.806.945-.806h8.85c7.3 0 12.412 5.737 11.265 13.11-1.182 7.37-8.137 13.108-15.404 13.108h-9.013c-.343 0-.605-.306-.55-.644L65.4 27.745zM53.943 33.516l-.567 3.574h7.032c.342 0 .604.306.55.645l-.675 4.32c-.073.465-.474.808-.945.808h-6.052c-.47 0-.87.34-.944.804l-.6 3.716h7.45c.34 0 .603.306.55.645l-.676 4.32c-.073.464-.474.807-.945.807H44.676c-.343 0-.604-.306-.55-.644l3.908-24.766c.073-.465.474-.807.944-.807h13.448c.342 0 .604.306.55.644L62.3 31.9c-.073.466-.475.81-.946.81h-6.466c-.47 0-.87.34-.945.806M92.413 53.155h-5.345c-.343 0-.605-.306-.55-.644l3.907-24.766c.074-.465.474-.807.945-.807h5.345c.343 0 .604.306.55.645L93.36 52.348c-.074.465-.474.807-.945.807M30.562 38.69h.66c2.226 0 4.786-.42 5.25-3.27.466-2.85-1.018-3.26-3.396-3.267h-.966c-.29 0-.538.21-.584.5l-.964 6.037zm11.7 14.465h-7.005c-.298 0-.57-.17-.698-.44l-4.624-9.644h-.07l-1.495 9.432c-.06.376-.383.653-.764.653h-5.5c-.344 0-.606-.306-.552-.644l3.932-24.92c.06-.376.385-.653.765-.653h9.528c5.18 0 8.727 2.468 7.858 8.067-.59 3.616-3.095 6.746-6.92 7.407l6.022 9.898c.226.37-.042.847-.477.847zM106.87 53.155h-5.346c-.343 0-.605-.306-.55-.644l3.13-19.8h-4.98c-.343 0-.605-.307-.552-.645l.677-4.32c.072-.465.473-.808.944-.808h16.61c.343 0 .605.306.55.644l-.675 4.32c-.074.466-.475.81-.946.81h-4.815l-3.107 19.64c-.073.463-.474.805-.944.805M21.902 34.388c-.08.486-.674.66-1.018.308-1.168-1.197-2.882-1.83-4.726-1.83-4.17 0-7.47 3.197-8.13 7.262-.625 4.134 1.737 7.122 5.975 7.122 1.748 0 3.602-.665 5.142-1.776.425-.307 1.01.06.925.578l-.97 6c-.057.356-.316.65-.663.75-2.075.61-3.67 1.05-5.614 1.05C1.52 53.85-.287 44.196.296 40.09 1.93 28.586 11.266 25.95 16.99 26.267c1.846.102 3.498.348 5.116.956.523.197.835.736.746 1.287l-.95 5.878\"/>\n <path fill=\"#2790C3\" d=\"M56.532 6.217c-.323 2.12-1.94 2.12-3.507 2.12h-.89l.625-3.958c.037-.24.243-.416.486-.416h.408c1.066 0 2.072 0 2.59.607.312.365.406.903.288 1.647zm-.68-5.53h-5.905c-.404 0-.747.295-.81.694L46.75 16.52c-.048.297.183.567.485.567h3.03c.282 0 .522-.205.567-.484l.677-4.292c.06-.398.405-.692.81-.692h1.867c3.89 0 6.133-1.88 6.72-5.61.264-1.633.01-2.914-.753-3.812-.84-.986-2.328-1.508-4.303-1.508z\"/>\n <path fill=\"#27346A\" d=\"M14.423 6.217c-.322 2.12-1.94 2.12-3.506 2.12h-.89l.624-3.958c.038-.24.245-.416.487-.416h.408c1.066 0 2.072 0 2.59.607.312.365.406.903.288 1.647zm-.68-5.53H7.837c-.404 0-.747.295-.81.694L4.64 16.52c-.047.297.184.567.486.567h2.82c.403 0 .747-.293.81-.692L9.4 12.31c.063-.398.406-.692.81-.692h1.868c3.89 0 6.133-1.88 6.72-5.61.264-1.633.01-2.914-.753-3.812-.84-.986-2.328-1.508-4.303-1.508zM27.448 11.65c-.273 1.617-1.555 2.7-3.19 2.7-.82 0-1.477-.263-1.9-.762-.417-.495-.575-1.2-.442-1.986.255-1.6 1.558-2.72 3.168-2.72.803 0 1.455.266 1.885.77.432.508.602 1.218.478 2zm3.94-5.5H28.56c-.24 0-.447.175-.485.414l-.124.79-.197-.285c-.612-.89-1.977-1.187-3.34-1.187-3.122 0-5.79 2.367-6.31 5.686-.27 1.655.114 3.238 1.053 4.342.862 1.015 2.093 1.438 3.56 1.438 2.518 0 3.914-1.618 3.914-1.618l-.126.786c-.047.3.183.57.486.57h2.546c.404 0 .747-.294.81-.693l1.528-9.677c.047-.3-.183-.57-.486-.57z\"/>\n <path fill=\"#2790C3\" d=\"M69.557 11.65c-.273 1.617-1.555 2.7-3.19 2.7-.82 0-1.477-.263-1.9-.762-.418-.495-.575-1.2-.442-1.986.254-1.6 1.557-2.72 3.168-2.72.803 0 1.455.266 1.885.77.433.508.603 1.218.48 2zm3.94-5.5H70.67c-.242 0-.45.175-.486.414l-.125.79-.198-.285c-.612-.89-1.977-1.187-3.34-1.187-3.122 0-5.79 2.367-6.31 5.686-.27 1.655.113 3.238 1.052 4.342.863 1.015 2.094 1.438 3.56 1.438 2.518 0 3.915-1.618 3.915-1.618l-.128.786c-.047.3.184.57.486.57h2.546c.404 0 .748-.294.81-.693l1.53-9.677c.046-.3-.185-.57-.487-.57z\"/>\n <path fill=\"#27346A\" d=\"M46.445 6.15h-2.84c-.273 0-.527.134-.68.36l-3.92 5.772-1.66-5.548c-.105-.347-.424-.585-.787-.585h-2.793c-.337 0-.574.33-.466.65l3.128 9.184-2.943 4.152c-.23.326.002.777.402.777h2.84c.267 0 .52-.132.673-.353l9.45-13.638c.226-.327-.008-.773-.405-.773\"/>\n <path fill=\"#2790C3\" d=\"M76.83 1.104L74.405 16.52c-.047.297.184.567.486.567h2.437c.403 0 .746-.293.81-.692l2.388-15.138c.048-.3-.183-.57-.486-.57h-2.727c-.242 0-.448.177-.486.417\"/>\n </symbol>\n\n <symbol id=\"iconCardFront\" viewBox=\"0 0 53 32\">\n <title>Generic Card</title>\n <path fill=\"#fff\" d=\"M51.308 32H2.025C1 32 0 31.04 0 30V2C0 .96 1 0 2.025 0h49.283c1.025 0 2.025.96 2.025 2v28c0 1.04-1 2-2.025 2z\"/>\n <path fill=\"#828282\" d=\"M5.333 10.444c0-.486.635-1.111 1.185-1.111h8.296c.55 0 1.185.625 1.185 1.111v4.444c0 .486-.635 1.111-1.185 1.111H6.518c-.55 0-1.185-.625-1.185-1.111v-4.444zm8 14.889h1.333c.736 0 1.333.597 1.333 1.333s-.597 1.333-1.333 1.333h-1.333c-.736 0-1.333-.597-1.333-1.333s.597-1.333 1.333-1.333zm-6.666 0H8c.736 0 1.333.597 1.333 1.333S8.736 27.999 8 27.999H6.667c-.736 0-1.333-.597-1.333-1.333s.597-1.333 1.333-1.333zm-1.334-4.666c0-1.105.891-2 2.001-2h38.665c1.105 0 2.001.888 2.001 2 0 1.105-.891 2-2.001 2H7.334c-1.105 0-2.001-.888-2.001-2zM48 7.333c0 1.841-1.492 3.333-3.333 3.333s-3.333-1.492-3.333-3.333C41.334 5.492 42.826 4 44.667 4S48 5.492 48 7.333z\"/>\n </symbol>\n\n <symbol id=\"iconCVVBack\" viewBox=\"0 0 53 32\">\n <title>CVV Back</title>\n <path fill=\"#fff\" d=\"M51.308 32H2.025C1 32 0 31.04 0 30V2C0 .96 1 0 2.025 0h49.283c1.025 0 2.025.96 2.025 2v28c0 1.04-1 2-2.025 2z\"/>\n <path fill=\"#828282\" d=\"M0 6.667h53.333V12H0V6.667z\"/>\n <path fill=\"#000\" d=\"M26.667 18.362v7.276c0 .563.492 1.029 1.092 1.029h17.816c.598 0 1.092-.465 1.092-1.029v-7.276c0-.563-.492-1.029-1.092-1.029H27.759c-.598 0-1.092.465-1.092 1.029zm-1.334-.189c0-1.2 1.013-2.173 2.239-2.173H45.76c1.237 0 2.239.982 2.239 2.173v7.654c0 1.2-1.013 2.173-2.239 2.173H27.572c-1.237 0-2.239-.982-2.239-2.173v-7.654z\"/>\n <path fill=\"#828282\" d=\"M33.333 22c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zm5.334 0c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zM44 22c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2z\"/>\n </symbol>\n\n <symbol id=\"iconCVVFront\" viewBox=\"0 0 53 32\">\n <title>CVV Front</title>\n <path fill=\"#fff\" d=\"M51.308 32H2.025C1 32 0 31.04 0 30V2C0 .96 1 0 2.025 0h49.283c1.025 0 2.025.96 2.025 2v28c0 1.04-1 2-2.025 2z\"/>\n <path fill=\"#000\" d=\"M21.333 7.695v7.276c0 .563.488 1.029 1.081 1.029h23.172c.592 0 1.081-.463 1.081-1.029V7.695c0-.563-.488-1.029-1.081-1.029H22.414c-.592 0-1.081.463-1.081 1.029zM20 7.506c0-1.2.998-2.173 2.212-2.173h23.576c1.222 0 2.212.982 2.212 2.173v7.654c0 1.2-.998 2.173-2.212 2.173H22.212c-1.222 0-2.212-.982-2.212-2.173V7.506z\"/>\n <path fill=\"#828282\" d=\"M28 11.333c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zm10.667 0c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zm-5.334 0c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zm10.667 0c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2zm-38.667-.889c0-.486.635-1.111 1.185-1.111h8.296c.55 0 1.185.625 1.185 1.111v4.444c0 .486-.635 1.111-1.185 1.111H6.518c-.55 0-1.185-.625-1.185-1.111v-4.444zm0 14.223c0-1.105.891-2 2.001-2h38.665c1.105 0 2.001.888 2.001 2 0 1.105-.891 2-2.001 2H7.334c-1.105 0-2.001-.888-2.001-2z\"/>\n </symbol>\n\n <symbol id=\"iconCheck\" viewBox=\"0 0 42 32\">\n <title>Check</title>\n <path class=\"path1\" d=\"M14.379 29.76L39.741 3.415 36.194.001l-21.815 22.79-10.86-11.17L0 15.064z\"/>\n </symbol>\n\n <symbol id=\"iconLockLoader\" viewBox=\"0 0 28 32\">\n <title>Lock Loader</title>\n <path d=\"M6 10V8c0-4.422 3.582-8 8-8 4.41 0 8 3.582 8 8v2h-4V7.995C18 5.79 16.205 4 14 4c-2.21 0-4 1.792-4 3.995V10H6zM.997 14c-.55 0-.997.445-.997.993v16.014c0 .548.44.993.997.993h26.006c.55 0 .997-.445.997-.993V14.993c0-.548-.44-.993-.997-.993H.997z\"/>\n </symbol>\n\n <symbol id=\"iconError\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n </symbol>\n </defs>\n</svg>\n"; | ||
| var mainHTML = "<div class=\"braintree-dropin\">\n <div data-braintree-id=\"methods-label\" class=\"braintree-heading\"> </div>\n <div data-braintree-id=\"choose-a-way-to-pay\" class=\"braintree-heading\">{{chooseAWayToPay}}</div>\n <div class=\"braintree-placeholder\"> </div>\n\n <div data-braintree-id=\"upper-container\" class=\"braintree-upper-container\">\n <div data-braintree-id=\"loading-container\" class=\"braintree-loader__container\">\n <div data-braintree-id=\"loading-indicator\" class=\"braintree-loader__indicator\">\n <svg width=\"14\" height=\"16\" class=\"braintree-loader__lock\">\n <use xlink:href=\"#iconLockLoader\"></use>\n </svg>\n </div>\n </div>\n\n <div data-braintree-id=\"methods\" class=\"braintree-methods braintree-methods-initial\">\n <div data-braintree-id=\"methods-container\"></div>\n </div>\n\n <div data-braintree-id=\"options\" class=\"braintree-test-class braintree-options braintree-options-initial\">\n <div data-braintree-id=\"payment-options-container\" class=\"braintree-options-list\"></div>\n </div>\n\n <div data-braintree-id=\"sheet-container\" class=\"braintree-sheet__container\">\n <div data-braintree-id=\"paypal\" class=\"braintree-paypal braintree-sheet\">\n <div data-braintree-id=\"paypal-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#logoPayPal\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__label\">{{PayPal}}</div>\n </div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--button\">\n <div data-braintree-id=\"paypal-button\" class=\"braintree-sheet__button--paypal\"></div>\n </div>\n </div>\n <div data-braintree-id=\"paypalCredit\" class=\"braintree-paypalCredit braintree-sheet\">\n <div data-braintree-id=\"paypal-credit-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#logoPayPalCredit\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__label\">{{PayPal Credit}}</div>\n </div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--button\">\n <div data-braintree-id=\"paypal-credit-button\" class=\"braintree-sheet__button--paypal\"></div>\n </div>\n </div>\n <div data-braintree-id=\"card\" class=\"braintree-card braintree-form braintree-sheet\">\n <div data-braintree-id=\"card-sheet-header\" class=\"braintree-sheet__header\">\n <div class=\"braintree-sheet__header-label\">\n <div class=\"braintree-sheet__logo--header\">\n <svg width=\"40\" height=\"24\" class=\"braintree-icon--bordered\">\n <use xlink:href=\"#iconCardFront\"></use>\n </svg>\n </div>\n <div class=\"braintree-sheet__text\">{{payWithCard}}</div>\n </div>\n <div data-braintree-id=\"card-view-icons\" class=\"braintree-sheet__icons\"></div>\n </div>\n <div class=\"braintree-sheet__content braintree-sheet__content--form\">\n <div data-braintree-id=\"number-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{cardNumberLabel}}</div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form-number braintree-form__hosted-field\"></div>\n <div class=\"braintree-form__icon-container\">\n <div data-braintree-id=\"card-number-icon\" class=\"braintree-form__icon braintree-form__field-secondary-icon\">\n <svg width=\"40\" height=\"24\" class=\"braintree-icon--bordered\">\n <use data-braintree-id=\"card-number-icon-svg\" xlink:href=\"#iconCardFront\"></use>\n </svg>\n </div>\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg width=\"24\" height=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"number-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div class=\"braintree-form__flexible-fields\">\n <div data-braintree-id=\"expiration-date-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{expirationDateLabel}}\n <span class=\"braintree-form__descriptor\">{{expirationDateLabelSubheading}}</span>\n </div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-expiration\"></div>\n <div class=\"braintree-form__icon-container\">\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg width=\"24\" height=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n\n <div data-braintree-id=\"expiration-date-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div data-braintree-id=\"cvv-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{cvvLabel}}\n <span data-braintree-id=\"cvv-label-descriptor\" class=\"braintree-form__descriptor\">{{cvvThreeDigitLabelSubheading}}</span>\n </div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-cvv\"></div>\n <div class=\"braintree-form__icon-container\">\n <div data-braintree-id=\"cvv-icon\" class=\"braintree-form__icon braintree-form__field-secondary-icon\">\n <svg width=\"40\" height=\"24\" class=\"braintree-icon--bordered\">\n <use data-braintree-id=\"cvv-icon-svg\" xlink:href=\"#iconCVVBack\"></use>\n </svg>\n </div>\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg width=\"24\" height=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"cvv-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n\n <div data-braintree-id=\"postal-code-field-group\" class=\"braintree-form__field-group\">\n <div class=\"braintree-form__label\">{{postalCodeLabel}}</div>\n <div class=\"braintree-form__field\">\n <div class=\"braintree-form__hosted-field braintree-form-postal-code\"></div>\n <div class=\"braintree-form__icon-container\">\n <div class=\"braintree-form__icon braintree-form__field-error-icon\">\n <svg width=\"24\" height=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"postal-code-field-error\" class=\"braintree-form__field-error\"></div>\n </div>\n </div>\n </div>\n </div>\n <div data-braintree-id=\"sheet-error\" class=\"braintree-sheet__error\">\n <div class=\"braintree-form__icon braintree-sheet__error-icon\">\n <svg width=\"24\" height=\"24\">\n <use xlink:href=\"#iconError\"></use>\n </svg>\n </div>\n <div data-braintree-id=\"sheet-error-text\" class=\"braintree-sheet__error-text\"></div>\n </div>\n </div>\n </div>\n\n <div data-braintree-id=\"lower-container\" class=\"braintree-test-class braintree-options braintree-hidden\">\n <div data-braintree-id=\"other-ways-to-pay\" class=\"braintree-heading\">{{otherWaysToPay}}</div>\n </div>\n\n <div data-braintree-id=\"toggle\" class=\"braintree-toggle braintree-hidden\" tabindex=\"0\">\n <span>{{chooseAnotherWayToPay}}</span>\n </div>\n</div>\n"; | ||
| var svgHTML = "<svg data-braintree-id=\"svgs\" style=\"display: none\">\n <defs>\n <symbol id=\"icon-visa\" viewBox=\"0 0 40 24\">\n <title>Visa</title>\n <path d=\"M0 1.927C0 .863.892 0 1.992 0h36.016C39.108 0 40 .863 40 1.927v20.146C40 23.137 39.108 24 38.008 24H1.992C.892 24 0 23.137 0 22.073V1.927z\" fill=\"#FFF\" />\n <path d=\"M0 22.033C0 23.12.892 24 1.992 24h36.016c1.1 0 1.992-.88 1.992-1.967V20.08H0v1.953z\" fill=\"#F8B600\" />\n <path d=\"M0 3.92h40V1.967C40 .88 39.108 0 38.008 0H1.992C.892 0 0 .88 0 1.967V3.92zM19.596 7.885l-2.11 9.478H14.93l2.11-9.478h2.554zm10.743 6.12l1.343-3.56.773 3.56H30.34zm2.85 3.358h2.36l-2.063-9.478H31.31c-.492 0-.905.274-1.088.695l-3.832 8.783h2.682l.532-1.415h3.276l.31 1.415zm-6.667-3.094c.01-2.502-3.6-2.64-3.577-3.76.008-.338.345-.7 1.083-.793.365-.045 1.373-.08 2.517.425l.448-2.01c-.615-.214-1.405-.42-2.39-.42-2.523 0-4.3 1.288-4.313 3.133-.016 1.364 1.268 2.125 2.234 2.58.996.464 1.33.762 1.325 1.177-.006.636-.793.918-1.526.928-1.285.02-2.03-.333-2.623-.6l-.462 2.08c.598.262 1.7.49 2.84.502 2.682 0 4.437-1.273 4.445-3.243zM15.948 7.884l-4.138 9.478h-2.7L7.076 9.8c-.123-.466-.23-.637-.606-.834-.615-.32-1.63-.62-2.52-.806l.06-.275h4.345c.554 0 1.052.354 1.178.966l1.076 5.486 2.655-6.45h2.683z\" fill=\"#1A1F71\" />\n </symbol>\n\n <symbol id=\"icon-master-card\" viewBox=\"0 0 40 24\">\n <title>MasterCard</title>\n <path d=\"M0 1.927C0 .863.892 0 1.992 0h36.016C39.108 0 40 .863 40 1.927v20.146C40 23.137 39.108 24 38.008 24H1.992C.892 24 0 23.137 0 22.073V1.927z\" fill=\"#FFF\" />\n <path d=\"M11.085 22.2v-1.36c0-.522-.318-.863-.864-.863-.272 0-.568.09-.773.386-.16-.25-.386-.386-.727-.386-.228 0-.455.068-.637.318v-.272h-.478V22.2h.478v-1.202c0-.386.204-.567.523-.567.318 0 .478.205.478.568V22.2h.477v-1.202c0-.386.23-.567.524-.567.32 0 .478.205.478.568V22.2h.523zm7.075-2.177h-.774v-.658h-.478v.658h-.432v.43h.432v.998c0 .5.205.795.75.795.206 0 .433-.068.592-.16l-.136-.407c-.136.09-.296.114-.41.114-.227 0-.318-.137-.318-.363v-.976h.774v-.43zm4.048-.046c-.273 0-.454.136-.568.318v-.272h-.478V22.2h.478v-1.225c0-.363.16-.567.455-.567.09 0 .204.023.295.046l.137-.454c-.09-.023-.228-.023-.32-.023zm-6.118.227c-.228-.16-.546-.227-.888-.227-.546 0-.91.272-.91.703 0 .363.274.567.75.635l.23.023c.25.045.385.113.385.227 0 .16-.182.272-.5.272-.32 0-.57-.113-.728-.227l-.228.363c.25.18.59.272.932.272.637 0 1-.295 1-.703 0-.385-.295-.59-.75-.658l-.227-.022c-.205-.023-.364-.068-.364-.204 0-.16.16-.25.41-.25.272 0 .545.114.682.182l.205-.386zm12.692-.227c-.273 0-.455.136-.568.318v-.272h-.478V22.2h.478v-1.225c0-.363.16-.567.455-.567.09 0 .203.023.294.046L29.1 20c-.09-.023-.227-.023-.318-.023zm-6.096 1.134c0 .66.455 1.135 1.16 1.135.32 0 .546-.068.774-.25l-.228-.385c-.182.136-.364.204-.57.204-.385 0-.658-.272-.658-.703 0-.407.273-.68.66-.702.204 0 .386.068.568.204l.228-.385c-.228-.182-.455-.25-.774-.25-.705 0-1.16.477-1.16 1.134zm4.413 0v-1.087h-.48v.272c-.158-.204-.385-.318-.68-.318-.615 0-1.093.477-1.093 1.134 0 .66.478 1.135 1.092 1.135.317 0 .545-.113.68-.317v.272h.48v-1.09zm-1.753 0c0-.384.25-.702.66-.702.387 0 .66.295.66.703 0 .387-.273.704-.66.704-.41-.022-.66-.317-.66-.703zm-5.71-1.133c-.636 0-1.09.454-1.09 1.134 0 .682.454 1.135 1.114 1.135.32 0 .638-.09.888-.295l-.228-.34c-.18.136-.41.227-.636.227-.296 0-.592-.136-.66-.522h1.615v-.18c.022-.704-.388-1.158-1.002-1.158zm0 .41c.297 0 .502.18.547.52h-1.137c.045-.295.25-.52.59-.52zm11.852.724v-1.95h-.48v1.135c-.158-.204-.385-.318-.68-.318-.615 0-1.093.477-1.093 1.134 0 .66.478 1.135 1.092 1.135.318 0 .545-.113.68-.317v.272h.48v-1.09zm-1.752 0c0-.384.25-.702.66-.702.386 0 .66.295.66.703 0 .387-.274.704-.66.704-.41-.022-.66-.317-.66-.703zm-15.97 0v-1.087h-.476v.272c-.16-.204-.387-.318-.683-.318-.615 0-1.093.477-1.093 1.134 0 .66.478 1.135 1.092 1.135.318 0 .545-.113.682-.317v.272h.477v-1.09zm-1.773 0c0-.384.25-.702.66-.702.386 0 .66.295.66.703 0 .387-.274.704-.66.704-.41-.022-.66-.317-.66-.703z\" fill=\"#000\" />\n <path fill=\"#FF5F00\" d=\"M23.095 3.49H15.93v12.836h7.165\" />\n <path d=\"M16.382 9.91c0-2.61 1.23-4.922 3.117-6.42-1.39-1.087-3.14-1.745-5.05-1.745-4.528 0-8.19 3.65-8.19 8.164 0 4.51 3.662 8.162 8.19 8.162 1.91 0 3.66-.657 5.05-1.746-1.89-1.474-3.118-3.81-3.118-6.417z\" fill=\"#EB001B\" />\n <path d=\"M32.76 9.91c0 4.51-3.664 8.162-8.19 8.162-1.91 0-3.662-.657-5.05-1.746 1.91-1.496 3.116-3.81 3.116-6.417 0-2.61-1.228-4.922-3.116-6.42 1.388-1.087 3.14-1.745 5.05-1.745 4.526 0 8.19 3.674 8.19 8.164z\" fill=\"#F79E1B\" />\n </symbol>\n\n <symbol id=\"icon-unionpay\" viewBox=\"0 0 40 24\">\n <title>Union Pay</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path d=\"M9.877 2h8.126c1.135 0 1.84.93 1.575 2.077l-3.783 16.35c-.267 1.142-1.403 2.073-2.538 2.073H5.13c-1.134 0-1.84-.93-1.574-2.073L7.34 4.076C7.607 2.93 8.74 2 9.878 2z\" fill=\"#E21836\" />\n <path d=\"M17.325 2h9.345c1.134 0 .623.93.356 2.077l-3.783 16.35c-.265 1.142-.182 2.073-1.32 2.073H12.58c-1.137 0-1.84-.93-1.574-2.073l3.783-16.35C15.056 2.93 16.19 2 17.324 2z\" fill=\"#00447B\" />\n <path d=\"M26.3 2h8.126c1.136 0 1.84.93 1.575 2.077l-3.782 16.35c-.266 1.142-1.402 2.073-2.54 2.073h-8.122c-1.137 0-1.842-.93-1.574-2.073l3.78-16.35C24.03 2.93 25.166 2 26.303 2z\" fill=\"#007B84\" />\n <path d=\"M27.633 14.072l-.99 3.3h.266l-.208.68h-.266l-.062.212h-.942l.064-.21H23.58l.193-.632h.194l1.005-3.35.2-.676h.962l-.1.34s.255-.184.498-.248c.242-.064 1.636-.088 1.636-.088l-.206.672h-.33zm-1.695 0l-.254.843s.285-.13.44-.172c.16-.04.395-.057.395-.057l.182-.614h-.764zm-.38 1.262l-.263.877s.29-.15.447-.196c.157-.037.396-.066.396-.066l.185-.614h-.766zm-.614 2.046h.767l.222-.74h-.765l-.223.74z\" fill=\"#FEFEFE\" />\n <path d=\"M28.055 13.4h1.027l.01.385c-.005.065.05.096.17.096h.208l-.19.637h-.555c-.48.035-.662-.172-.65-.406l-.02-.71zM28.193 16.415h-.978l.167-.566H28.5l.16-.517h-1.104l.19-.638h3.072l-.193.638h-1.03l-.16.516h1.032l-.17.565H29.18l-.2.24h.454l.11.712c.013.07.014.116.036.147.023.026.158.038.238.038h.137l-.21.694h-.348c-.054 0-.133-.004-.243-.01-.105-.008-.18-.07-.25-.105-.064-.03-.16-.11-.182-.24l-.11-.712-.507.7c-.162.222-.38.39-.748.39h-.712l.186-.62h.273c.078 0 .15-.03.2-.056.052-.023.098-.05.15-.126l.74-1.05zM17.478 14.867h2.59l-.19.622H18.84l-.16.53h1.06l-.194.64h-1.06l-.256.863c-.03.095.25.108.353.108l.53-.072-.212.71h-1.193c-.096 0-.168-.013-.272-.037-.1-.023-.145-.07-.19-.138-.043-.07-.11-.128-.064-.278l.343-1.143h-.588l.195-.65h.592l.156-.53h-.588l.188-.623zM19.223 13.75h1.063l-.194.65H18.64l-.157.136c-.067.066-.09.038-.18.087-.08.04-.254.123-.477.123h-.466l.19-.625h.14c.118 0 .198-.01.238-.036.046-.03.098-.096.157-.203l.267-.487h1.057l-.187.356zM20.74 13.4h.905l-.132.46s.286-.23.487-.313c.2-.075.65-.143.65-.143l1.464-.007-.498 1.672c-.085.286-.183.472-.244.555-.055.087-.12.16-.248.23-.124.066-.236.104-.34.115-.096.007-.244.01-.45.012h-1.41l-.4 1.324c-.037.13-.055.194-.03.23.02.03.068.066.135.066l.62-.06-.21.726h-.698c-.22 0-.383-.004-.495-.013-.108-.01-.22 0-.295-.058-.065-.058-.164-.133-.162-.21.007-.073.037-.192.082-.356l1.268-4.23zm1.922 1.69h-1.484l-.09.3h1.283c.152-.018.184.004.196-.003l.096-.297zm-1.402-.272s.29-.266.786-.353c.112-.022.82-.015.82-.015l.106-.357h-1.496l-.216.725z\" fill=\"#FEFEFE\" />\n <path d=\"M23.382 16.1l-.084.402c-.036.125-.067.22-.16.302-.1.084-.216.172-.488.172l-.502.02-.004.455c-.006.13.028.117.048.138.024.022.045.032.067.04l.157-.008.48-.028-.198.663h-.552c-.385 0-.67-.008-.765-.084-.092-.057-.105-.132-.103-.26l.035-1.77h.88l-.013.362h.212c.072 0 .12-.007.15-.026.027-.02.047-.048.06-.093l.087-.282h.692zM10.84 7.222c-.032.143-.596 2.763-.598 2.764-.12.53-.21.91-.508 1.152-.172.14-.37.21-.6.21-.37 0-.587-.185-.624-.537l-.007-.12.113-.712s.593-2.388.7-2.703c.002-.017.005-.026.007-.035-1.152.01-1.357 0-1.37-.018-.007.024-.037.173-.037.173l-.605 2.688-.05.23-.1.746c0 .22.042.4.13.553.275.485 1.06.557 1.504.557.573 0 1.11-.123 1.47-.345.63-.375.797-.962.944-1.48l.067-.267s.61-2.48.716-2.803c.003-.017.006-.026.01-.035-.835.01-1.08 0-1.16-.018zM14.21 12.144c-.407-.006-.55-.006-1.03.018l-.018-.036c.042-.182.087-.363.127-.548l.06-.25c.086-.39.173-.843.184-.98.007-.084.036-.29-.2-.29-.1 0-.203.048-.307.096-.058.207-.174.79-.23 1.055-.118.558-.126.62-.178.897l-.036.037c-.42-.006-.566-.006-1.05.018l-.024-.04c.08-.332.162-.668.24-.998.203-.9.25-1.245.307-1.702l.04-.028c.47-.067.585-.08 1.097-.185l.043.047-.077.287c.086-.052.168-.104.257-.15.242-.12.51-.155.658-.155.223 0 .468.062.57.323.098.232.034.52-.094 1.084l-.066.287c-.13.627-.152.743-.225 1.174l-.05.036zM15.87 12.144c-.245 0-.405-.006-.56 0-.153 0-.303.008-.532.018l-.013-.02-.015-.02c.062-.238.097-.322.128-.406.03-.084.06-.17.115-.41.072-.315.116-.535.147-.728.033-.187.052-.346.075-.53l.02-.014.02-.018c.244-.036.4-.057.56-.082.16-.024.32-.055.574-.103l.008.023.008.022c-.047.195-.094.39-.14.588-.047.197-.094.392-.137.587-.093.414-.13.57-.152.68-.02.105-.026.163-.063.377l-.022.02-.023.017zM19.542 10.728c.143-.633.033-.928-.108-1.11-.213-.273-.59-.36-.978-.36-.235 0-.793.023-1.23.43-.312.29-.458.687-.546 1.066-.088.387-.19 1.086.447 1.344.198.085.48.108.662.108.466 0 .945-.13 1.304-.513.278-.312.405-.775.448-.965zm-1.07-.046c-.02.106-.113.503-.24.673-.086.123-.19.198-.305.198-.033 0-.235 0-.238-.3-.003-.15.027-.304.063-.47.108-.478.236-.88.56-.88.255 0 .27.298.16.78zM29.536 12.187c-.493-.004-.635-.004-1.09.015l-.03-.037c.124-.472.248-.943.358-1.42.142-.62.175-.882.223-1.244l.037-.03c.49-.07.625-.09 1.135-.186l.015.044c-.093.388-.186.777-.275 1.166-.19.816-.258 1.23-.33 1.658l-.044.035z\" fill=\"#FEFEFE\" />\n <path d=\"M29.77 10.784c.144-.63-.432-.056-.525-.264-.14-.323-.052-.98-.62-1.2-.22-.085-.732.025-1.17.428-.31.29-.458.683-.544 1.062-.088.38-.19 1.078.444 1.328.2.085.384.11.567.103.638-.034 1.124-1.002 1.483-1.386.277-.303.326.115.368-.07zm-.974-.047c-.024.1-.117.503-.244.67-.083.117-.283.192-.397.192-.032 0-.232 0-.24-.3 0-.146.03-.3.067-.467.11-.47.235-.87.56-.87.254 0 .363.293.254.774zM22.332 12.144c-.41-.006-.55-.006-1.03.018l-.018-.036c.04-.182.087-.363.13-.548l.057-.25c.09-.39.176-.843.186-.98.008-.084.036-.29-.198-.29-.1 0-.203.048-.308.096-.057.207-.175.79-.232 1.055-.115.558-.124.62-.176.897l-.035.037c-.42-.006-.566-.006-1.05.018l-.022-.04.238-.998c.203-.9.25-1.245.307-1.702l.038-.028c.472-.067.587-.08 1.098-.185l.04.047-.073.287c.084-.052.17-.104.257-.15.24-.12.51-.155.655-.155.224 0 .47.062.575.323.095.232.03.52-.098 1.084l-.065.287c-.133.627-.154.743-.225 1.174l-.05.036zM26.32 8.756c-.07.326-.282.603-.554.736-.225.114-.498.123-.78.123h-.183l.013-.074.336-1.468.01-.076.007-.058.132.015.71.062c.275.105.388.38.31.74zM25.88 7.22l-.34.003c-.883.01-1.238.006-1.383-.012l-.037.182-.315 1.478-.793 3.288c.77-.01 1.088-.01 1.22.004l.21-1.024s.153-.644.163-.667c0 0 .047-.066.096-.092h.07c.665 0 1.417 0 2.005-.437.4-.298.675-.74.797-1.274.03-.132.054-.29.054-.446 0-.205-.04-.41-.16-.568-.3-.423-.896-.43-1.588-.433zM33.572 9.28l-.04-.043c-.502.1-.594.118-1.058.18l-.034.034-.005.023-.003-.007c-.345.803-.334.63-.615 1.26-.003-.03-.003-.048-.004-.077l-.07-1.37-.044-.043c-.53.1-.542.118-1.03.18l-.04.034-.006.056.003.007c.06.315.047.244.108.738.03.244.065.49.093.73.05.4.077.6.134 1.21-.328.55-.408.757-.722 1.238l.017.044c.478-.018.587-.018.94-.018l.08-.088c.265-.578 2.295-4.085 2.295-4.085zM16.318 9.62c.27-.19.304-.45.076-.586-.23-.137-.634-.094-.906.095-.273.186-.304.45-.075.586.228.134.633.094.905-.096z\" fill=\"#FEFEFE\" />\n <path d=\"M31.238 13.415l-.397.684c-.124.232-.357.407-.728.41l-.632-.01.184-.618h.124c.064 0 .11-.004.148-.022.03-.01.054-.035.08-.072l.233-.373h.988z\" fill=\"#FEFEFE\" />\n </symbol>\n\n <symbol id=\"icon-american-express\" viewBox=\"0 0 40 24\">\n <title>American Express</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path fill=\"#1478BE\" d=\"M6.26 12.32h2.313L7.415 9.66M27.353 9.977h-3.738v1.23h3.666v1.384h-3.675v1.385h3.821v1.005c.623-.77 1.33-1.466 2.025-2.235l.707-.77c-.934-1.004-1.87-2.08-2.804-3.075v1.077z\" />\n <path d=\"M38.25 7h-5.605l-1.328 1.4L30.072 7H16.984l-1.017 2.416L14.877 7h-9.58L1.25 16.5h4.826l.623-1.556h1.4l.623 1.556H29.99l1.327-1.483 1.328 1.483h5.605l-4.36-4.667L38.25 7zm-17.685 8.1h-1.557V9.883L16.673 15.1h-1.33L13.01 9.883l-.084 5.217H9.73l-.623-1.556h-3.27L5.132 15.1H3.42l2.884-6.772h2.42l2.645 6.233V8.33h2.646l2.107 4.51 1.868-4.51h2.575V15.1zm14.727 0h-2.024l-2.024-2.26-2.023 2.26H22.06V8.328H29.53l1.795 2.177 2.024-2.177h2.025L32.26 11.75l3.032 3.35z\" fill=\"#1478BE\" />\n </symbol>\n\n <symbol id=\"icon-jcb\" viewBox=\"0 0 40 24\">\n <title>JCB</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path d=\"M33.273 2.01h.013v17.062c-.004 1.078-.513 2.103-1.372 2.746-.63.47-1.366.67-2.14.67-.437 0-4.833.026-4.855 0-.01-.01 0-.07 0-.082v-6.82c0-.04.004-.064.033-.064h5.253c.867 0 1.344-.257 1.692-.61.44-.448.574-1.162.294-1.732-.24-.488-.736-.78-1.244-.913-.158-.04-.32-.068-.483-.083-.01 0-.064 0-.07-.006-.03-.034.023-.04.038-.046.102-.033.215-.042.32-.073.532-.164.993-.547 1.137-1.105.15-.577-.05-1.194-.524-1.552-.34-.257-.768-.376-1.187-.413-.43-.038-4.774-.022-5.21-.022-.072 0-.05-.02-.05-.09V5.63c0-.31.01-.616.073-.92.126-.592.41-1.144.815-1.59.558-.615 1.337-1.01 2.16-1.093.478-.048 4.89-.017 5.305-.017zm-4.06 8.616c.06.272-.01.567-.204.77-.173.176-.407.25-.648.253-.195.003-1.725 0-1.788 0l.003-1.645c.012-.027.02-.018.06-.018.097 0 1.713-.004 1.823.005.232.02.45.12.598.306.076.096.128.208.155.328zm-2.636 2.038h1.944c.242.002.47.063.652.228.226.204.327.515.283.815-.04.263-.194.5-.422.634-.187.112-.39.125-.6.125h-1.857v-1.8z\" fill=\"#53B230\" />\n <path d=\"M6.574 13.89c-.06-.03-.06-.018-.07-.06-.006-.026-.005-8.365.003-8.558.04-.95.487-1.857 1.21-2.47.517-.434 1.16-.71 1.83-.778.396-.04.803-.018 1.2-.018.69 0 4.11-.013 4.12 0 .008.008.002 16.758 0 17.074-.003.956-.403 1.878-1.105 2.523-.506.465-1.15.77-1.83.86-.41.056-5.02.032-5.363.032-.066 0-.054.013-.066-.024-.01-.025 0-7 0-7.17.66.178 1.35.28 2.03.348.662.067 1.33.093 1.993.062.93-.044 1.947-.192 2.712-.762.32-.238.574-.553.73-.922.148-.353.2-.736.2-1.117 0-.348.006-3.93-.016-3.942-.023-.014-2.885-.015-2.9.012-.012.022 0 3.87 0 3.95-.003.47-.16.933-.514 1.252-.468.42-1.11.47-1.707.423-.687-.055-1.357-.245-1.993-.508-.157-.065-.312-.135-.466-.208z\" fill=\"#006CB9\" />\n <path d=\"M15.95 9.835c-.025.02-.05.04-.072.06V6.05c0-.295-.012-.594.01-.888.12-1.593 1.373-2.923 2.944-3.126.382-.05 5.397-.042 5.41-.026.01.01 0 .062 0 .074v16.957c0 1.304-.725 2.52-1.89 3.1-.504.25-1.045.35-1.605.35-.322 0-4.757.015-4.834 0-.05-.01-.023.01-.035-.02-.007-.022 0-6.548 0-7.44v-.422c.554.48 1.256.75 1.96.908.536.12 1.084.176 1.63.196.537.02 1.076.01 1.61-.037.546-.05 1.088-.136 1.625-.244.137-.028.274-.057.41-.09.033-.006.17-.017.187-.044.013-.02 0-.097 0-.12v-1.324c-.582.292-1.19.525-1.83.652-.778.155-1.64.198-2.385-.123-.752-.326-1.2-1.024-1.274-1.837-.076-.837.173-1.716.883-2.212.736-.513 1.7-.517 2.553-.38.634.1 1.245.305 1.825.58.078.037.154.075.23.113V9.322c0-.02.013-.1 0-.118-.02-.028-.152-.038-.188-.046-.066-.016-.133-.03-.2-.045C22.38 9 21.84 8.908 21.3 8.85c-.533-.06-1.068-.077-1.603-.066-.542.01-1.086.054-1.62.154-.662.125-1.32.337-1.883.716-.085.056-.167.117-.245.18z\" fill=\"#E20138\" />\n </symbol>\n\n <symbol id=\"icon-discover\" viewBox=\"0 0 40 24\">\n <title>Discover</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path d=\"M38.995 11.75S27.522 20.1 6.5 23.5h31.495c.552 0 1-.448 1-1V11.75z\" fill=\"#F48024\" />\n <path d=\"M5.332 11.758c-.338.305-.776.438-1.47.438h-.29V8.55h.29c.694 0 1.115.124 1.47.446.37.33.595.844.595 1.372 0 .53-.224 1.06-.595 1.39zM4.077 7.615H2.5v5.515h1.57c.833 0 1.435-.197 1.963-.637.63-.52 1-1.305 1-2.116 0-1.628-1.214-2.762-2.956-2.762zM7.53 13.13h1.074V7.616H7.53M11.227 9.732c-.645-.24-.834-.397-.834-.695 0-.347.338-.61.8-.61.322 0 .587.132.867.446l.562-.737c-.462-.405-1.015-.612-1.618-.612-.975 0-1.718.678-1.718 1.58 0 .76.346 1.15 1.355 1.513.42.148.635.247.743.314.215.14.322.34.322.57 0 .448-.354.78-.834.78-.51 0-.924-.258-1.17-.736l-.695.67c.495.726 1.09 1.05 1.907 1.05 1.116 0 1.9-.745 1.9-1.812 0-.876-.363-1.273-1.585-1.72zM13.15 10.377c0 1.62 1.27 2.877 2.907 2.877.462 0 .858-.09 1.347-.32v-1.267c-.43.43-.81.604-1.297.604-1.082 0-1.85-.785-1.85-1.9 0-1.06.792-1.895 1.8-1.895.512 0 .9.183 1.347.62V7.83c-.472-.24-.86-.34-1.322-.34-1.627 0-2.932 1.283-2.932 2.887zM25.922 11.32l-1.468-3.705H23.28l2.337 5.656h.578l2.38-5.655H27.41M29.06 13.13h3.046v-.934h-1.973v-1.488h1.9v-.934h-1.9V8.55h1.973v-.935H29.06M34.207 10.154h-.314v-1.67h.33c.67 0 1.034.28 1.034.818 0 .554-.364.852-1.05.852zm2.155-.91c0-1.033-.71-1.628-1.95-1.628H32.82v5.514h1.073v-2.215h.14l1.487 2.215h1.32l-1.733-2.323c.81-.165 1.255-.72 1.255-1.563z\" fill=\"#221F20\" />\n <path d=\"M23.6 10.377c0 1.62-1.31 2.93-2.927 2.93-1.617.002-2.928-1.31-2.928-2.93s1.31-2.932 2.928-2.932c1.618 0 2.928 1.312 2.928 2.932z\" fill=\"#F48024\" />\n </symbol>\n\n <symbol id=\"icon-diners-club\" viewBox=\"0 0 40 24\">\n <title>Diners Club</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path d=\"M9.02 11.83c0-5.456 4.54-9.88 10.14-9.88 5.6 0 10.139 4.424 10.139 9.88-.002 5.456-4.54 9.88-10.14 9.88-5.6 0-10.14-4.424-10.14-9.88z\" fill=\"#FEFEFE\" />\n <path fill=\"#FFF\" d=\"M32.522 22H8.5V1.5h24.022\" />\n <path d=\"M25.02 11.732c-.003-2.534-1.607-4.695-3.868-5.55v11.102c2.26-.857 3.865-3.017 3.87-5.552zm-8.182 5.55V6.18c-2.26.86-3.86 3.017-3.867 5.55.007 2.533 1.61 4.69 3.868 5.55zm2.158-14.934c-5.25.002-9.503 4.202-9.504 9.384 0 5.182 4.254 9.38 9.504 9.382 5.25 0 9.504-4.2 9.505-9.382 0-5.182-4.254-9.382-9.504-9.384zM18.973 22C13.228 22.027 8.5 17.432 8.5 11.84 8.5 5.726 13.228 1.5 18.973 1.5h2.692c5.677 0 10.857 4.225 10.857 10.34 0 5.59-5.18 10.16-10.857 10.16h-2.692z\" fill=\"#004A97\" />\n </symbol>\n\n <symbol id=\"icon-maestro\" viewBox=\"0 0 40 24\">\n <title>Maestro</title>\n <path d=\"M38.333 24H1.667C.75 24 0 23.28 0 22.4V1.6C0 .72.75 0 1.667 0h36.666C39.25 0 40 .72 40 1.6v20.8c0 .88-.75 1.6-1.667 1.6z\" fill=\"#FFF\" />\n <path d=\"M14.67 22.39V21c.022-.465-.303-.86-.767-.882h-.116c-.3-.023-.603.14-.788.394-.164-.255-.442-.417-.743-.394-.256-.023-.51.116-.65.324v-.278h-.487v2.203h.487v-1.183c-.046-.278.162-.533.44-.58h.094c.325 0 .488.21.488.58v1.23h.487v-1.23c-.047-.278.162-.556.44-.58h.093c.325 0 .487.21.487.58v1.23l.534-.024zm2.712-1.09v-1.113h-.487v.28c-.162-.21-.417-.326-.695-.326-.65 0-1.16.51-1.16 1.16 0 .65.51 1.16 1.16 1.16.278 0 .533-.117.695-.325v.278h.487V21.3zm-1.786 0c.024-.37.348-.65.72-.626.37.023.65.348.626.72-.023.347-.302.625-.673.625-.372 0-.674-.28-.674-.65-.023-.047-.023-.047 0-.07zm12.085-1.16c.163 0 .325.024.465.094.14.046.278.14.37.255.117.115.186.23.256.37.117.3.117.626 0 .927-.046.14-.138.255-.254.37-.116.117-.232.186-.37.256-.303.116-.65.116-.952 0-.14-.046-.28-.14-.37-.255-.118-.116-.187-.232-.257-.37-.116-.302-.116-.627 0-.928.047-.14.14-.255.256-.37.115-.117.23-.187.37-.256.163-.07.325-.116.488-.093zm0 .465c-.092 0-.185.023-.278.046-.092.024-.162.094-.232.14-.07.07-.116.14-.14.232-.068.185-.068.394 0 .58.024.092.094.162.14.23.07.07.14.117.232.14.186.07.37.07.557 0 .092-.023.16-.092.23-.14.07-.068.117-.138.14-.23.07-.186.07-.395 0-.58-.023-.093-.093-.162-.14-.232-.07-.07-.138-.116-.23-.14-.094-.045-.187-.07-.28-.045zm-7.677.695c0-.695-.44-1.16-1.043-1.16-.65 0-1.16.534-1.137 1.183.023.65.534 1.16 1.183 1.136.325 0 .65-.093.905-.302l-.23-.348c-.187.14-.42.232-.65.232-.326.023-.627-.21-.673-.533h1.646v-.21zm-1.646-.21c.023-.3.278-.532.58-.532.3 0 .556.232.556.533h-1.136zm3.664-.346c-.207-.116-.44-.186-.695-.186-.255 0-.417.093-.417.255 0 .163.162.186.37.21l.233.022c.488.07.766.278.766.672 0 .395-.37.72-1.02.72-.348 0-.673-.094-.95-.28l.23-.37c.21.162.465.232.743.232.324 0 .51-.094.51-.28 0-.115-.117-.185-.395-.23l-.232-.024c-.487-.07-.765-.302-.765-.65 0-.44.37-.718.927-.718.325 0 .627.07.905.232l-.21.394zm2.32-.116h-.788v.997c0 .23.07.37.325.37.14 0 .3-.046.417-.115l.14.417c-.186.116-.395.162-.604.162-.58 0-.765-.302-.765-.812v-1.02h-.44v-.44h.44v-.673h.487v.672h.79v.44zm1.67-.51c.117 0 .233.023.35.07l-.14.463c-.093-.045-.21-.045-.302-.045-.325 0-.464.208-.464.58v1.25h-.487v-2.2h.487v.277c.116-.255.325-.37.557-.394z\" fill=\"#000\" />\n <path fill=\"#7673C0\" d=\"M23.64 3.287h-7.305V16.41h7.306\" />\n <path d=\"M16.8 9.848c0-2.55 1.183-4.985 3.2-6.56C16.384.435 11.12 1.06 8.29 4.7 5.435 8.32 6.06 13.58 9.703 16.41c3.038 2.387 7.283 2.387 10.32 0-2.04-1.578-3.223-3.99-3.223-6.562z\" fill=\"#EB001B\" />\n <path d=\"M33.5 9.848c0 4.613-3.735 8.346-8.35 8.346-1.88 0-3.69-.626-5.15-1.785 3.618-2.83 4.245-8.092 1.415-11.71-.418-.532-.882-.996-1.415-1.413C23.618.437 28.883 1.06 31.736 4.7 32.873 6.163 33.5 7.994 33.5 9.85z\" fill=\"#00A1DF\" />\n </symbol>\n\n <symbol id=\"logoPayPal\" viewBox=\"0 0 48 29\">\n <title>PayPal Logo</title>\n <path d=\"M46 29H2c-1.1 0-2-.87-2-1.932V1.934C0 .87.9 0 2 0h44c1.1 0 2 .87 2 1.934v25.134C48 28.13 47.1 29 46 29z\" fill-opacity=\"0\" fill=\"#FFF\" />\n <path d=\"M31.216 16.4c.394-.7.69-1.5.886-2.4.196-.8.196-1.6.1-2.2-.1-.7-.396-1.2-.79-1.7-.195-.3-.59-.5-.885-.7.1-.8.1-1.5 0-2.1-.1-.6-.394-1.1-.886-1.6-.885-1-2.56-1.6-4.922-1.6h-6.4c-.492 0-.787.3-.886.8l-2.658 17.2c0 .2 0 .3.1.4.097.1.294.2.393.2h4.036l-.295 1.8c0 .1 0 .3.1.4.098.1.195.2.393.2h3.35c.393 0 .688-.3.786-.7v-.2l.59-4.1v-.2c.1-.4.395-.7.788-.7h.59c1.675 0 3.152-.4 4.137-1.1.59-.5 1.083-1 1.478-1.7h-.002z\" fill=\"#263B80\" />\n <path d=\"M21.364 9.4c0-.3.196-.5.492-.6.098-.1.196-.1.394-.1h5.02c.592 0 1.183 0 1.675.1.1 0 .295.1.394.1.098 0 .294.1.393.1.1 0 .1 0 .197.102.295.1.492.2.69.3.295-1.6 0-2.7-.887-3.8-.985-1.1-2.658-1.6-4.923-1.6h-6.4c-.49 0-.885.3-.885.8l-2.758 17.3c-.098.3.197.6.59.6h3.94l.985-6.4 1.083-6.9z\" fill=\"#263B80\" />\n <path d=\"M30.523 9.4c0 .1 0 .3-.098.4-.887 4.4-3.742 5.9-7.484 5.9h-1.87c-.492 0-.787.3-.886.8l-.985 6.2-.296 1.8c0 .3.196.6.492.6h3.348c.394 0 .69-.3.787-.7v-.2l.592-4.1v-.2c.1-.4.394-.7.787-.7h.69c3.248 0 5.808-1.3 6.497-5.2.296-1.6.197-3-.69-3.9-.196-.3-.49-.5-.885-.7z\" fill=\"#159BD7\" />\n <path d=\"M29.635 9c-.098 0-.295-.1-.394-.1-.098 0-.294-.1-.393-.1-.492-.102-1.083-.102-1.673-.102h-5.022c-.1 0-.197 0-.394.1-.198.1-.394.3-.492.6l-1.083 6.9v.2c.1-.5.492-.8.886-.8h1.87c3.742 0 6.598-1.5 7.484-5.9 0-.1 0-.3.098-.4-.196-.1-.492-.2-.69-.3 0-.1-.098-.1-.196-.1z\" fill=\"#232C65\" />\n </symbol>\n\n <symbol id=\"logoPayPalCredit\" viewBox=\"0 0 48 29\">\n <title>PayPal Credit Logo</title>\n <path d=\"M46 29H2c-1.1 0-2-.87-2-1.932V1.934C0 .87.9 0 2 0h44c1.1 0 2 .87 2 1.934v25.134C48 28.13 47.1 29 46 29z\" fill-opacity=\"0\" fill=\"#FFF\" fill-rule=\"nonzero\" />\n <path d=\"M27.44 21.6h.518c1.377 0 2.67-.754 2.953-2.484.248-1.588-.658-2.482-2.14-2.482h-.38c-.093 0-.172.067-.187.16l-.763 4.805zm-1.254-6.646c.024-.158.16-.273.32-.273h2.993c2.47 0 4.2 1.942 3.81 4.436-.4 2.495-2.752 4.436-5.21 4.436h-3.05c-.116 0-.205-.104-.187-.218l1.323-8.38zM22.308 16.907l-.192 1.21h2.38c.116 0 .204.103.186.217l-.23 1.462c-.023.157-.16.273-.318.273h-2.048c-.16 0-.294.114-.32.27l-.203 1.26h2.52c.117 0 .205.102.187.217l-.228 1.46c-.025.16-.16.275-.32.275h-4.55c-.116 0-.204-.104-.186-.218l1.322-8.38c.025-.158.16-.273.32-.273h4.55c.116 0 .205.104.187.22l-.23 1.46c-.024.158-.16.274-.32.274H22.63c-.16 0-.295.115-.32.273M35.325 23.552h-1.81c-.115 0-.203-.104-.185-.218l1.322-8.38c.025-.158.16-.273.32-.273h1.81c.115 0 .203.104.185.22l-1.322 8.38c-.025.156-.16.272-.32.272M14.397 18.657h.224c.754 0 1.62-.14 1.777-1.106.158-.963-.345-1.102-1.15-1.104h-.326c-.097 0-.18.07-.197.168l-.326 2.043zm3.96 4.895h-2.37c-.102 0-.194-.058-.238-.15l-1.565-3.262h-.023l-.506 3.19c-.02.128-.13.222-.26.222h-1.86c-.116 0-.205-.104-.187-.218l1.33-8.432c.02-.128.13-.22.26-.22h3.222c1.753 0 2.953.834 2.66 2.728-.2 1.224-1.048 2.283-2.342 2.506l2.037 3.35c.076.125-.014.286-.16.286zM40.216 23.552h-1.808c-.116 0-.205-.104-.187-.218l1.06-6.7h-1.684c-.116 0-.205-.104-.187-.218l.228-1.462c.025-.157.16-.273.32-.273h5.62c.116 0 .205.104.186.22l-.228 1.46c-.025.158-.16.274-.32.274h-1.63l-1.05 6.645c-.025.156-.16.272-.32.272M11.467 17.202c-.027.164-.228.223-.345.104-.395-.405-.975-.62-1.6-.62-1.41 0-2.526 1.083-2.75 2.458-.21 1.4.588 2.41 2.022 2.41.592 0 1.22-.225 1.74-.6.144-.105.34.02.313.194l-.328 2.03c-.02.12-.108.22-.226.254-.702.207-1.24.355-1.9.355-3.823 0-4.435-3.266-4.238-4.655.553-3.894 3.712-4.786 5.65-4.678.623.034 1.182.117 1.73.323.177.067.282.25.252.436l-.32 1.99\" fill=\"#21306F\" />\n <path d=\"M23.184 7.67c-.11.717-.657.717-1.186.717h-.302l.212-1.34c.013-.08.082-.14.164-.14h.138c.36 0 .702 0 .877.206.105.123.137.305.097.557zm-.23-1.87h-1.998c-.137 0-.253.098-.274.233l-.808 5.123c-.016.1.062.192.165.192h1.024c.095 0 .177-.07.192-.164l.23-1.452c.02-.135.136-.235.273-.235h.63c1.317 0 2.076-.636 2.275-1.898.09-.553.003-.987-.255-1.29-.284-.334-.788-.51-1.456-.51z\" fill=\"#0093C7\" />\n <path d=\"M8.936 7.67c-.11.717-.656.717-1.186.717h-.302l.212-1.34c.013-.08.082-.14.164-.14h.138c.36 0 .702 0 .877.206.104.123.136.305.096.557zm-.23-1.87H6.708c-.136 0-.253.098-.274.233l-.808 5.123c-.016.1.062.192.165.192h.955c.136 0 .252-.1.274-.234l.217-1.382c.02-.135.137-.235.274-.235h.633c1.316 0 2.075-.636 2.274-1.898.09-.553.003-.987-.255-1.29-.284-.334-.788-.51-1.456-.51zM13.343 9.51c-.092.545-.526.912-1.08.912-.277 0-.5-.09-.642-.258-.14-.168-.193-.406-.148-.672.086-.542.527-.92 1.072-.92.27 0 .492.09.637.26.148.172.205.412.163.677zm1.334-1.863h-.957c-.082 0-.152.06-.164.14l-.042.268-.067-.097c-.208-.3-.67-.4-1.13-.4-1.057 0-1.96.8-2.135 1.923-.092.56.038 1.097.356 1.47.29.344.708.487 1.204.487.852 0 1.325-.548 1.325-.548l-.043.265c-.016.1.062.193.164.193h.862c.136 0 .253-.1.274-.234l.517-3.275c.017-.102-.06-.193-.163-.193z\" fill=\"#21306F\" />\n <path d=\"M27.59 9.51c-.09.545-.525.912-1.078.912-.278 0-.5-.09-.643-.258-.142-.168-.195-.406-.15-.672.086-.542.526-.92 1.07-.92.273 0 .494.09.64.26.146.172.203.412.16.677zm1.334-1.863h-.956c-.082 0-.152.06-.164.14l-.043.268-.065-.097c-.208-.3-.67-.4-1.13-.4-1.057 0-1.96.8-2.136 1.923-.092.56.038 1.097.355 1.47.292.344.71.487 1.205.487.852 0 1.325-.548 1.325-.548l-.043.265c-.016.1.062.193.164.193h.862c.136 0 .253-.1.274-.234l.517-3.275c.015-.102-.063-.193-.166-.193z\" fill=\"#0093C7\" />\n <path d=\"M19.77 7.647h-.96c-.092 0-.178.045-.23.122L17.254 9.72l-.562-1.877c-.035-.118-.143-.198-.266-.198h-.945c-.113 0-.194.112-.157.22l1.06 3.108-.997 1.404c-.078.11 0 .262.136.262h.96c.092 0 .177-.044.23-.12l3.196-4.614c.077-.11-.002-.26-.137-.26\" fill=\"#21306F\" />\n <path d=\"M30.052 5.94l-.82 5.216c-.016.1.062.192.165.192h.824c.138 0 .254-.1.275-.234l.81-5.122c.015-.1-.064-.193-.166-.193h-.924c-.082 0-.15.06-.164.14\" fill=\"#0093C7\" />\n </symbol>\n\n <symbol id=\"iconCardFront\" viewBox=\"0 0 48 29\">\n <title>Generic Card</title>\n <path d=\"M46.177 29H1.823C.9 29 0 28.13 0 27.187V1.813C0 .87.9 0 1.823 0h44.354C47.1 0 48 .87 48 1.813v25.375C48 28.13 47.1 29 46.177 29z\" fill=\"#FFF\" />\n <path d=\"M4.8 9.14c0-.427.57-.973 1.067-.973h7.466c.496 0 1.067.546 1.067.972v3.888c0 .425-.57.972-1.067.972H5.867c-.496 0-1.067-.547-1.067-.972v-3.89z\" fill=\"#828282\" />\n <rect fill=\"#828282\" x=\"10.8\" y=\"22.167\" width=\"3.6\" height=\"2.333\" rx=\"1.167\" />\n <rect fill=\"#828282\" x=\"4.8\" y=\"22.167\" width=\"3.6\" height=\"2.333\" rx=\"1.167\" />\n <path d=\"M6.55 16.333h34.9c.966 0 1.75.784 1.75 1.75 0 .967-.784 1.75-1.75 1.75H6.55c-.966 0-1.75-.783-1.75-1.75 0-.966.784-1.75 1.75-1.75z\" fill=\"#828282\" />\n <ellipse fill=\"#828282\" cx=\"40.2\" cy=\"6.417\" rx=\"3\" ry=\"2.917\" />\n </symbol>\n\n <symbol id=\"iconCVVBack\" viewBox=\"0 0 40 24\">\n <title>CVV Back</title>\n <path d=\"M38.48 24H1.52C.75 24 0 23.28 0 22.5v-21C0 .72.75 0 1.52 0h36.96C39.25 0 40 .72 40 1.5v21c0 .78-.75 1.5-1.52 1.5z\" fill=\"#FFF\"/>\n <path fill=\"#828282\" d=\"M0 5h40v4H0z\" />\n <path d=\"M20 13.772v5.456c0 .423.37.772.82.772h13.36c.45 0 .82-.35.82-.772v-5.456c0-.423-.37-.772-.82-.772H20.82c-.45 0-.82.35-.82.772zm-1-.142c0-.9.76-1.63 1.68-1.63h13.64c.928 0 1.68.737 1.68 1.63v5.74c0 .9-.76 1.63-1.68 1.63H20.68c-.928 0-1.68-.737-1.68-1.63v-5.74z\" fill=\"#000\" fill-rule=\"nonzero\" />\n <circle fill=\"#828282\" cx=\"23.5\" cy=\"16.5\" r=\"1.5\" />\n <circle fill=\"#828282\" cx=\"27.5\" cy=\"16.5\" r=\"1.5\" />\n <circle fill=\"#828282\" cx=\"31.5\" cy=\"16.5\" r=\"1.5\" />\n </symbol>\n\n <symbol id=\"iconCVVFront\" viewBox=\"0 0 40 24\">\n <title>CVV Front</title>\n <path d=\"M38.48 24H1.52C.75 24 0 23.28 0 22.5v-21C0 .72.75 0 1.52 0h36.96C39.25 0 40 .72 40 1.5v21c0 .78-.75 1.5-1.52 1.5z\" fill=\"#FFF\" />\n <path d=\"M16 5.772v5.456c0 .423.366.772.81.772h17.38c.444 0 .81-.348.81-.772V5.772C35 5.35 34.634 5 34.19 5H16.81c-.444 0-.81.348-.81.772zm-1-.142c0-.9.75-1.63 1.66-1.63h17.68c.917 0 1.66.737 1.66 1.63v5.74c0 .9-.75 1.63-1.66 1.63H16.66c-.917 0-1.66-.737-1.66-1.63V5.63z\" fill=\"#000\" fill-rule=\"nonzero\" />\n <circle fill=\"#828282\" cx=\"19.5\" cy=\"8.5\" r=\"1.5\" />\n <circle fill=\"#828282\" cx=\"27.5\" cy=\"8.5\" r=\"1.5\" />\n <circle fill=\"#828282\" cx=\"23.5\" cy=\"8.5\" r=\"1.5\" />\n <circle fill=\"#828282\" cx=\"31.5\" cy=\"8.5\" r=\"1.5\" />\n <path d=\"M4 7.833C4 7.47 4.476 7 4.89 7h6.22c.414 0 .89.47.89.833v3.334c0 .364-.476.833-.89.833H4.89c-.414 0-.89-.47-.89-.833V7.833zM4 18.5c0-.828.668-1.5 1.5-1.5h29c.828 0 1.5.666 1.5 1.5 0 .828-.668 1.5-1.5 1.5h-29c-.828 0-1.5-.666-1.5-1.5z\" fill=\"#828282\" />\n </symbol>\n\n <symbol id=\"iconCheck\" viewBox=\"0 0 42 32\">\n <title>Check</title>\n <path class=\"path1\" d=\"M14.379 29.76L39.741 3.415 36.194.001l-21.815 22.79-10.86-11.17L0 15.064z\" />\n </symbol>\n\n <symbol id=\"iconLockLoader\" viewBox=\"0 0 28 32\">\n <title>Lock Loader</title>\n <path d=\"M6 10V8c0-4.422 3.582-8 8-8 4.41 0 8 3.582 8 8v2h-4V7.995C18 5.79 16.205 4 14 4c-2.21 0-4 1.792-4 3.995V10H6zM.997 14c-.55 0-.997.445-.997.993v16.014c0 .548.44.993.997.993h26.006c.55 0 .997-.445.997-.993V14.993c0-.548-.44-.993-.997-.993H.997z\" />\n </symbol>\n\n <symbol id=\"iconError\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n </symbol>\n </defs>\n</svg>"; | ||
@@ -31,3 +33,3 @@ var UPDATABLE_CONFIGURATION_OPTIONS = [ | ||
| var DEFAULT_CHECKOUTJS_LOG_LEVEL = 'warn'; | ||
| var VERSION = "1.3.1"; | ||
| var VERSION = "1.4.0"; | ||
@@ -109,2 +111,14 @@ /** | ||
| /** | ||
| * This event is emitted when a payment option is selected by the customer. | ||
| * @event Dropin#paymentOptionSelected | ||
| * @type {Dropin~paymentOptionSelectedPayload} | ||
| */ | ||
| /** | ||
| * @typedef {object} Dropin~paymentOptionSelectedPayload | ||
| * @description The event payload sent from {@link Dropin#on|`on`} with the {@link Dropin#event:paymentOptionSelected|`paymentOptionSelected`} event. | ||
| * @property {string} paymentOption The payment option view selected. Either `card`, `paypal`, or `paypalCredit`. | ||
| */ | ||
| /** | ||
| * @class | ||
@@ -197,3 +211,3 @@ * @param {object} options For create options, see {@link module:braintree-web-drop-in|dropin.create}. | ||
| } catch (modelError) { | ||
| dropinInstance.teardown(function () { | ||
| dropinInstance.teardown().then(function () { | ||
| callback(modelError); | ||
@@ -224,2 +238,6 @@ }); | ||
| this._model.on('paymentOptionSelected', function (event) { | ||
| this._emit('paymentOptionSelected', event); | ||
| }.bind(this)); | ||
| function createMainView() { | ||
@@ -335,9 +353,11 @@ dropinInstance._mainView = new MainView({ | ||
| /** | ||
| * Requests a payment method object which includes the payment method nonce used by by the [Braintree Server SDKs](https://developers.braintreepayments.com/start/hello-server/). The structure of this payment method object varies by type: a {@link Dropin~cardPaymentMethodPayload|cardPaymentMethodPayload} is returned when the payment method is a card, a {@link Dropin~paypalPaymentMethodPayload|paypalPaymentMethodPayload} is returned when the payment method is a PayPal account. If a payment method is not available, an error will appear in the UI and and error will be returned in the callback. | ||
| * Requests a payment method object which includes the payment method nonce used by by the [Braintree Server SDKs](https://developers.braintreepayments.com/start/hello-server/). The structure of this payment method object varies by type: a {@link Dropin~cardPaymentMethodPayload|cardPaymentMethodPayload} is returned when the payment method is a card, a {@link Dropin~paypalPaymentMethodPayload|paypalPaymentMethodPayload} is returned when the payment method is a PayPal account. | ||
| * | ||
| * If a payment method is not available, an error will appear in the UI. When a callback is used, an error will be passed to it. If no callback is used, the returned Promise will be rejected with an error. | ||
| * @public | ||
| * @param {callback} callback The first argument will be an error if no payment method is available and will otherwise be null. The second argument will be an object containing a payment method nonce; either a {@link Dropin~cardPaymentMethodPayload|cardPaymentMethodPayload} or a {@link Dropin~paypalPaymentMethodPayload|paypalPaymentMethodPayload}. | ||
| * @returns {void} | ||
| * @param {callback} [callback] The first argument will be an error if no payment method is available and will otherwise be null. The second argument will be an object containing a payment method nonce; either a {@link Dropin~cardPaymentMethodPayload|cardPaymentMethodPayload} or a {@link Dropin~paypalPaymentMethodPayload|paypalPaymentMethodPayload}. If no callback is provided, `requestPaymentMethod` will return a promise. | ||
| * @returns {void|Promise} Returns a promise if no callback is provided. | ||
| */ | ||
| Dropin.prototype.requestPaymentMethod = function (callback) { | ||
| this._mainView.requestPaymentMethod(callback); | ||
| Dropin.prototype.requestPaymentMethod = function () { | ||
| return this._mainView.requestPaymentMethod(); | ||
| }; | ||
@@ -402,15 +422,29 @@ | ||
| * @public | ||
| * @param {callback} [callback] Called on completion, containing an error if one occurred. No data is returned if teardown completes successfully. | ||
| * @returns {void} | ||
| * @param {callback} [callback] Called on completion, containing an error if one occurred. No data is returned if teardown completes successfully. If no callback is provided, `teardown` will return a promise. | ||
| * @returns {void|Promise} Returns a promise if no callback is provided. | ||
| */ | ||
| Dropin.prototype.teardown = function (callback) { | ||
| Dropin.prototype.teardown = function () { | ||
| var mainviewTeardownError; | ||
| var promise = Promise.resolve(); | ||
| var self = this; | ||
| this._removeStylesheet(); | ||
| if (this._mainView) { | ||
| this._mainView.teardown(function (err) { | ||
| this._removeDropinWrapper(err, callback); | ||
| }.bind(this)); | ||
| } else { | ||
| this._removeDropinWrapper(null, callback); | ||
| promise.then(function () { | ||
| return self._mainView.teardown().catch(function (err) { | ||
| mainviewTeardownError = err; | ||
| }); | ||
| }); | ||
| } | ||
| return promise.then(function () { | ||
| return self._removeDropinWrapper(); | ||
| }).then(function () { | ||
| if (mainviewTeardownError) { | ||
| return Promise.reject(mainviewTeardownError); | ||
| } | ||
| return Promise.resolve(); | ||
| }); | ||
| }; | ||
@@ -427,5 +461,6 @@ | ||
| Dropin.prototype._removeDropinWrapper = function (err, callback) { | ||
| Dropin.prototype._removeDropinWrapper = function () { | ||
| this._dropinWrapper.parentNode.removeChild(this._dropinWrapper); | ||
| callback(err); | ||
| return Promise.resolve(); | ||
| }; | ||
@@ -448,2 +483,2 @@ | ||
| module.exports = Dropin; | ||
| module.exports = wrapPrototype(Dropin); |
149
index.js
| 'use strict'; | ||
| /** | ||
| * @module braintree-web-drop-in | ||
| * @description The primary way to integrate Drop-in into your page is to use [`dropin.create`](#.create). | ||
| * @description There are two ways to integrate Drop-in into your page: a script tag integration and a JavaScript integration using [`dropin.create`](#.create). | ||
| * | ||
| * Alternatively, if you only need to process credit cards on your checkout page, the script tag integration is the simplest way to integrate. All you need to do is add the Drop-in script inside your form element where you want Drop-in to appear and include a `data-braintree-dropin-authorization` property with your [tokenization key](https://developers.braintreepayments.com/guides/authorization/tokenization-key/javascript/v3) or [client token](https://developers.braintreepayments.com/guides/authorization/client-token). | ||
| * The script tag integration is the fastest way to integrate. All you need to do is add the Drop-in script inside your form element where you want Drop-in to appear and include a `data-braintree-dropin-authorization` property with your [tokenization key](https://developers.braintreepayments.com/guides/authorization/tokenization-key/javascript/v3) or [client token](https://developers.braintreepayments.com/guides/authorization/client-token). | ||
| * | ||
| * The script tag integration will intercept the form submission and attempt to tokenize the credit card. If the tokenization is successful, it will insert the payment method nonce representing the credit card into a hidden input with the name `payment_method_nonce` and then submit your form. | ||
| * When your form is submitted, Drop-in will intercept the form submission and attempt to tokenize the payment method. If the tokenization is successful, it will insert the payment method nonce into a hidden input with the name `payment_method_nonce` and then submit your form. If the tokenization is unsuccessful, a relevant error will be shown in the UI. | ||
| * | ||
| * If you want more control over the process or accept additional payment methods (such as PayPal or PayPal Credit), you can use [`dropin.create` instead](#.create). | ||
| * Specify creation options as data attributes in your script tag, as shown in the examples below. The following configuration properties may be set: | ||
| * | ||
| * * `data-locale` | ||
| * * `data-payment-option-priority` | ||
| * * `data-paypal.amount` | ||
| * * `data-paypal.currency` | ||
| * * `data-paypal.flow` | ||
| * * `data-paypal-credit.amount` | ||
| * * `data-paypal-credit.currency` | ||
| * * `data-paypal-credit.flow` | ||
| * | ||
| * For more control and customization, use [`dropin.create` instead](#.create). | ||
| * | ||
| * See our [demo app](../../script-tag-integration.html) for an example of using our script tag integration. | ||
| * | ||
| * @example | ||
| * <caption>Script tag integration (credit cards only)</caption> | ||
| * <caption>A full example accepting only cards</caption> | ||
| * <!DOCTYPE html> | ||
@@ -28,2 +42,35 @@ * <html lang="en"> | ||
| * </html> | ||
| * | ||
| * @example | ||
| * <caption>A full example accepting cards, PayPal, and PayPal credit</caption> | ||
| * <!DOCTYPE html> | ||
| * <html lang="en"> | ||
| * <head> | ||
| * <meta charset="UTF-8"> | ||
| * <title>Checkout</title> | ||
| * </head> | ||
| * <body> | ||
| * <form id="payment-form" action="/" method="post"> | ||
| * <script src="https://js.braintreegateway.com/web/dropin/{@pkg version}/js/dropin.min.js" | ||
| * data-braintree-dropin-authorization="CLIENT_AUTHORIZATION" | ||
| * data-paypal.flow="checkout" | ||
| * data-paypal.amount="10.00" | ||
| * data-paypal.currency="USD" | ||
| * data-paypal-credit.flow="vault" | ||
| * ></script> | ||
| * <input type="submit" value="Purchase"></input> | ||
| * </form> | ||
| * </body> | ||
| * </html> | ||
| * | ||
| * @example | ||
| * <caption>Specifying a locale and payment option priority</caption> | ||
| * <form id="payment-form" action="/" method="post"> | ||
| * <script src="https://js.braintreegateway.com/web/dropin/{@pkg version}/js/dropin.min.js" | ||
| * data-braintree-dropin-authorization="CLIENT_AUTHORIZATION" | ||
| * data-locale="de_DE" | ||
| * data-payment-option-priority='["paypal","card", "paypalCredit"]' | ||
| * ></script> | ||
| * <input type="submit" value="Purchase"></input> | ||
| * </form> | ||
| */ | ||
@@ -34,8 +81,9 @@ | ||
| var createFromScriptTag = require('./lib/create-from-script-tag'); | ||
| var deferred = require('./lib/deferred'); | ||
| var constants = require('./constants'); | ||
| var analytics = require('./lib/analytics'); | ||
| var DropinError = require('./lib/dropin-error'); | ||
| var Promise = require('./lib/promise'); | ||
| var wrapPromise = require('@braintree/wrap-promise'); | ||
| var VERSION = "1.3.1"; | ||
| var VERSION = "1.4.0"; | ||
@@ -96,6 +144,6 @@ /** | ||
| * @param {string} [options.paypalCredit.buttonStyle] The style object to apply to the PayPal Credit button. The options [found here](https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/) are available. The `label` property cannot be adjusted. | ||
| * @param {function} callback The second argument, `data`, is the {@link Dropin} instance. | ||
| * @returns {void} | ||
| * @param {function} [callback] The second argument, `data`, is the {@link Dropin} instance. Returns a promise if no callback is provided. | ||
| * @returns {void|Promise} Returns a promise if no callback is provided. | ||
| * @example | ||
| * <caption>A full example of accepting credit cards</caption> | ||
| * <caption>A full example of accepting credit cards with callback API</caption> | ||
| * <!DOCTYPE html> | ||
@@ -138,3 +186,37 @@ * <html lang="en"> | ||
| * </html> | ||
| * @example | ||
| * <caption>A full example of accepting credit cards with promise API</caption> | ||
| * <!DOCTYPE html> | ||
| * <html lang="en"> | ||
| * <head> | ||
| * <meta charset="UTF-8"> | ||
| * <title>Checkout</title> | ||
| * </head> | ||
| * <body> | ||
| * <div id="dropin-container"></div> | ||
| * <button id="submit-button">Purchase</button> | ||
| * | ||
| * <script src="https://js.braintreegateway.com/web/dropin/{@pkg version}/js/dropin.min.js"></script> | ||
| * | ||
| * <script> | ||
| * var submitButton = document.querySelector('#submit-button'); | ||
| * | ||
| * braintree.dropin.create({ | ||
| * authorization: 'CLIENT_AUTHORIZATION', | ||
| * container: '#dropin-container' | ||
| * }).then(function (dropinInstance) { | ||
| * submitButton.addEventListener('click', function () { | ||
| * dropinInstance.requestPaymentMethod().then(function (payload) { | ||
| * // Send payload.nonce to your server | ||
| * }).catch(function (err) { | ||
| * // Handle errors in requesting payment method | ||
| * }); | ||
| * }); | ||
| * }).catch(function (err) { | ||
| * // Handle any errors that might've occurred when creating Drop-in | ||
| * console.error(err); | ||
| * }); | ||
| * </script> | ||
| * </body> | ||
| * </html> | ||
| * @example | ||
@@ -250,25 +332,15 @@ * <caption>Setting up a Drop-in instance to accept credit cards, PayPal, and PayPal Credit</caption> | ||
| function create(options, callback) { | ||
| if (typeof callback !== 'function') { | ||
| throw new DropinError('create must include a callback function.'); | ||
| } | ||
| callback = deferred(callback); | ||
| function create(options) { | ||
| if (!options.authorization) { | ||
| callback(new DropinError('options.authorization is required.')); | ||
| return; | ||
| return Promise.reject(new DropinError('options.authorization is required.')); | ||
| } | ||
| client.create({ | ||
| return client.create({ | ||
| authorization: options.authorization | ||
| }, function (err, clientInstance) { | ||
| if (err) { | ||
| callback(new DropinError({ | ||
| message: 'There was an error creating Drop-in.', | ||
| braintreeWebError: err | ||
| })); | ||
| return; | ||
| } | ||
| }).catch(function (err) { | ||
| return Promise.reject(new DropinError({ | ||
| message: 'There was an error creating Drop-in.', | ||
| braintreeWebError: err | ||
| })); | ||
| }).then(function (clientInstance) { | ||
| clientInstance = setAnalyticsIntegration(clientInstance); | ||
@@ -282,6 +354,15 @@ | ||
| new Dropin({ | ||
| merchantConfiguration: options, | ||
| client: clientInstance | ||
| })._initialize(callback); | ||
| return new Promise(function (resolve, reject) { | ||
| new Dropin({ | ||
| merchantConfiguration: options, | ||
| client: clientInstance | ||
| })._initialize(function (err, instance) { | ||
| if (err) { | ||
| reject(err); | ||
| return; | ||
| } | ||
| resolve(instance); | ||
| }); | ||
| }); | ||
| }); | ||
@@ -308,3 +389,3 @@ } | ||
| module.exports = { | ||
| create: create, | ||
| create: wrapPromise(create), | ||
| /** | ||
@@ -311,0 +392,0 @@ * @description The current version of Drop-in, i.e. `{@pkg version}`. |
| 'use strict'; | ||
| var analytics = require('./analytics'); | ||
| var find = require('./find-parent-form'); | ||
| var uuid = require('./uuid'); | ||
| var DropinError = require('./dropin-error'); | ||
| var kebabCaseToCamelCase = require('./kebab-case-to-camel-case'); | ||
| var WHITELISTED_DATA_ATTRIBUTES = [ | ||
| 'locale', | ||
| 'payment-option-priority', | ||
| 'paypal.amount', | ||
| 'paypal.currency', | ||
| 'paypal.flow', | ||
| 'paypal-credit.amount', | ||
| 'paypal-credit.currency', | ||
| 'paypal-credit.flow' | ||
| ]; | ||
| function addCompositeKeyValuePairToObject(obj, key, value) { | ||
| var decomposedKeys = key.split('.'); | ||
| var topLevelKey = kebabCaseToCamelCase(decomposedKeys[0]); | ||
| if (decomposedKeys.length === 1) { | ||
| obj[topLevelKey] = deserialize(value); | ||
| } else { | ||
| obj[topLevelKey] = obj[topLevelKey] || {}; | ||
| addCompositeKeyValuePairToObject(obj[topLevelKey], decomposedKeys.slice(1).join('.'), value); | ||
| } | ||
| } | ||
| function deserialize(value) { | ||
| try { | ||
| return JSON.parse(value); | ||
| } catch (e) { | ||
| return value; | ||
| } | ||
| } | ||
| function createFromScriptTag(createFunction, scriptTag) { | ||
| var authorization, container, form; | ||
| var authorization, container, createOptions, form; | ||
@@ -35,10 +69,19 @@ if (!scriptTag) { | ||
| createFunction({ | ||
| createOptions = { | ||
| authorization: authorization, | ||
| container: container | ||
| }, function (createError, instance) { | ||
| if (createError) { | ||
| throw createError; | ||
| }; | ||
| WHITELISTED_DATA_ATTRIBUTES.forEach(function (compositeKey) { | ||
| var value = scriptTag.getAttribute('data-' + compositeKey); | ||
| if (value == null) { | ||
| return; | ||
| } | ||
| addCompositeKeyValuePairToObject(createOptions, compositeKey, value); | ||
| }); | ||
| createFunction(createOptions).then(function (instance) { | ||
| analytics.sendEvent(instance._client, 'integration-type.script-tag'); | ||
| form.addEventListener('submit', function () { | ||
@@ -45,0 +88,0 @@ instance.requestPaymentMethod(function (requestPaymentError, payload) { |
@@ -5,4 +5,16 @@ 'use strict'; | ||
| function isHidden(element) { | ||
| if (!element) { // no parentNode, so nothing containing the element is hidden | ||
| return false; | ||
| } | ||
| if (element.style.display === 'none') { | ||
| return true; | ||
| } | ||
| return isHidden(element.parentNode); | ||
| } | ||
| function onTransitionEnd(element, propertyName, callback) { | ||
| if (browserDetection.isIe9()) { | ||
| if (browserDetection.isIe9() || isHidden(element)) { | ||
| callback(); | ||
@@ -9,0 +21,0 @@ return; |
| { | ||
| "name": "braintree-web-drop-in", | ||
| "version": "1.3.1", | ||
| "version": "1.4.0", | ||
| "main": "index.js", | ||
@@ -61,6 +61,11 @@ "scripts": { | ||
| "dependencies": { | ||
| "braintree-web": "3.19.0", | ||
| "braintree-web": "3.19.1", | ||
| "@braintree/browser-detection": "1.4.1", | ||
| "promise-polyfill": "6.0.2" | ||
| } | ||
| "promise-polyfill": "6.0.2", | ||
| "@braintree/wrap-promise": "1.1.1" | ||
| }, | ||
| "browserslist": [ | ||
| "last 2 versions", | ||
| "iOS 8" | ||
| ] | ||
| } |
@@ -33,3 +33,3 @@ # Braintree Web Drop-in | ||
| <script src="https://js.braintreegateway.com/web/dropin/1.3.1/js/dropin.min.js"></script> | ||
| <script src="https://js.braintreegateway.com/web/dropin/1.4.0/js/dropin.min.js"></script> | ||
@@ -36,0 +36,0 @@ <script> |
@@ -6,2 +6,3 @@ 'use strict'; | ||
| var errors = require('../constants').errors; | ||
| var Promise = require('../lib/promise'); | ||
@@ -20,4 +21,4 @@ function BaseView(options) { | ||
| BaseView.prototype.requestPaymentMethod = function (callback) { | ||
| callback(new DropinError(errors.NO_PAYMENT_METHOD_ERROR)); | ||
| BaseView.prototype.requestPaymentMethod = function () { | ||
| return Promise.reject(new DropinError(errors.NO_PAYMENT_METHOD_ERROR)); | ||
| }; | ||
@@ -31,6 +32,6 @@ | ||
| BaseView.prototype.teardown = function (cb) { | ||
| cb(); | ||
| BaseView.prototype.teardown = function () { | ||
| return Promise.resolve(); | ||
| }; | ||
| module.exports = BaseView; |
@@ -11,5 +11,8 @@ 'use strict'; | ||
| var addSelectionEventHandler = require('../lib/add-selection-event-handler'); | ||
| var Promise = require('../lib/promise'); | ||
| var supportsFlexbox = require('../lib/supports-flexbox'); | ||
| var transitionHelper = require('../lib/transition-helper'); | ||
| var CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT = require('../constants').CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT; | ||
| function MainView() { | ||
@@ -27,4 +30,4 @@ BaseView.apply(this, arguments); | ||
| MainView.prototype._initialize = function () { | ||
| var paymentOptionsView; | ||
| var hasMultiplePaymentOptions = this.model.supportedPaymentOptions.length > 1; | ||
| var paymentOptionsView; | ||
| var paymentMethods = this.model.getPaymentMethods(); | ||
@@ -82,3 +85,5 @@ | ||
| this.model.on('changeActivePaymentMethod', function () { | ||
| this.setPrimaryView(PaymentMethodsView.ID); | ||
| setTimeout(function () { | ||
| this.setPrimaryView(PaymentMethodsView.ID); | ||
| }.bind(this), CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT); | ||
| }.bind(this)); | ||
@@ -177,16 +182,12 @@ | ||
| MainView.prototype.requestPaymentMethod = function (callback) { | ||
| MainView.prototype.requestPaymentMethod = function () { | ||
| var activePaymentView = this.getView(this.model.getActivePaymentView()); | ||
| activePaymentView.requestPaymentMethod(function (err, payload) { | ||
| if (err) { | ||
| analytics.sendEvent(this.client, 'request-payment-method.error'); | ||
| callback(err); | ||
| return; | ||
| } | ||
| return activePaymentView.requestPaymentMethod().then(function (payload) { | ||
| analytics.sendEvent(this.client, 'request-payment-method.' + analyticsKinds[payload.type]); | ||
| this.setPrimaryView(PaymentMethodsView.ID); | ||
| analytics.sendEvent(this.client, 'request-payment-method.' + analyticsKinds[payload.type]); | ||
| callback(null, payload); | ||
| return payload; | ||
| }.bind(this)).catch(function (err) { | ||
| analytics.sendEvent(this.client, 'request-payment-method.error'); | ||
| return Promise.reject(err); | ||
| }.bind(this)); | ||
@@ -262,20 +263,18 @@ }; | ||
| MainView.prototype.teardown = function (callback) { | ||
| MainView.prototype.teardown = function () { | ||
| var error; | ||
| var viewNames = Object.keys(this._views); | ||
| var numberOfViews = viewNames.length; | ||
| var viewsTornDown = 0; | ||
| var error; | ||
| var teardownPromises = viewNames.map(function (view) { | ||
| return this._views[view].teardown().catch(function (err) { | ||
| error = err; | ||
| }); | ||
| }.bind(this)); | ||
| viewNames.forEach(function (view) { | ||
| this._views[view].teardown(function (err) { | ||
| if (err) { | ||
| error = err; | ||
| } | ||
| viewsTornDown += 1; | ||
| return Promise.all(teardownPromises).then(function () { | ||
| if (error) { | ||
| return Promise.reject(error); | ||
| } | ||
| if (viewsTornDown >= numberOfViews) { | ||
| callback(error); | ||
| } | ||
| }); | ||
| }.bind(this)); | ||
| return Promise.resolve(); | ||
| }); | ||
| }; | ||
@@ -282,0 +281,0 @@ |
@@ -9,3 +9,3 @@ 'use strict'; | ||
| var paymentMethodHTML = "<div class=\"braintree-method__logo\">\n <svg height=\"24\" width=\"40\" class=\"@CLASSNAME\">\n <use xlink:href=\"#@ICON\"></use>\n </svg>\n</div>\n\n<div class=\"braintree-method__label\">@TITLE<br><div class=\"braintree-method__label--small\">@SUBTITLE</div></div>\n\n<div class=\"braintree-method__check-container\">\n <div class=\"braintree-method__check\">\n <svg height=\"30\" width=\"50\">\n <use xlink:href=\"#iconCheck\"></use>\n </svg>\n </div>\n</div>\n"; | ||
| var paymentMethodHTML = "<div class=\"braintree-method__logo\">\n <svg width=\"40\" height=\"24\" class=\"@CLASSNAME\">\n <use xlink:href=\"#@ICON\"></use>\n </svg>\n</div>\n\n<div class=\"braintree-method__label\">@TITLE<br><div class=\"braintree-method__label--small\">@SUBTITLE</div></div>\n\n<div class=\"braintree-method__check-container\">\n <div class=\"braintree-method__check\">\n <svg height=\"100%\" width=\"100%\">\n <use xlink:href=\"#iconCheck\"></use>\n </svg>\n </div>\n</div>\n"; | ||
@@ -12,0 +12,0 @@ function PaymentMethodView() { |
@@ -5,2 +5,3 @@ 'use strict'; | ||
| var PaymentMethodView = require('./payment-method-view'); | ||
| var Promise = require('../lib/promise'); | ||
@@ -98,6 +99,6 @@ var PAYMENT_METHOD_TYPE_TO_TRANSLATION_STRING = { | ||
| PaymentMethodsView.prototype.requestPaymentMethod = function (callback) { | ||
| callback(null, this.activeMethodView.paymentMethod); | ||
| PaymentMethodsView.prototype.requestPaymentMethod = function () { | ||
| return Promise.resolve(this.activeMethodView.paymentMethod); | ||
| }; | ||
| module.exports = PaymentMethodsView; |
@@ -9,3 +9,3 @@ 'use strict'; | ||
| var paymentMethodOptionHTML = "<div class=\"braintree-option__logo\">\n <svg height=\"28\" width=\"48\" class=\"@CLASSNAME\">\n <use xlink:href=\"#@ICON\"></use>\n </svg>\n</div>\n\n<div class=\"braintree-option__label\">\n @OPTION_TITLE\n <div class=\"braintree-option__disabled-message\"></div>\n</div>\n"; | ||
| var paymentMethodOptionHTML = "<div class=\"braintree-option__logo\">\n <svg width=\"48\" height=\"29\" class=\"@CLASSNAME\">\n <use xlink:href=\"#@ICON\"></use>\n </svg>\n</div>\n\n<div class=\"braintree-option__label\">\n @OPTION_TITLE\n <div class=\"braintree-option__disabled-message\"></div>\n</div>\n"; | ||
@@ -36,2 +36,3 @@ function PaymentOptionsView() { | ||
| this.mainView.setPrimaryView(paymentOptionID); | ||
| this.model.selectPaymentOption(paymentOptionID); | ||
| analytics.sendEvent(this.client, 'selected.' + paymentOptionIDs[paymentOptionID]); | ||
@@ -38,0 +39,0 @@ }.bind(this); |
@@ -11,4 +11,5 @@ 'use strict'; | ||
| var transitionHelper = require('../../lib/transition-helper'); | ||
| var Promise = require('../../lib/promise'); | ||
| var cardIconHTML = "<div data-braintree-id=\"visa-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-visa\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"master-card-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-master-card\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"unionpay-card-icon\" class=\"braintree-sheet__card-icon braintree-hidden\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-unionpay\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"american-express-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-american-express\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"jcb-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-jcb\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"diners-club-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-diners-club\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"discover-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-discover\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"maestro-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg height=\"24\" width=\"40\">\n <use xlink:href=\"#icon-maestro\"></use>\n </svg>\n</div>\n"; | ||
| var cardIconHTML = "<div data-braintree-id=\"visa-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-visa\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"master-card-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-master-card\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"unionpay-card-icon\" class=\"braintree-sheet__card-icon braintree-hidden\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-unionpay\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"american-express-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-american-express\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"jcb-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-jcb\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"diners-club-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-diners-club\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"discover-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-discover\"></use>\n </svg>\n</div>\n<div data-braintree-id=\"maestro-card-icon\" class=\"braintree-sheet__card-icon\">\n <svg width=\"40\" height=\"24\">\n <use xlink:href=\"#icon-maestro\"></use>\n </svg>\n</div>\n"; | ||
@@ -28,5 +29,2 @@ function CardView() { | ||
| var cardIcons = this.getElementById('card-view-icons'); | ||
| var challenges = this.client.getConfiguration().gatewayConfiguration.challenges; | ||
| var hasCVV = challenges.indexOf('cvv') !== -1; | ||
| var hasPostal = challenges.indexOf('postal_code') !== -1; | ||
| var hfOptions = this._generateHostedFieldsOptions(); | ||
@@ -37,3 +35,3 @@ | ||
| this.hasCVV = hasCVV; | ||
| this.hasCVV = hfOptions.fields.cvv; | ||
| this.cardNumberIcon = this.getElementById('card-number-icon'); | ||
@@ -46,13 +44,10 @@ this.cardNumberIconSvg = this.getElementById('card-number-icon-svg'); | ||
| if (!hasCVV || !hfOptions.fields.cvv) { | ||
| if (!this.hasCVV) { | ||
| cvvFieldGroup = this.getElementById('cvv-field-group'); | ||
| cvvFieldGroup.parentNode.removeChild(cvvFieldGroup); | ||
| delete hfOptions.fields.cvv; | ||
| } | ||
| if (!hasPostal || !hfOptions.fields.postalCode) { | ||
| if (!hfOptions.fields.postalCode) { | ||
| postalCodeFieldGroup = this.getElementById('postal-code-field-group'); | ||
| postalCodeFieldGroup.parentNode.removeChild(postalCodeFieldGroup); | ||
| delete hfOptions.fields.postalCode; | ||
| } | ||
@@ -83,2 +78,5 @@ | ||
| CardView.prototype._generateHostedFieldsOptions = function () { | ||
| var challenges = this.client.getConfiguration().gatewayConfiguration.challenges; | ||
| var hasCVVChallenge = challenges.indexOf('cvv') !== -1; | ||
| var hasPostalCodeChallenge = challenges.indexOf('postal_code') !== -1; | ||
| var overrides = this.model.merchantConfiguration.card && this.model.merchantConfiguration.card.overrides; | ||
@@ -131,6 +129,12 @@ var options = { | ||
| if (!overrides) { | ||
| return options; | ||
| if (!hasCVVChallenge) { | ||
| delete options.fields.cvv; | ||
| } | ||
| if (!hasPostalCodeChallenge) { | ||
| delete options.fields.postalCode; | ||
| } | ||
| if (!overrides) { return options; } | ||
| if (overrides.fields) { | ||
@@ -164,2 +168,4 @@ if (overrides.fields.cvv && overrides.fields.cvv.placeholder) { | ||
| normalizeStyles(overrides.styles[style]); | ||
| assign(options.styles[style], overrides.styles[style]); | ||
@@ -233,3 +239,3 @@ }); | ||
| CardView.prototype.tokenize = function (callback) { | ||
| CardView.prototype.tokenize = function () { | ||
| var transitionCallback; | ||
@@ -241,27 +247,23 @@ var self = this; | ||
| if (this._validateForm(true)) { | ||
| self._isTokenizing = true; | ||
| if (!this._validateForm(true)) { | ||
| self.model.reportError('hostedFieldsFieldsInvalidError'); | ||
| classlist.remove(self.element, 'braintree-sheet--loading'); | ||
| self.hostedFieldsInstance.tokenize({ | ||
| vault: !self.model.isGuestCheckout | ||
| }, function (err, payload) { | ||
| if (err) { | ||
| self._isTokenizing = false; | ||
| self.model.reportError(err); | ||
| callback(new DropinError({ | ||
| message: constants.errors.NO_PAYMENT_METHOD_ERROR, | ||
| braintreeWebError: err | ||
| })); | ||
| classlist.remove(self.element, 'braintree-sheet--loading'); | ||
| return; | ||
| } | ||
| return Promise.reject(new DropinError(constants.errors.NO_PAYMENT_METHOD_ERROR)); | ||
| } | ||
| Object.keys(state.fields).forEach(function (field) { | ||
| self.hostedFieldsInstance.clear(field); | ||
| }); | ||
| self._isTokenizing = true; | ||
| if (!self.model.isGuestCheckout) { | ||
| payload.vaulted = true; | ||
| } | ||
| return self.hostedFieldsInstance.tokenize({ | ||
| vault: !self.model.isGuestCheckout | ||
| }).then(function (payload) { | ||
| Object.keys(state.fields).forEach(function (field) { | ||
| self.hostedFieldsInstance.clear(field); | ||
| }); | ||
| if (!self.model.isGuestCheckout) { | ||
| payload.vaulted = true; | ||
| } | ||
| return new Promise(function (resolve) { | ||
| transitionCallback = function () { | ||
@@ -272,3 +274,3 @@ // Wait for braintree-sheet--tokenized class to be added in IE 9 | ||
| self.model.addPaymentMethod(payload); | ||
| callback(null, payload); | ||
| resolve(payload); | ||
| classlist.remove(self.element, 'braintree-sheet--tokenized'); | ||
@@ -281,10 +283,17 @@ }, 0); | ||
| classlist.remove(self.element, 'braintree-sheet--loading'); | ||
| setTimeout(function () { | ||
| classlist.remove(self.element, 'braintree-sheet--loading'); | ||
| }, constants.CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT); | ||
| classlist.add(self.element, 'braintree-sheet--tokenized'); | ||
| }); | ||
| } else { | ||
| self.model.reportError('hostedFieldsFieldsInvalidError'); | ||
| callback(new DropinError(constants.errors.NO_PAYMENT_METHOD_ERROR)); | ||
| }).catch(function (err) { | ||
| self._isTokenizing = false; | ||
| self.model.reportError(err); | ||
| classlist.remove(self.element, 'braintree-sheet--loading'); | ||
| } | ||
| return Promise.reject(new DropinError({ | ||
| message: constants.errors.NO_PAYMENT_METHOD_ERROR, | ||
| braintreeWebError: err | ||
| })); | ||
| }); | ||
| }; | ||
@@ -294,6 +303,6 @@ | ||
| var fieldError; | ||
| var fieldGroup = this.getElementById(camelCaseToSnakeCase(field) + '-field-group'); | ||
| var fieldGroup = this.getElementById(camelCaseToKebabCase(field) + '-field-group'); | ||
| if (!this.fieldErrors.hasOwnProperty(field)) { | ||
| this.fieldErrors[field] = this.getElementById(camelCaseToSnakeCase(field) + '-field-error'); | ||
| this.fieldErrors[field] = this.getElementById(camelCaseToKebabCase(field) + '-field-error'); | ||
| } | ||
@@ -314,6 +323,6 @@ | ||
| CardView.prototype.hideFieldError = function (field) { | ||
| var fieldGroup = this.getElementById(camelCaseToSnakeCase(field) + '-field-group'); | ||
| var fieldGroup = this.getElementById(camelCaseToKebabCase(field) + '-field-group'); | ||
| if (!this.fieldErrors.hasOwnProperty(field)) { | ||
| this.fieldErrors[field] = this.getElementById(camelCaseToSnakeCase(field) + '-field-error'); | ||
| this.fieldErrors[field] = this.getElementById(camelCaseToKebabCase(field) + '-field-error'); | ||
| } | ||
@@ -329,4 +338,4 @@ | ||
| CardView.prototype.teardown = function (callback) { | ||
| this.hostedFieldsInstance.teardown(callback); | ||
| CardView.prototype.teardown = function () { | ||
| return this.hostedFieldsInstance.teardown(); | ||
| }; | ||
@@ -340,3 +349,3 @@ | ||
| var field = event.fields[event.emittedBy]; | ||
| var fieldGroup = this.getElementById(camelCaseToSnakeCase(event.emittedBy) + '-field-group'); | ||
| var fieldGroup = this.getElementById(camelCaseToKebabCase(event.emittedBy) + '-field-group'); | ||
| var activeId = document.activeElement && document.activeElement.id; | ||
@@ -395,3 +404,3 @@ var isHostedFieldsElement = document.activeElement instanceof HTMLIFrameElement && activeId.indexOf('braintree-hosted-field') !== -1; | ||
| CardView.prototype._onFocusEvent = function (event) { | ||
| var fieldGroup = this.getElementById(camelCaseToSnakeCase(event.emittedBy) + '-field-group'); | ||
| var fieldGroup = this.getElementById(camelCaseToKebabCase(event.emittedBy) + '-field-group'); | ||
@@ -429,5 +438,5 @@ classlist.add(fieldGroup, 'braintree-form__field-group--is-focused'); | ||
| CardView.prototype.requestPaymentMethod = function (callback) { | ||
| CardView.prototype.requestPaymentMethod = function () { | ||
| classlist.add(this.element, 'braintree-sheet--loading'); | ||
| this.tokenize(callback); | ||
| return this.tokenize(); | ||
| }; | ||
@@ -462,3 +471,3 @@ | ||
| function camelCaseToSnakeCase(string) { | ||
| function camelCaseToKebabCase(string) { | ||
| return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); | ||
@@ -471,2 +480,10 @@ } | ||
| function normalizeStyles(styles) { | ||
| Object.keys(styles).forEach(function (style) { | ||
| var transformedKeyName = camelCaseToKebabCase(style); | ||
| styles[transformedKeyName] = styles[style]; | ||
| }); | ||
| } | ||
| module.exports = CardView; |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.11%
228546
- Number of package files
- increased by1.64%
62
- Lines of code
- increased by4.98%
4279
Worsened metrics
- Dependency count
- increased by33.33%
4
Dependency changes
+ Addedbraintree-web@3.19.1(transitive)
+ Addedcredit-card-type@5.0.3(transitive)
- Removedbraintree-web@3.19.0(transitive)
- Removedcredit-card-type@5.0.2(transitive)
Updatedbraintree-web@3.19.1