Registration of New Payment Systems

How are payment methods presented in PWAjet?

The payment method relates to class Payment. The payment has a payment code described by the property type with the type string.

type stores a link to a payment template in CS-Cart. For example, the Paypal online payment method will be of the type views/orders/components/payments/cc_outside.tpl, and the payment by phone number will be views/orders/components/payments/phone.tpl.

Types of payment methods

The application supports two different payment types:

  1. Offline - the user just needs to fill out a new form (for example, provide a phone number) and after click the order confirmation button to place the order.
  2. Online - the user may be required to fill out an additional form or follow to the website of a third-party payment gateway (for example, Paypal) and make a payment there.

Handler registration

Registration of a new payment method is performed by developing a new extension for this method.

  1. Create an application (follow the guide).
  2. Connect to the PWAjet API (click here for more information).

Using paymentService

By default, all active payment methods are displayed on the order page.

Offline payment methods not adapted to PWAjet do not interfere with the ordering process: the order confirmation button will stay active. In the worst case, the order information will not be full (for example, if a customer should fill in the delivery address, this form will not display in PWAjet without adaptation).

Online payment methods not adapted for PWAjet can interfere and prevent placing an order.

To adapt the payment method, register your payment method in paymentService:

paymentService.registerPayment({
 // React component of the payment form.
 // This component will be displayed before the order confirmation button
  form: PaymentPhone,
 // For which payment we register the payment handler
code: 'views/orders/components/payments/phone.tpl',
})

Display the form component:

Warning

form should be loaded dynamically.

const PaymentPhone = React.lazy(() => import('./payments/phone/PaymentPhone'))

Warning

The plug-in component of the payment form must have the onChange props: a function that returns an object with the form data and the sValid status of the form state: boolean (find description via pwajet.d.ts)

isValid is required to change the disabled status of the order confirmation button. For example, the PaymentPhone component returns isValid: false on the image above. If we fill in the Phone field, isValid will be true:

That’s enough for the adaptation of offline payment methods.

Adaptation of online payments has some differences. For example, use another property:

paymentService.registerPayment({
 handler: DefaultOnlinePayment,
  code: 'views/orders/components/payments/cc_outside.tpl',
})

where handler is also a dynamically loaded React component displayed after the user clicks the order confirmation button.

This can be any component, for example, the one that redirects the user to the payment system website to complete the payment.