integrating valitor with angular

This article briefly describes how you integrate the Valitor Payment processing with an Angular application. Valitor Checkout provides a simple and easy way to take payments for your Angular application. It’s API integration method is well suited for use with Angular.

Valitor’s documented method of using its payment gadget does not quite work with Angular and needs some adoption.

Load the Script

As we can’t use script tags in our Angular template we dynamically load the script.

ngOnInit(): void { const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://checkout.uat.valitor.is/checkout.js'; script.onload = () => { const css = { headerColor: 'pink', headerCloseColor: 'red', }; valitor.checkout.init({ key: 'ApiKey.rOF/JCRpEFxJwlv+rNqBS1/VmwVMx2YLXNPZRRiSlTc=', language: 'en', merchant: 'Valitor Checkout Demo', currency: 'ISK', image: 'https://specs.valitor.is/Acquiring/Checkout/en/images/valitor-logo-blue.png', css, }); }; document.getElementsByTagName('head')[0].append(script); }

In our component we want to use the payment we create a new script element and set its type for Javascript and point the source the Valitor’s Javascript checkout script. Using the onload callback we than configure the Valitor’s API with the required key and its customization as you prefer it for your application.

Lastly we lookup the head element of the DOM and append our script to it.

Now the Angular compiler will not know about the valitor variable as this is generated by the checkout script as a global variable, so at the top of our components Typescript file we declare it:

declare var valitor: any;

Opening the Valitor Gadget

Before we can create our template to use the payment, we need at least one more method in our components code to open the gadget:

pay() { valitor.checkout.open(19.95); }

This will request a payment for the 19.95 in the currency you have previously configured in the onload callback.

In a real world application this would of course come from a variable like your baskets total value.

Template

Now we can add a very basic form to our template that will trigger our payment gadget and collect the response value back from the Valitor Payment process.

<form id="valitorCheckout"> <button type="button" (click)="pay()">Pay</button> </form>

So very simply we have a form, which only requirement is to have the id set to valitorCheckout and our button that calls the open method.

Catching the Response

Now this works all good and well but we actually don’t know anything about our transaction that the user might have performed.

First we need to add our @ViewChild reference so we can access the form element from the code:

@ViewChild('form', {static: false}) form: ElementRef;

And than we need a method for processing our data:

onSubmit() { const response = JSON.parse(this.form.nativeElement.elements.namedItem('response').value); console.log(response); }

From our ElementRef of the form we can grab the forms elements of which the Valitor script inserts and element named response which is a JSON data structure and we parse this into an object. You can use the response information to update your baskets records.Now we need to update our form to integrate with the code:

<form id="valitorCheckout" #form (submit)="onSubmit()"> <button type="button" (click)="pay()">Pay</button> </form>

And we receive a response message:

{ AgreementNumber: null Amount: "10.5" AuthorizationNumber: "933127" CardType: "Mastercard" Date: "2020-06-16T18:01:32.0168314+00:00" ReferenceNumber: null Successful: true TransactionNumber: "016818569505" }

Making Improvements

As we load our script dynamically the script's code might not be available at the time of loading we need to prevent the user from pressing our button prematurely.

We simply add a tracking variable to our component and in our onload callback we update it.

export class MyComponent implements OnInit { canPay = false; ... script.onload = () => { ... this.canPay = true; }

We than simple disable the button while we wait for the script to load and the Valitor script to be configured.

<form id="valitorCheckout" #form (submit)="onSubmit()"> <button type="button" (click)="pay()" [disabled]="!canPay">Pay</button> </form>

Conclusion

This little bit of code example provides a quick and simple way to integrate Valitor Checkout with an Angular application. You can package this into a small component with an @Input to pass your payment amount into it and a Subject/Observable to respond back to the calling component.

Following here is the LinkedIn link to the article, feel free to comment on it and I appreciate any share

Switched On Systems - 4 Victoria Street - Craigellachie AB38 9SR - Scotland, UK