CHAMSSWITCH PAYMENT SDK

Chamsswitch's official angular package to seamlessly integrate the payment sdk to recieve payments.

INSTALLATION

Firstly, you need to create a Chamsswitch Merchant Account account.
npm and angular2+ are required

To install the latest version of payment-chamsswitch-sdk, simply run the command:

npm i chamsswitch-sdk --save

USAGE

1. Import the module

Import the module in your app.module.ts or any module in which the component is needed, configure your issued clientId, clientSecret and integrationKey in the forRoot function like so:

...
import { ChamsswitchSdkModule } from 'chamsswitch-sdk';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChamsswitchSdkModule.forRoot({ 
      clientId: "Ken0000004",
      clientSecret: "d36eb5dd-a89f-411a-b024-4cdc11673c11",
      integrationKey: "a6ccab0e-157d-4fb7-b15d-ddb7cd149153",
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Parameters

Below is a list of the configuration supported parameters, this parameters are important, so they should be protected.

| Parameters | Data Type | Required | Description | |-----------------------|-----------|-------------|---------------------------------------------------------------------------------| | clientId | string | yes | clientid is one the credentials provided to merchant after registration | | clientSecret | string | yes | clientSecret is one the credentials provided to merchant after registration | | integrationKey | string | yes | integrationKey is one the credentials provided to merchant after registration |

2. Implement the chamsswitch payment sdk in your project

The payment-chamsswitch-sdk component is used. There are two ways to configure the component.

1. The minimum compulsory parameter you can supply to the payment sdk in order to generate a payment checkout button, use the component properties directly like so:

<payment-chamsswitch-sdk 
    [amount]="'10000'" 
    [currency]="'NGN'" 
    [email]="'[email protected]'"
    (paymentCallback)="yourCallbackFn($event)"
></payment-chamsswitch-sdk>

2. You can also supply more optional parameters like so:

<payment-chamsswitch-sdk 
    [amount]="'10000'" 
    [currency]="'NGN'" 
    [email]="'[email protected]'"
    [merchantRef]="'xxxxxxxxxxx'"
    [narration]="'xxxxxxxxxxxxxxxxxxxxxxx'"
    [callBackUrl]="'(https|http)://xxxxx.xxx.xxx/'"
    [lastName]="'Doe'"
    [firstName]="'John'"
    [customerId]="'xxxxxxxxx'"
    [phone]="'xxxxxxxxxxxx'"
    (paymentCallback)="yourCallbackFn($event)"
></payment-chamsswitch-sdk>

Note:

• merchantRef is the merchant unique transaction reference to recognize each transaction on our server.
• amount Amount to be debited from customer.

The event paymentCallback is raised after a transaction is completed. You can get the result of a transaction from the event handler assigned to it. A sample event handler will be like so:

  yourCallbackFn(event: any){
    console.log('received data: ', event);
  }

Parameters

Below is a list of the supported parameters to show up the payment sdk checkout button.

| Parameters | Data Type | Required | Description | |-----------------------|-----------|-------------|-----------------------------------------------------------------------------------| | amount | number | yes | Amount to be debited from customer. | | currency | string | yes | The currency code eg NGN. | | email | string | yes | The paying customer email address. | | merchantRef | string | no | The merchant ref is unique ref the merchant generate for each transaction. | | narration | string | no | Reason for the transaction. | | callBackUrl | string | no | This is the merchant specified destination link after payment is processed. | | customerId | string | no | The paying customer's ID. | | lastName | string | no | The paying customer's last name. | | firstName | string | no | The paying customer first name. | | email | string | no | The paying customer email address. | | paymentCallback | string | yes | The callback function that will inject the transaction details into your function.|

After a successful transaction, you will get a sample response like so and this response will be injected into your callback function supplied to the paymentCallback like so:

{
  "type": "successful",
  "message": {
    "merchantCode": "Ken0000004",
    "paymentReference": "7ff00bdf9150495e8d8f46484859efa9",
    "merchantReference": "65472029240600570",
    "amountCollected": 38300,
    "amount": 38300,
    "callBackUrl": "https://your_callback_url.com/?advicereference=de0d33f9-e697-4c0c-8dc8-ceaa24e832fb&paymentreference=7ff00bdf9150495e8d8f46484859efa9",
    "processorCode": "00",
    "transactionStatus": "Successful",
    "currencyCode": "NGN",
    "accountNumber": "95782a0826b00e0917f40deadb36f7142fcfd520162780b3513441c5b6e440d6",
    "accountNumberMasked": "5200*****0007",
    "narration": "",
    "env": "Test",
    "message": "Successful",
    "returnUrl": "https://api.pelpay.ng/payment/card/webhook?advicereference=de0d33f9-e697-4c0c-8dc8-ceaa24e832fb&paymentreference=7ff00bdf9150495e8d8f46484859efa9",
    "customerName": "Samuel John",
    "paymentDate": "2023-09-11T23:52:04.809021+01:00",
    "orgId": "1snn5n9w"
  }
}

NOTE: The key type gives the final status of the transaction.
There are quite a number of response codes that can be returned, the full list can be viewed here

- Handling the Response

For integrity purpose, you are advised to make a server side request to get the final status of a transaction before giving value. To do this, make a GET request to the endpoint below with the paymentReference field from the event you got in your callbackfn:

Test mode:

https://api.pelpay.ng/api/Transaction/bypaymentreference/{paymentReference}

TEST CARDS

| Type | Card Number | Expiry Date | Pin | CVV | OTP | |---------------|-------------------|-------------|---------|-------|-------| | Master Card | 5200000000000007 | 12/50 | 1111 | 111 | 1234 |

License

The MIT License (MIT). Please see License File for more information.