TotvsPag Checkout

This library will help you to integrate with our checkout solution. We provide a two different ways to use our solution:

Payment Service

Using payment service you can create payment link, and redirect users to a checkout page.

Embed Checkout component

With checkout component you can add the checkout form inside your application, and get notifications of payment status.

Follow the steps below check how to configure and integrate both methods.

Initial Configuration

It`s possible to configure once the checkout information.

Import the checkout module

import { CheckoutModule } from '@totvspag/ng-checkout';

Add the code below in our appModule in the imports section, and replace the token for the one you received in dev-portal. This configurations you can obtain through dev-portal.

CheckoutModule.forRoot({
      tokenApplication: 'add your tokenApplication here',
      tokenClient: 'add your tokenClient here',

      *** Possible environment configurations ***
      // environment: EnvironmentEnum.Docker  
      // environment: EnvironmentEnum.Prod  
      environment: EnvironmentEnum.Dev 
})

Generate a payment link

You can create payment links to redirect your users to a checkout page.

Import payment service and configure you checkout information.

import { PaymentService, Customer, Checkout } from '@totvspag/ng-checkout';

const customer: Customer = {
    country: 'BR',
    lastName: 'Customer last name',
    firstName: 'Customer first name',
    postalCode: '48104-2201',
    locality: 'Ann Arbor',
    district: 'Lagos',
    administrativeArea: 'MI',
    email: '[email protected]',
    street: 'some street',
    streetnumber: '99'
};

const checkout: Checkout = {
    integrationId: 'xxx', // some string that you wanna use to identify this payment
    amount: {
      totalAmount: '100',
      currency: 'BRL'
    },
    customer // the customer configuration set above
};

// call getPaymentUrl from paymentService to get a url to the checkout

// checkout = checkout information set above
// page = You can use `page` to get a url from the checkout page or null to get a url of checkout form only
const paymentUrl = this.paymentService.getPaymentUrl(checkout, 'page');

If you wanna create url using a different checkout configuration, you can pass it as a third parameter

const customConfig: {
      tokenApplication: 'custom tokenApplication here',
      tokenClient: 'custom tokenClient here',
      environment: EnvironmentEnum.Dev
}
const paymentUrl = this.paymentService.getPaymentUrl(checkout, 'page', config);

Using checkout embed component

You can add a checkout form inside your page by adding the <pay-embed-checkout> component in your page. During the payment, the component will notify payment status changes.

###TS

import { Customer, Checkout } from '@totvspag/ng-checkout';

const customer: Customer = {
    country: 'BR',
    lastName: 'Customer last name',
    firstName: 'Customer first name',
    postalCode: '48104-2201',
    locality: 'Ann Arbor',
    district: 'Lagos',
    administrativeArea: 'MI',
    email: '[email protected]',
    street: 'some street',
    streetnumber: '99'
};

const checkout: Checkout = {
    integrationId: 'xxx', // some string that you want use to identify this payment
    amount: {
      totalAmount: '100',
      currency: 'BRL'
    },
    customer // the customer configuration set above

    paymentStatusChange(paymentStatus) {
      // possible paymentStatus
      // 'init', 'running', 'success', 'error', 'expired', 'retry'        
    };

###HTML

<pay-embed-checkout 
    [checkoutInfo]="checkout" // some checkout configuration as shown above
    [config]="config" // this parameter is optional in case you want use a different configuration
    (paymentStatusChange)="paymentStatusChange($event)" >
</pay-embed-checkout>