@vyconsulting/ionic-stripe-checkout/vyconsulting-ionic-stripe-checkout.metadata.json

A simple Ionic 5 Stripe Checkout component using Angular.

{"__symbolic":"module","version":4,"metadata":{"IonicStripeCheckoutService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":15,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":5},"arguments":[{"__symbolic":"reference","name":"LibConfigService"}]}],null],"parameters":[{"__symbolic":"reference","name":"LibConfig"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":28,"character":24}]}],"onCreateTokenCard":[{"__symbolic":"method"}],"onConfirmPayment":[{"__symbolic":"method"}],"onCreateTokenPaymentFromServer":[{"__symbolic":"method"}],"onConfirmPaymentFromServer":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"IonicStripeCheckoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"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}"]}]}],"members":{"amount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"currency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"checkout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":40,"character":25},{"__symbolic":"reference","module":"@ionic/angular","name":"Platform","line":41,"character":22},{"__symbolic":"reference","name":"IonicStripeCheckoutService"},{"__symbolic":"reference","module":"@ionic/angular","name":"AlertController","line":43,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"onCheckOut":[{"__symbolic":"method"}],"onChooseCountry":[{"__symbolic":"method"}],"maskCardNumber":[{"__symbolic":"method"}],"maskStringCardNumber":[{"__symbolic":"method"}],"maskCardCVC":[{"__symbolic":"method"}],"maskStringardCVC":[{"__symbolic":"method"}],"maskCardExpire":[{"__symbolic":"method"}],"maskStringExpire":[{"__symbolic":"method"}],"getCardType":[{"__symbolic":"method"}]}},"LibConfig":{"__symbolic":"interface"},"LibConfigService":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":16,"character":36},"arguments":["LibConfig"]},"IonicStripeCheckoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":18,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":26},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":19,"character":47},{"__symbolic":"reference","module":"@ionic/angular","name":"IonicModule","line":19,"character":65}],"declarations":[{"__symbolic":"reference","name":"IonicStripeCheckoutComponent"}],"exports":[{"__symbolic":"reference","name":"IonicStripeCheckoutComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"IonicStripeCheckoutModule"},"providers":[{"__symbolic":"reference","name":"IonicStripeCheckoutService"},{"provide":{"__symbolic":"reference","name":"LibConfigService"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}}},"origins":{"IonicStripeCheckoutService":"./lib/services/ionic-stripe-checkout.service","IonicStripeCheckoutComponent":"./lib/components/ionic-stripe-checkout.component","LibConfig":"./lib/ionic-stripe-checkout.module","LibConfigService":"./lib/ionic-stripe-checkout.module","IonicStripeCheckoutModule":"./lib/ionic-stripe-checkout.module"},"importAs":"@vyconsulting/ionic-stripe-checkout"}