@vyconsulting/ionic-stripe-checkout
Version:
A simple Ionic 5 Stripe Checkout component using Angular.
2 lines • 21.5 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/common/http"),require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@ionic/angular")):"function"==typeof define&&define.amd?define("@vyconsulting/ionic-stripe-checkout",["exports","@angular/common/http","@angular/core","@angular/common","@angular/forms","@ionic/angular"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self).vyconsulting=e.vyconsulting||{},e.vyconsulting["ionic-stripe-checkout"]={}),e.ng.common.http,e.ng.core,e.ng.common,e.ng.forms,e.angular)}(this,(function(e,n,r,i,a,o){"use strict";function t(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var c=t(n),s=t(r);function d(e,n,r,i){var a,o=arguments.length,t=o<3?n:null===i?i=Object.getOwnPropertyDescriptor(n,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)t=Reflect.decorate(e,n,r,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(t=(o<3?a(t):o>3?a(n,r,t):a(n,r))||t);return o>3&&t&&Object.defineProperty(n,r,t),t}function l(e,n,r,i){return new(r||(r=Promise))((function(a,o){function t(e){try{s(i.next(e))}catch(e){o(e)}}function c(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var n;e.done?a(e.value):(n=e.value,n instanceof r?n:new r((function(e){e(n)}))).then(t,c)}s((i=i.apply(e,n||[])).next())}))}function u(e,n){var r,i,a,o,t={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(o){return function(c){return function(o){if(r)throw new TypeError("Generator is already executing.");for(;t;)try{if(r=1,i&&(a=2&o[0]?i.return:o[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;switch(i=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return t.label++,{value:o[1],done:!1};case 5:t.label++,i=o[1],o=[0];continue;case 7:o=t.ops.pop(),t.trys.pop();continue;default:if(!(a=t.trys,(a=a.length>0&&a[a.length-1])||6!==o[0]&&2!==o[0])){t=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]<a[3])){t.label=o[1];break}if(6===o[0]&&t.label<a[1]){t.label=a[1],a=o;break}if(a&&t.label<a[2]){t.label=a[2],t.ops.push(o);break}a[2]&&t.ops.pop(),t.trys.pop();continue}o=n.call(e,t)}catch(e){o=[6,e],i=0}finally{r=a=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,c])}}}var p,h=["Afghanistan","Albania","Algeria","American Samoa","Andorra","Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas (the)","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia (Plurinational State of)","Bonaire, Sint Eustatius and Saba","Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory (the)","Brunei Darussalam","Bulgaria","Burkina Faso","Burundi","Cabo Verde","Cambodia","Cameroon","Canada","Cayman Islands (the)","Central African Republic (the)","Chad","Chile","China","Christmas Island","Cocos (Keeling) Islands (the)","Colombia","Comoros (the)","Congo (the Democratic Republic of the)","Congo (the)","Cook Islands (the)","Costa Rica","Croatia","Cuba","Curaçao","Cyprus","Czechia","Côte d'Ivoire","Denmark","Djibouti","Dominica","Dominican Republic (the)","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Eswatini","Ethiopia","Falkland Islands (the) [Malvinas]","Faroe Islands (the)","Fiji","Finland","France","French Guiana","French Polynesia","French Southern Territories (the)","Gabon","Gambia (the)","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guadeloupe","Guam","Guatemala","Guernsey","Guinea","Guinea-Bissau","Guyana","Haiti","Heard Island and McDonald Islands","Holy See (the)","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran (Islamic Republic of)","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Korea (the Democratic People's Republic of)","Korea (the Republic of)","Kuwait","Kyrgyzstan","Lao People's Democratic Republic (the)","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macao","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands (the)","Martinique","Mauritania","Mauritius","Mayotte","Mexico","Micronesia (Federated States of)","Moldova (the Republic of)","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauru","Nepal","Netherlands (the)","New Caledonia","New Zealand","Nicaragua","Niger (the)","Nigeria","Niue","Norfolk Island","Northern Mariana Islands (the)","Norway","Oman","Pakistan","Palau","Palestine, State of","Panama","Papua New Guinea","Paraguay","Peru","Philippines (the)","Pitcairn","Poland","Portugal","Puerto Rico","Qatar","Republic of North Macedonia","Romania","Russian Federation (the)","Rwanda","Réunion","Saint Barthélemy","Saint Helena, Ascension and Tristan da Cunha","Saint Kitts and Nevis","Saint Lucia","Saint Martin (French part)","Saint Pierre and Miquelon","Saint Vincent and the Grenadines","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Sint Maarten (Dutch part)","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Georgia and the South Sandwich Islands","South Sudan","Spain","Sri Lanka","Sudan (the)","Suriname","Svalbard and Jan Mayen","Sweden","Switzerland","Syrian Arab Republic","Taiwan","Tajikistan","Tanzania, United Republic of","Thailand","Timor-Leste","Togo","Tokelau","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Turks and Caicos Islands (the)","Tuvalu","Uganda","Ukraine","United Arab Emirates (the)","United Kingdom of Great Britain and Northern Ireland (the)","United States Minor Outlying Islands (the)","United States of America (the)","Uruguay","Uzbekistan","Vanuatu","Venezuela (Bolivarian Republic of)","Viet Nam","Virgin Islands (British)","Virgin Islands (U.S.)","Wallis and Futuna","Western Sahara","Yemen","Zambia","Zimbabwe","Åland Islands"];e.IonicStripeCheckoutComponent=function(){function e(e,n,i,o){this.formBuilder=e,this.platform=n,this.ionicStripeCheckoutService=i,this.alertController=o,this.cardLogo="",this.isPaymentLoading=!1,this.isAndroid=!1,this.checkout=new r.EventEmitter,this.cardForm=this.formBuilder.group({cardNumber:[null,[a.Validators.required,a.Validators.maxLength(19),a.Validators.minLength(19)]],cardExpire:[null,[a.Validators.required,a.Validators.minLength(5),a.Validators.maxLength(5)]],cardCVC:[null,[a.Validators.required,a.Validators.minLength(3),a.Validators.maxLength(3)]],cardHolderName:[null,[a.Validators.required]]}),this.cardNumber=this.cardForm.controls.cardNumber,this.cardExpire=this.cardForm.controls.cardExpire,this.cardCVC=this.cardForm.controls.cardCVC,this.cardHolderName=this.cardForm.controls.cardHolderName}return e.prototype.ngOnInit=function(){this.platform.is("android")?this.isAndroid=!0:this.isAndroid=!1,this.language=this.ionicStripeCheckoutService.language},e.prototype.onCheckOut=function(){var e=this;this.isPaymentLoading=!0;var n={cardCVC:this.cardCVC.value,cardMonth:this.cardExpire.value.split("/")[0],cardYear:this.cardExpire.value.split("/")[1],cardNumber:this.cardNumber.value.trim(),cardHolderName:this.cardHolderName.value,cardCountry:this.countryChoosed};this.ionicStripeCheckoutService.stripePublishableKey?this.ionicStripeCheckoutService.urlCreatePayment?this.ionicStripeCheckoutService.urlCreateToken?this.ionicStripeCheckoutService.onCreateTokenPaymentFromServer(n).subscribe((function(r){e.ionicStripeCheckoutService.onConfirmPaymentFromServer({amount:(100*Number(e.amount)).toString(),currency:e.currency,source:r.token.id}).subscribe((function(r){e.isPaymentLoading=!1,r.card_month=n.cardMonth,r.card_year=n.cardYear,r.card_number=n.cardNumber.substring(n.cardNumber.length-4,n.cardNumber.length),e.checkout.emit(r)}),(function(n){e.checkout.emit(n),e.isPaymentLoading=!1}))}),(function(n){e.checkout.emit(n),e.isPaymentLoading=!1})):(this.checkout.emit({error:"en"===this.language?"Your URL for create token is not present in forRoot configuration.":"Votre URL pour initialiser le token n'est pas présent dans la configuration forRoot."}),this.isPaymentLoading=!1):(this.checkout.emit({error:"en"===this.language?"Your URL for create payment is not present in forRoot configuration.":"Votre URL pour initialiser le paiemment n'est pas présent dans la configuration forRoot."}),this.isPaymentLoading=!1):this.ionicStripeCheckoutService.onCreateTokenCard(n).subscribe((function(r){e.ionicStripeCheckoutService.onConfirmPayment({amount:(100*Number(e.amount)).toString(),currency:e.currency,source:r.id}).subscribe((function(r){e.isPaymentLoading=!1,r.card_month=n.cardMonth,r.card_year=n.cardYear,r.card_number=n.cardNumber.substring(n.cardNumber.length-4,n.cardNumber.length),e.checkout.emit(r)}),(function(n){e.checkout.emit(n),e.isPaymentLoading=!1}))}),(function(n){e.checkout.emit(n),e.isPaymentLoading=!1}))},e.prototype.onChooseCountry=function(){return l(this,void 0,void 0,(function(){var e,n=this;return u(this,(function(r){switch(r.label){case 0:return e=[],h.forEach((function(n,r){e.push({name:"radios"+r,type:"radio",label:""+n,value:""+n,checked:!1})})),[4,this.alertController.create({inputs:e,buttons:[{text:"fr"===this.language?"Annuler":"Cancel",role:"cancel"},{text:"OK",handler:function(e){n.countryChoosed=e}}]})];case 1:return[4,r.sent().present()];case 2:return r.sent(),[2]}}))}))},e.prototype.maskCardNumber=function(e){var n=e.detail.value;n=(n=n?n.split(" ").join(""):"").length>16?n.substring(0,16):n,this.cardNumber.setValue(this.maskStringCardNumber(n));var r=this.getCardType(this.cardNumber.value);this.cardLogo="https://res.cloudinary.com/dqwudn0fq/image/upload/v1604747715/"+r+".png"},e.prototype.maskStringCardNumber=function(e){return e=(e=(e=(e=(e=e.replace(/\D/g,"")).replace(/(\d{4})(\d)/,"$1 $2")).replace(/(\d{4})(\d)/,"$1 $2")).replace(/(\d{4})(\d)/,"$1 $2")).replace(/(\d{4})(\d)/,"$1 $2")},e.prototype.maskCardCVC=function(e){var n=e.detail.value;n=(n=n?n.split(" ").join(""):"").length>3?n.substring(0,3):n,this.cardCVC.setValue(this.maskStringardCVC(n))},e.prototype.maskStringardCVC=function(e){return e=(e=e.replace(/\D/g,"")).replace(/(\d{3})(\d)/,"$1 $2")},e.prototype.maskCardExpire=function(e){var n=e.detail.value;n=(n=n?n.split(" ").join("/"):"").length>5?n.substring(0,5):n,this.cardExpire.setValue(this.maskStringExpire(n).replace(" ","/"))},e.prototype.maskStringExpire=function(e){return e=(e=(e=e.replace(/\D/g,"")).replace(/(\d{2})(\d)/,"$1 $2")).replace(/(\d{2})(\d)/,"$1 $2")},e.prototype.getCardType=function(e){var n=new RegExp("^(?:2131|1800|35)[0-9]{0,}$"),r=new RegExp("^3[47][0-9]{0,}$"),i=new RegExp("^3(?:0[0-59]{1}|[689])[0-9]{0,}$"),a=new RegExp("^4[0-9]{0,}$"),o=new RegExp("^(5[1-5]|222[1-9]|22[3-9]|2[3-6]|27[01]|2720)[0-9]{0,}$"),t=new RegExp("^(5[06789]|6)[0-9]{0,}$"),c=new RegExp("^(6011|65|64[4-9]|62212[6-9]|6221[3-9]|622[2-8]|6229[01]|62292[0-5])[0-9]{0,}$"),s="";return(e=e.replace(/\D/g,"")).match(n)?s="jcb":e.match(r)?s="americanexpress":e.match(i)?s="diners_club":e.match(a)?s="visa":e.match(o)?s="mastercard":e.match(c)?s="discover":e.match(t)&&(s="5"==e[0]?"mastercard":"maestro"),s},e}(),d([r.Input()],e.IonicStripeCheckoutComponent.prototype,"amount",void 0),d([r.Input()],e.IonicStripeCheckoutComponent.prototype,"currency",void 0),d([r.Output()],e.IonicStripeCheckoutComponent.prototype,"checkout",void 0),e.IonicStripeCheckoutComponent=d([r.Component({selector:"ion-stripe-checkout",template:'<div [formGroup]="cardForm">\n <ion-grid>\n <ion-row>\n <ion-col offset-md="4" size-md="4">\n <ion-item lines="none" class="item__info-card">\n <ion-label position="stacked">{{\n language === "fr" ? "Informations de la carte" : "Card Informations"\n }}</ion-label>\n <ion-input\n class="input__card-number"\n [formControl]="cardNumber"\n (ionChange)="maskCardNumber($event)"\n minlength="19"\n maxlength="19"\n placeholder="1234 1234 1234 1234"\n ></ion-input>\n <img\n *ngIf="\n cardLogo !==\n \'https://res.cloudinary.com/dqwudn0fq/image/upload/v1604747715/.png\'\n "\n [src]="cardLogo"\n />\n </ion-item>\n <span\n class="span__error_card-number"\n *ngIf="cardNumber.touched && cardNumber.errors"\n >\n {{\n language === "fr"\n ? "** Le numéro de la carte est obligatoire"\n : "** Card number is required"\n }}</span\n >\n\n <ion-row\n [class]="isAndroid ? \'row__expire-cvc-md\' : \'row__expire-cvc-ios\'"\n >\n <ion-col size="6">\n <ion-input\n class="input__expire-cvc"\n [formControl]="cardExpire"\n (ionChange)="maskCardExpire($event)"\n minlength="5"\n maxlength="5"\n placeholder="MM/AA"\n ></ion-input>\n <span\n class="span__error_card-expiration"\n *ngIf="cardExpire.touched && cardExpire.errors"\n >{{\n language === "fr"\n ? "** Ce champ est obligatoire"\n : "** Card expiration is required"\n }}</span\n >\n </ion-col>\n <ion-col size="6">\n <ion-input\n class="input__expire-cvc"\n [formControl]="cardCVC"\n (ionChange)="maskCardCVC($event)"\n maxlength="3"\n minlength="3"\n placeholder="CVC"\n ></ion-input>\n <span\n class="span__error_card-cvc"\n *ngIf="cardCVC.touched && cardCVC.errors"\n >{{\n language === "fr"\n ? "** Le CVV est obligatoire"\n : "** Card CVC is required"\n }}</span\n >\n </ion-col>\n </ion-row>\n\n <ion-item lines="none" class="item__cardholder-name">\n <ion-label position="stacked">{{\n language === "fr"\n ? "Nom du titulaire de la carte"\n : "Name of the card holder"\n }}</ion-label>\n <ion-input [formControl]="cardHolderName"></ion-input>\n </ion-item>\n <span\n class="span__error_cardholder-name"\n *ngIf="cardHolderName.touched && cardHolderName.errors"\n >{{\n language === "fr"\n ? "** Le nom du titulaire de la carte est obligatoire"\n : "** Card holder name is required"\n }}</span\n >\n\n <ion-item lines="none" class="item__cardholder-country">\n <ion-label position="stacked">{{\n language === "fr" ? "Pays ou région" : "Country or region"\n }}</ion-label>\n <ion-input\n [readonly]="true"\n (click)="onChooseCountry()"\n [value]="countryChoosed"\n ></ion-input>\n <ion-icon\n name="chevron-down-outline"\n slot="end"\n [class]="isAndroid ? \'icon-chevron-md\' : \'icon-chevron-ios\'"\n (click)="onChooseCountry()"\n ></ion-icon>\n </ion-item>\n\n <ion-button\n [disabled]="cardForm.invalid || isPaymentLoading"\n class="button__pay"\n mode="ios"\n expand="full"\n shape="round"\n (click)="onCheckOut()"\n >\n {{ language === "fr" ? "Payer" : "Pay" }}\n {{ amount | currency: currency:"symbol-narrow" }}\n\n <ion-spinner name="bubbles" *ngIf="isPaymentLoading"></ion-spinner>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-grid>\n</div>\n',styles:["div{margin-top:10%}div .item__info-card{margin-top:2%}div .item__info-card .input__card-number{--padding-start:16px;border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px;box-shadow:0 0 2px #e0e0e0,-4px -4px 2px #fff;margin-top:10px}div .item__info-card img{display:block;position:absolute;right:24px;top:38px;width:40px}div .span__error_card-number{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-bottom:20px;margin-left:16px}div .row__expire-cvc-md{margin-top:-17px;padding:11px}div .row__expire-cvc-md ion-col:first-child .input__expire-cvc{--padding-start:16px;border:1px solid #e0e0e0;border-bottom-left-radius:6px;width:calc(100% + 11px)}div .row__expire-cvc-md ion-col:first-child .span__error_card-expiration{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-left:5px}div .row__expire-cvc-md ion-col:nth-child(2) .input__expire-cvc{--padding-start:16px;border:1px solid #e0e0e0;border-bottom-right-radius:6px;width:100%}div .row__expire-cvc-md ion-col:nth-child(2) .span__error_card-cvc{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-left:5px}div .row__expire-cvc-ios{margin-left:9px;margin-top:-12px;padding:5.5px}div .row__expire-cvc-ios ion-col:first-child .input__expire-cvc{--padding-start:16px;border:1px solid #e0e0e0;border-bottom-left-radius:6px;width:calc(100% + 11px)}div .row__expire-cvc-ios ion-col:first-child .span__error_card-expiration{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-left:5px}div .row__expire-cvc-ios ion-col:nth-child(2) .input__expire-cvc{--padding-start:16px;border:1px solid #e0e0e0;border-bottom-right-radius:6px;width:100%}div .row__expire-cvc-ios ion-col:nth-child(2) .span__error_card-cvc{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-left:5px}div .item__cardholder-name{margin-top:2%}div .item__cardholder-name ion-input{--padding-start:16px;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 0 2px #e0e0e0,-4px -4px 2px #fff;margin-top:10px}div .span__error_cardholder-name{color:var(--ion-color-danger);display:block;font-size:small;font-weight:bolder;margin-bottom:16px;margin-left:16px}div .item__cardholder-country{margin-top:2%}div .item__cardholder-country ion-input{--padding-start:16px;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 0 2px #e0e0e0,-4px -4px 2px #fff;margin-top:10px}div .item__cardholder-country .icon-chevron-md{color:#191c17;display:block;font-size:larger;position:absolute;right:21px;top:36px;z-index:2}div .item__cardholder-country .icon-chevron-ios{color:#191c17;display:block;font-size:larger;position:absolute;right:21px;top:50px;z-index:2}div .button__pay{--border-radius:6px;display:block;margin:7% auto;width:93%}div .button__pay ion-spinner{display:block;position:absolute;right:-15px}"]})],e.IonicStripeCheckoutComponent);var m,g,f=new r.InjectionToken("LibConfig");e.IonicStripeCheckoutModule=p=function(){function n(){}return n.forRoot=function(n){return{ngModule:p,providers:[e.IonicStripeCheckoutService,{provide:f,useValue:n}]}},n}(),e.IonicStripeCheckoutModule=p=d([r.NgModule({imports:[i.CommonModule,a.ReactiveFormsModule,n.HttpClientModule,o.IonicModule],declarations:[e.IonicStripeCheckoutComponent],exports:[e.IonicStripeCheckoutComponent]})],e.IonicStripeCheckoutModule),e.IonicStripeCheckoutService=function(){function e(e,r){var i;this.config=e,this.httpClient=r,this.stripeSecretKey=this.config.stripe_secret_key,this.stripePublishableKey=this.config.stripe_publishable_key,this.urlCreateToken=this.config.url_token_card,this.urlCreatePayment=this.config.url_create_payment,this.language=null!==(i=this.config.language)&&void 0!==i?i:"en",this.headers=new n.HttpHeaders,this.headers=this.headers.append("Authorization","Bearer "+this.stripeSecretKey),this.headers=this.headers.append("Content-Type","application/x-www-form-urlencoded")}return e.prototype.onCreateTokenCard=function(e){return this.httpClient.post("https://api.stripe.com/v1/tokens?",[],{headers:this.headers,params:{"card[number]":e.cardNumber,"card[exp_month]":e.cardMonth,"card[exp_year]":e.cardYear,"card[cvc]":e.cardCVC,"card[name]":e.cardHolderName,"card[address_country]":e.cardCountry}})},e.prototype.onConfirmPayment=function(e){return this.httpClient.post("https://api.stripe.com/v1/charges?",[],{headers:this.headers,params:{amount:e.amount,currency:e.currency,source:e.source}})},e.prototype.onCreateTokenPaymentFromServer=function(e){return this.httpClient.post(this.urlCreateToken,e)},e.prototype.onConfirmPaymentFromServer=function(e){return this.httpClient.post(this.urlCreatePayment,e)},e}(),e.IonicStripeCheckoutService.ɵprov=s.ɵɵdefineInjectable({factory:function(){return new e.IonicStripeCheckoutService(s.ɵɵinject(f),s.ɵɵinject(c.HttpClient))},token:e.IonicStripeCheckoutService,providedIn:"root"}),e.IonicStripeCheckoutService=d([r.Injectable({providedIn:"root"}),(m=0,g=r.Inject(f),function(e,n){g(e,n,m)})],e.IonicStripeCheckoutService),e.LibConfigService=f,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=vyconsulting-ionic-stripe-checkout.umd.min.js.map