{"id":9014,"date":"2024-06-10T12:18:52","date_gmt":"2024-06-10T12:18:52","guid":{"rendered":"https:\/\/ccbill.com\/doc\/?post_type=tjspw&p=9014"},"modified":"2024-10-04T13:29:13","modified_gmt":"2024-10-04T13:29:13","slug":"angular","status":"publish","type":"tjspw","link":"https:\/\/ccbill.com\/doc\/tjspw\/angular","title":{"rendered":"Angular"},"content":{"rendered":"\n
\n
\n
\n

Angular<\/h2>\n\t

Complete the following steps to integrate the CCBill API Payment Widget into your Angular application.<\/p>\n\t

\n\t\t

1.<\/span> Installation and Setup<\/h3>\n\t\t

To use the widget, add a <script><\/code><\/strong> import in the header of the main index.html<\/em> file.<\/p>\n\t\t

The <ccb-payment-widget><\/code><\/strong> HTML tag is a non-standard element. You must tell the Angular app to use this element by defining a schema. <\/p>\n\t\t

Add the CUSTOM_ELEMENTS_SCHEMA<\/code><\/strong> to the @NgModule<\/code><\/strong> decorator in the app.module.ts<\/em> file.\n\t\t

If using standalone components, add the schema within the @Component<\/code><\/strong> decorator.<\/p>\n\t<\/article>\n\t

\n\t\t

2.<\/span> Usage<\/h3>\n\t\t

The Angular application is now aware of possible custom elements. <\/p>\n\t\t

Add the custom <ccb-payment-widget><\/code><\/strong> HTML tag in the app.component.html<\/strong> component template to enable the app to use these elements.<\/p>\n\t\t

There are two ways to add the widget element to your template file:<\/p>\n\t\t

Standard HTML Element<\/strong><\/p>\n\t\t<div>\n<ccb-payment-widget><\/ccb-payment-widget>\n<\/div><\/code>\n\t\t

HTML Element with Self-closing Tags<\/strong><\/p>\n\t\t<div>\n<ccb-payment-widget \/>\n<\/div><\/code>\n\t\t

The Angular application can now consume the widget but lacks the required configuration.<\/p>\n\t\t

To initialize the widget, define the required parameters and their values in the app.component.ts<\/em> file so they can be used in the app.component.html<\/em> template.\n\t\t

Attributes<\/h4>\n\t
\n
Required<\/a>Optional<\/a><\/div>\n
\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PARAMETER<\/th>\n <\/th>\n <\/tr>\n <\/thead>\n
apiKey<\/strong><\/td>\n string<\/td>\n <\/tr>\n
A valid OAuth token generated using the merchant application ID and the secret key asigned to the client account involved in the transaction.<\/td>\n <\/tr>\n
clientAccount<\/strong><\/td>\n string<\/td>\n <\/tr>\n
Merchant account number.
The value must be in the range between 900000<\/strong> and 999999<\/strong>.<\/td>\n <\/tr>\n
subAccount<\/strong><\/td>\n string<\/td>\n <\/tr>\n
Merchant subaccount number.
The value must be in the range between 0<\/strong> and 9999<\/strong>.<\/td>\n 		<\/td>\n <\/tr>\n
currency<\/strong><\/td>\n string<\/td>\n <\/tr>\n
Currency used for this transaction.
Accepted values: USD<\/strong> \/ GBP<\/strong> \/ EUR<\/strong> \/ CAD<\/strong> \/ AUD<\/strong> \/ JPY<\/strong><\/td>\n <\/tr>\n
initialPrice<\/strong><\/td>\n string<\/td>\n <\/tr>\n
This is the initial transaction price.
Formatted as a float value up to 2 decimal points, e.g., 5.00<\/strong><\/td>\n <\/tr>\n
initialPeriod<\/strong><\/td>\n string<\/td>\n <\/tr>\n
The length (in days) of the initial billing.
Formatted as an integer value, e.g., 5<\/strong>
NOTE:<\/strong> Set to 0<\/strong> in case of a single and non-recurring transaction.<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/figure>\n \n <\/div>\n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PARAMETER<\/th>\n <\/th>\n <\/tr>\n <\/thead>\n
language<\/strong><\/td>\n string<\/td>\n <\/tr>\n
The language the widget will be rendered in.
Accepted values: en<\/strong> \/ es<\/strong> \/ fr<\/strong> \/ de<\/strong> \/ it<\/strong> \/ ja<\/strong> \/ ko<\/strong> \/ zh_tw<\/strong> \/ zh_cn<\/strong> \/ pt_br<\/strong> \/ hi<\/strong> \/ sv<\/strong> \/ da<\/strong> \/ no<\/strong> \/ nl<\/strong>

NOTE:<\/strong> If the language is not supplied or the supplied language is not supported, the widget will try to determine the language from the browser. If that language is not supported, it will default to English<\/strong>.<\/td>\n <\/tr>\n
theme<\/strong><\/td>\n string<\/td>\n <\/tr>\n
The theme the widget will be loaded in.
Accepted values are ccb-light<\/strong> and ccb-dark<\/strong>

NOTE:<\/strong> If the value is not supplied or is invalid, the system will default to ccb-light<\/strong>.
Custom themes are possible; please refer to the theming documentation.<\/td>\n <\/tr>\n
description<\/strong><\/td>\n string<\/td>\n <\/tr>\n
Optional product description to show in the widget.
Up to 500 characters (no HTML\/images allowed).<\/td>\n 		<\/td>\n <\/tr>\n
lifeTimeSubscription<\/strong><\/strong><\/td>\n string<\/td>\n <\/tr>\n
Indicates whether the transaction is a lifetime subscription or not.
Formatted as boolean value 1<\/strong> or 0<\/strong><\/td>\n <\/tr>\n
rebills<\/strong><\/td>\n string<\/td>\n <\/tr>\n
Represents a recurring transaction, rebilling the consumer X times according to the value set.
Formatted as an integer value 1<\/strong> to 99<\/strong> (\"99\" being indefinite).

NOTE:<\/strong> When rebills is provided recurringPrice<\/strong> and recurringPeriod<\/strong> become required fields<\/td>\n <\/tr>\n
recurringPrice<\/strong><\/td>\n string<\/td>\n <\/tr>\n
The recurring price in case of a recurring transaction.
Formatted as a float value up to 2 decimal points, e.g., 5.00<\/strong>
It is a required parameter for recurring transactions.<\/td>\n <\/tr>\n
recurringPeriod<\/strong><\/td>\n string<\/td>\n <\/tr>\n
The recurring period in case of a recurring transaction.
Formatted as an integer value, e.g., 5<\/strong><\/td>\n 		<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/figure>\n \n <\/div>\n \n <\/div>\n <\/div>\n\t\t

To provide these values to the widget, add the appropriate attributes to the widget tag in the app.component.html<\/code><\/strong> template.<\/p>\n\t\t

\n
Valid<\/a>Invalid<\/a><\/div>\n
\n \n
\n \n

If all the passed parameters are correct, the following screen appears:<\/p>\n \n

\n
\"A<\/figure><\/div>\n <\/div>\n \n \n
\n \n

In case of a misconfiguration or if one of the values passed in is not valid, the following screen is displayed:<\/p>\n \n

\n
\"CCBill<\/figure><\/div>\n <\/div>\n \n <\/div>\n <\/div>\n\t<\/article>\n\t
\n\t\t

3.<\/span> Create Payment Token<\/h3>\n\t\t

Pressing the Place your order<\/strong> button generates a payment token, which passes into the application as a CustomEvent<\/code><\/strong>.<\/p>\n\t\t

To get the data from the widget and use it in an application, add an event listener for a custom event called tokenCreated<\/code><\/strong>, which will give you data in the detail<\/code>s<\/strong> property. <\/p>\n\t\t

\"CCBill<\/figure>\n\t\t

When the event is caught, the onGenerateTokenId<\/code><\/strong> method is called with data as input, and you can use the payment token.<\/p>\n\t\t

Creating a charge with this payment token will require adding the customer's IP address as an additional payload (ipAddress<\/code><\/strong>) or header (X-Origin-IP<\/strong>) parameter.<\/p>\n\t<\/article>\n\t

\n\t\t

4.<\/span> Customize CSS (Optional)<\/h3>\n\t\t

Customize the appearance of the CCBill API Payment Widget through a preset Theme or with CSS variables to modify its appearance. <\/p>\n\t\t

With CSS variables, the widget easily adapts to match the look and feel of a website. This guide will walk you through the customization process, including preset dark and light themes.<\/p>\n\t\t

Setting the Viewport Meta Tag<\/h4>\n\t\t

The viewport<\/code><\/strong> meta tag sets the initial viewport properties for a web page. It helps control how the web page displays on various devices, ensuring the content fits and scales appropriately. <\/p>\n\t\t

This is crucial for responsive web design and providing a good user experience on different screen sizes and orientations.<\/p>\n\t\t

You can set up the correct <meta><\/code><\/strong> tag for viewports in the header of the main index.html<\/em> file.<\/p>\n\t\t

Preset Dark and Light Themes<\/h4>\n\t\t

The dark or light themes are standard themes with which the widget is shipped. These themes are ready to use as-is without any additional customization. <\/p>\n\t\t

Define the constant and its value in the app.component.ts<\/em> file using ccb-dark<\/code><\/strong> or ccb-light<\/code><\/strong> as values.

Add the theme<\/code><\/strong> widget attribute to pass the information to the widget.<\/p>\n\t\t

Available CSS Variables<\/h4>\n\t\t

To customize the theme further you must link your CSS stylesheet in the index.html<\/em> file.<\/p>\n\t\t

You can customize various aspects of the widget using the following CSS variables:<\/p>\n\t\t

\n
Base Template Color<\/a>Element Template Colors<\/a>Validation Input Fields<\/a><\/div>\n
\n \n
\n \n
\n \n \n \n \n \n
Element<\/strong><\/th>\n Variable<\/strong><\/th>\n <\/tr>\n <\/thead>\n
Widget Background<\/td>\n --ccb-background<\/code><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/figure>\n \n <\/div>\n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Element<\/strong><\/th>\n Variable<\/strong><\/th>\n <\/tr>\n <\/thead>\n
Ribbon - Language Dropdown<\/strong><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-ribbon-background<\/code><\/td>\n <\/tr>\n
List - Background<\/td>\n --ccb-language-dropdown-background<\/code><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-language-dropdown-text<\/code><\/td>\n <\/tr>\n
Icon - Chevron<\/td>\n --ccb-language-dropdown-icon<\/code><\/td>\n <\/tr>\n
Header - Price \/ Product Description<\/strong><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-header-background<\/code><\/td>\n <\/tr>\n
Section Divider - Border<\/td>\n --ccb-section-divider-border<\/code><\/td>\n <\/tr>\n
Price - Text<\/td>\n --ccb-header-price-text<\/code><\/td>\n <\/tr>\n
Description - Text<\/td>\n --ccb-header-description-text<\/code><\/td>\n <\/tr>\n
Header - Currency Code - Text<\/td>\n --ccb-header-currency-code-text<\/code><\/td>\n <\/tr>\n
Section Headers<\/strong><\/td>\n <\/tr>\n
Header Text<\/td>\n --ccb-section-header<\/code><\/td>\n <\/tr>\n
Input Field and Dropdown<\/strong><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-input-field-background<\/code><\/td>\n <\/tr>\n
Placeholder Text<\/td>\n --ccb-input-field-placeholder<\/code><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-input-field-text<\/code><\/td>\n <\/tr>\n
Border<\/td>\n --ccb-input-field-border<\/code><\/td>\n <\/tr>\n
Border - In Focus<\/td>\n --ccb-input-field-border-infocus<\/code><\/td>\n <\/tr>\n
Dropdown Country - Divider<\/td>\n --ccb-country-dropdown-divider<\/code><\/td>\n <\/tr>\n
Dropdown Language - Background<\/td>\n --ccb-language-dropdown-background<\/code><\/td>\n <\/tr>\n
Links<\/strong><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-link<\/code><\/td>\n <\/tr>\n
Text - Hover<\/td>\n --ccb-link-hover<\/code><\/td>\n <\/tr>\n
Text - Visited<\/td>\n --ccb-link-visited<\/code><\/td>\n <\/tr>\n
Terms & Conditions<\/strong><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-terms-and-conditions-text<\/code><\/td>\n <\/tr>\n
Call to Action - Place your Order Button<\/strong><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-cta-background<\/code><\/td>\n <\/tr>\n
Background - Hover<\/td>\n --ccb-cta-background-hover<\/code><\/td>\n <\/tr>\n
Background - Action<\/td>\n --ccb-cta-background-action<\/code><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-cta-text-color<\/code><\/td>\n <\/tr>\n
Text - Hover<\/td>\n --ccb-cta-text-color-hover<\/code><\/td>\n <\/tr>\n
Footer<\/strong><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-footer-background<\/code><\/td>\n <\/tr>\n
Text<\/td>\n --ccb-footer-text<\/code><\/td>\n <\/tr>\n
<\/td>\n <\/td>\n <\/tr>\n
Border<\/td>\n --ccb-validation-border<\/code><\/td>\n <\/tr>\n
Input Field Text<\/td>\n --ccb-validation-text<\/code><\/td>\n <\/tr>\n
Error Message Text<\/td>\n --ccb-validation-error-text<\/code><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-validation-background<\/code><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/figure>\n \n <\/div>\n \n \n
\n \n
\n \n \n \n \n \n \n \n \n
Element<\/strong><\/th>\n Variable<\/strong><\/th>\n <\/tr>\n <\/thead>\n
Border<\/td>\n --ccb-validation-border<\/code><\/code><\/td>\n <\/tr>\n
Input Field Text<\/td>\n --ccb-validation-text<\/code><\/td>\n <\/tr>\n
Error Message Text<\/td>\n --ccb-validation-error-text<\/code><\/td>\n <\/tr>\n
Background<\/td>\n --ccb-validation-background<\/code><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/figure>\n \n <\/div>\n \n <\/div>\n <\/div>\n\t\t

Feel free to modify these variables according to your website's color scheme and design preferences. Experiment with different values to achieve the desired look for your payment widget.<\/p>\n\t<\/article>\n<\/div>\n<\/div>\n\n\n\n

\n
\n\t
\n\t\tIndex.html<\/span>\n\t\tapp.module.ts<\/span>\n\t\tapp.component.ts<\/span>\n\t\tapp.component.html<\/span>\n\t\tstyle.css<\/span>\n\t<\/div>\n\t
\n\t\t
\n\t\t
\n<!DOCTYPE html>\n\t<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" \/>\n\t\t<title>DemoAngularMerchant<\/title>\n\t\t<base href=\"\/\" \/><\/code>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"\/><\/code><\/div>\n\t<link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\" \/><\/code>
\n<link rel=\"stylesheet\" href=\"styles.css\"\/> <\/code><\/div>\n\t
<script src=\"https:\/\/js.ccbill.com\/payment-widget\/v1\/index.js\"><\/script><\/code><\/div><\/head>  \n\t<body>\n\t<app-root><\/app-root>\n\t<\/body>\n<\/html>\n\t\t<\/code><\/pre>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t# When custom elements schema\n\n\timport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular\/core";\n\timport { BrowserModule } from "@angular\/platform-browser";\n\n\timport { AppComponent } from ".\/app.component";<\/code>\n\t
\n\t\n\t@NgModule({\n\t  declarations: [AppComponent],\n\t  imports: [BrowserModule],\n\t  bootstrap: [AppComponent],\n\t  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n\t})<\/code>\n\t<\/div>\n\texport class AppModule {}\n\n\t# When using a standalone components\n\n\timport { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular\/core";<\/code>\n\t
\n\t\n\t@Component({\n\t  selector: "app-root",\n\t  standalone: true,\n\t  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n\t  template: `<h2>Root Component<\/h2>`,\n\t})<\/code>\n\t<\/div>\n\texport class AppComponent {}\n\t<\/code>\n\t<\/pre>\n\t\t<\/div>\n\t\t
\n\t\t
\n\t\timport {Component} from '@angular\/core';\ninterface PaymentToken {\n  paymentTokenId: string;\n  programParticipationId: string;\n  originalPaymentTokenId: string;\n  clientAccnum: number;\n  clientSubacc: number;\n  createdDatetime: Date;\n  timeToLive: number;\n  validNumberOfUse: number;\n  subscriptionId: string;\n  paymentInfoId: string;\n  errors: {};\n}<\/code>\n
\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.scss'],\n})\nexport class AppComponent {\n  paymentToken!: PaymentToken;\n\n  apiKey = 'YOUR_API_KEY';\n  currency = 'USD';\n  clientAccount = '900000';\n  subAccount = '0';\n  initialPrice = '0.00';\n  initialPeriod = '0';<\/code>\n  <\/div>\n  \/\/ Set theme value here<\/code>\n  
\n  theme = \"ccb-dark\";\n  <\/code>\n  <\/div>\n  
\n  \n onGenerateTokenId(event: Event) {\n    this.paymentToken = (event as CustomEvent).detail\n      .paymentToken as PaymentToken;\n  }\n}\n<\/code>\n<\/div>\n<\/pre>\n\t\t<\/div>\n\t\t
\n\t\t
\n<div *ngIf=\"paymentToken\">\n  <h2>Payment Token Generated<\/h2>\n  <pre>{{ paymentToken | json }}<\/pre>\n<\/div><\/code>
<ccb-payment-widget<\/code><\/div>\n
\n  [apiKey]=\"apiKey\"\n  [currency]=\"currency\"\n  [clientAccount]=\"clientAccount\"\n  [subAccount]=\"subAccount\"\n  [initialPrice]=\"initialPrice\"\n  [initialPeriod]=\"initialPeriod\"\n  (tokenCreated)=\"onGenerateTokenId($event)\"<\/code><\/div>\n\/><\/code>\n<\/code><\/pre><\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\thtml {\n  \/* Custom - Background *\/\n  --ccb-background: #280F50;\n\n  \/* Custom - Header - Ribbon *\/\n  --ccb-ribbon-background: #62389E;\n  --ccb-header-language-dropdown-text: #ffffff;\n  --ccb-header-language-dropdown-icon: #ffffff;\n  --ccb-header-language-background: #62389E;\n\n  \/* Add more customizations here *\/\n}<\/code><\/div><\/pre>\n\t\t<\/div>\n\t\t<\/div><\/div>\n<\/div>\n<\/div>\n","protected":false},"author":4,"featured_media":0,"template":"","meta":{"_acf_changed":false,"kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":""},"backend":[],"frontend":[70],"class_list":["post-9014","tjspw","type-tjspw","status-publish","hentry","frontend-angular"],"acf":[],"yoast_head":"\nAngular - CCBill Doc<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ccbill.com\/doc\/tjspw\/angular\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular - CCBill Doc\" \/>\n<meta property=\"og:description\" content=\"Index.html app.module.ts app.component.ts app.component.html style.css <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" \/> <title>DemoAngularMerchant<\/title> <base...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ccbill.com\/doc\/tjspw\/angular\" \/>\n<meta property=\"og:site_name\" content=\"CCBill Doc\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-04T13:29:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ccbill.com\/doc\/tjspw\/angular\",\"url\":\"https:\/\/ccbill.com\/doc\/tjspw\/angular\",\"name\":\"Angular - CCBill Doc\",\"isPartOf\":{\"@id\":\"https:\/\/ccbill.com\/doc\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png\",\"datePublished\":\"2024-06-10T12:18:52+00:00\",\"dateModified\":\"2024-10-04T13:29:13+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ccbill.com\/doc\/tjspw\/angular\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage\",\"url\":\"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png\",\"contentUrl\":\"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ccbill.com\/doc\/#website\",\"url\":\"https:\/\/ccbill.com\/doc\/\",\"name\":\"CCBill Doc\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ccbill.com\/doc\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular - CCBill Doc","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ccbill.com\/doc\/tjspw\/angular","og_locale":"en_US","og_type":"article","og_title":"Angular - CCBill Doc","og_description":"Index.html app.module.ts app.component.ts app.component.html style.css <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\" \/> <title>DemoAngularMerchant<\/title> <base...","og_url":"https:\/\/ccbill.com\/doc\/tjspw\/angular","og_site_name":"CCBill Doc","article_modified_time":"2024-10-04T13:29:13+00:00","og_image":[{"url":"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ccbill.com\/doc\/tjspw\/angular","url":"https:\/\/ccbill.com\/doc\/tjspw\/angular","name":"Angular - CCBill Doc","isPartOf":{"@id":"https:\/\/ccbill.com\/doc\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage"},"image":{"@id":"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage"},"thumbnailUrl":"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png","datePublished":"2024-06-10T12:18:52+00:00","dateModified":"2024-10-04T13:29:13+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ccbill.com\/doc\/tjspw\/angular"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ccbill.com\/doc\/tjspw\/angular#primaryimage","url":"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png","contentUrl":"https:\/\/dev2.cwie.net\/doc\/wp-content\/uploads\/2023\/11\/ccbill-payment-widget-api.png"},{"@type":"WebSite","@id":"https:\/\/ccbill.com\/doc\/#website","url":"https:\/\/ccbill.com\/doc\/","name":"CCBill Doc","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ccbill.com\/doc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/tjspw\/9014"}],"collection":[{"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/tjspw"}],"about":[{"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/types\/tjspw"}],"author":[{"embeddable":true,"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/media?parent=9014"}],"wp:term":[{"taxonomy":"backend","embeddable":true,"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/backend?post=9014"},{"taxonomy":"frontend","embeddable":true,"href":"https:\/\/ccbill.com\/doc\/wp-json\/wp\/v2\/frontend?post=9014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}