mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-09-20 16:31:33 +02:00
Fixed bug in js and implemented stripe iban element
This commit is contained in:
Lars Kusch
parent
93dfe178e0
commit
6e1e8d528e
93
public/js/clients/payments/stripe-sepa.js
vendored
93
public/js/clients/payments/stripe-sepa.js
vendored
@ -1,2 +1,91 @@
|
||||
/*! For license information please see stripe-sofort.js.LICENSE.txt */
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=6)}({6:function(e,t,n){e.exports=n("RFiP")},RFiP:function(e,t){var n,r,o,u;function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=null!==(n=null===(r=document.querySelector('meta[name="stripe-publishable-key"]'))||void 0===r?void 0:r.content)&&void 0!==n?n:"",l=null!==(o=null===(u=document.querySelector('meta[name="stripe-account-id"]'))||void 0===u?void 0:u.content)&&void 0!==o?o:"";new function e(t,n){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i(this,"setupStripe",(function(){return r.stripe=Stripe(r.key),r.stripeConnect&&(r.stripe.stripeAccount=l),r})),i(this,"handle",(function(){document.getElementById("pay-now").addEventListener("click",(function(e){document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),r.stripe.confirmSepaDebitPayment(document.querySelector("meta[name=pi-client-secret").content,{payment_method:{sepa_debit:{country:document.querySelector('meta[name="country"]').content}},return_url:document.querySelector('meta[name="return-url"]').content})}))})),this.key=t,this.errors=document.getElementById("errors"),this.stripeConnect=n}(c,l).setupStripe().handle()}});
|
||||
/**
|
||||
* Invoice Ninja (https://invoiceninja.com)
|
||||
*
|
||||
* @link https://github.com/invoiceninja/invoiceninja source repository
|
||||
*
|
||||
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
|
||||
*
|
||||
* @license https://opensource.org/licenses/AAL
|
||||
*/
|
||||
|
||||
class ProcessSEPA {
|
||||
constructor(key, stripeConnect) {
|
||||
this.key = key;
|
||||
this.errors = document.getElementById('errors');
|
||||
this.stripeConnect = stripeConnect;
|
||||
}
|
||||
|
||||
setupStripe = () => {
|
||||
this.stripe = Stripe(this.key);
|
||||
|
||||
if(this.stripeConnect)
|
||||
this.stripe.stripeAccount = stripeConnect;
|
||||
const elements = this.stripe.elements();
|
||||
var style = {
|
||||
base: {
|
||||
color: "#32325d",
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
||||
fontSmoothing: "antialiased",
|
||||
fontSize: "16px",
|
||||
"::placeholder": {
|
||||
color: "#aab7c4"
|
||||
},
|
||||
":-webkit-autofill": {
|
||||
color: "#32325d"
|
||||
}
|
||||
},
|
||||
invalid: {
|
||||
color: "#fa755a",
|
||||
iconColor: "#fa755a",
|
||||
":-webkit-autofill": {
|
||||
color: "#fa755a"
|
||||
}
|
||||
}
|
||||
};
|
||||
var options = {
|
||||
style: style,
|
||||
supportedCountries: ["SEPA"],
|
||||
// If you know the country of the customer, you can optionally pass it to
|
||||
// the Element as placeholderCountry. The example IBAN that is being used
|
||||
// as placeholder reflects the IBAN format of that country.
|
||||
placeholderCountry: "DE"
|
||||
};
|
||||
this.iban = elements.create("iban", options);
|
||||
this.iban.mount("#sepa-iban");
|
||||
return this;
|
||||
};
|
||||
|
||||
handle = () => {
|
||||
document.getElementById('pay-now').addEventListener('click', (e) => {
|
||||
document.getElementById('pay-now').disabled = true;
|
||||
document.querySelector('#pay-now > svg').classList.remove('hidden');
|
||||
document.querySelector('#pay-now > span').classList.add('hidden');
|
||||
|
||||
this.stripe.confirmSepaDebitPayment(
|
||||
document.querySelector('meta[name=pi-client-secret').content,
|
||||
{
|
||||
payment_method: {
|
||||
sepa_debit: this.iban,
|
||||
billing_details: {
|
||||
name: document.getElementById("sepa-name").value,
|
||||
email: document.getElementById("sepa-email-address").value,
|
||||
},
|
||||
},
|
||||
return_url: document.querySelector(
|
||||
'meta[name="return-url"]'
|
||||
).content,
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const publishableKey = document.querySelector(
|
||||
'meta[name="stripe-publishable-key"]'
|
||||
)?.content ?? '';
|
||||
|
||||
const stripeConnect =
|
||||
document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
|
||||
|
||||
new ProcessSEPA(publishableKey, stripeConnect).setupStripe().handle();
|
||||
|
||||
44
resources/js/clients/payments/stripe-sepa.js
vendored
44
resources/js/clients/payments/stripe-sepa.js
vendored
@ -20,7 +20,39 @@ class ProcessSEPA {
|
||||
|
||||
if(this.stripeConnect)
|
||||
this.stripe.stripeAccount = stripeConnect;
|
||||
|
||||
const elements = this.stripe.elements();
|
||||
var style = {
|
||||
base: {
|
||||
color: "#32325d",
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
||||
fontSmoothing: "antialiased",
|
||||
fontSize: "16px",
|
||||
"::placeholder": {
|
||||
color: "#aab7c4"
|
||||
},
|
||||
":-webkit-autofill": {
|
||||
color: "#32325d"
|
||||
}
|
||||
},
|
||||
invalid: {
|
||||
color: "#fa755a",
|
||||
iconColor: "#fa755a",
|
||||
":-webkit-autofill": {
|
||||
color: "#fa755a"
|
||||
}
|
||||
}
|
||||
};
|
||||
var options = {
|
||||
style: style,
|
||||
supportedCountries: ["SEPA"],
|
||||
// If you know the country of the customer, you can optionally pass it to
|
||||
// the Element as placeholderCountry. The example IBAN that is being used
|
||||
// as placeholder reflects the IBAN format of that country.
|
||||
placeholderCountry: "DE"
|
||||
};
|
||||
this.iban = elements.create("iban", options);
|
||||
this.iban.mount("#sepa-iban");
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -34,12 +66,10 @@ class ProcessSEPA {
|
||||
document.querySelector('meta[name=pi-client-secret').content,
|
||||
{
|
||||
payment_method: {
|
||||
sepa_debit: {
|
||||
sepa_debit: document.getElementById("sepa-iban").value,
|
||||
billing_details: {
|
||||
name: document.getElementById("sepa-email-addres").value,
|
||||
email: document.getElementById("sepa-name").value,
|
||||
},
|
||||
sepa_debit: this.iban,
|
||||
billing_details: {
|
||||
name: document.getElementById("sepa-name").value,
|
||||
email: document.getElementById("sepa-email-address").value,
|
||||
},
|
||||
},
|
||||
return_url: document.querySelector(
|
||||
|
||||
@ -6,10 +6,14 @@
|
||||
<label for="sepa-email">
|
||||
<input class="input mr-4" id="sepa-email-address" type="email" placeholder="{{ ctrans('texts.email') }}">
|
||||
</label>
|
||||
<label for="sepa-iban">
|
||||
<input class="input w-full" id="sepa-iban" type="text" placeholder="{{ctrans('texts.iban')}}">
|
||||
</label>
|
||||
<br>
|
||||
<div>
|
||||
<label for="sepa-iban">
|
||||
IBAN
|
||||
</label>
|
||||
<div id="sepa-iban">
|
||||
<!-- A Stripe Element will be inserted here. -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="mandate-acceptance">
|
||||
<input type="checkbox" id="sepa-mandate-acceptance">
|
||||
<label for="sepa-mandate-acceptance">{{ctrans('texts.sepa_mandat')}}</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user