Features
- Collections: Card, Bank Transfers.
- Recurring payments: Recurring Payments: Tokenization and Subscriptions.
Requirements
- Spoflow Encryption keys
- Spotflow API keys
- Node versions >= 16.x.x npm >=7.x.x
Installation
npm install @spot-flow/ng-spotflow-checkout
Usage
As a component
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SpotflowAngularCheckoutModule } from '@spot-flow/ng-spotflow-checkout';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, SpotflowAngularCheckoutModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = '';
options = {
amount: 4000, // Not required for subscription payment
currency: "NGN",
email: "temi@mailinator.com", // Email of customer
name: "John", // Name of customer: Not required
phoneNumber: "09090909090", // Phone number of customer: Not required
reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
};
}
<spotflow-make-payment
text="Pay"
[options]="options"
[style]="{ 'background-color': 'black', color: 'white' }"> Make Payment
</spotflow-make-payment>
<router-outlet />
Parameters
Your transaction reference. This MUST be unique for every transaction
Amount to charge the customer. NB: For subscription payments, amount comes from the plan details. This is not required for subscription payments.
This is only required when a payment is being made in USD
This is the encryption key for the merchant. This is required for card payments.
This is the plan ID being paid for however, this is not required for one time payments.
This is the Customer’s Name
This is the Customer’s Phone Number
This is the Customer’s Email Address
This contains other information about the product such as the product name and other additional properties. Product Name should not be passed if planId is being passed
This is the URL the browser redirects to on success of a payment
