Zuora Payment Pages Example is nodejs-express project which demonstrates how to integrate with Zuora Payment Pages 2.0 in customer's web site and in a way compliant with PCI-DSS. This project demonstrates multipe flows that can be integrated based on your requirements.
For more information on Zuora Payment Page 2.0, please refer to the Payment Pages 2.0 on Zuora Knowledge Center. Zuora also strongly reccommends adopting the Security Measures for Payment Pages 2.0 which is built-in.
Node 16 or higher
Install the package with:
npm install Create/Modify the Hosted Page with configurations (Hosted Domain and Callback Path) in Zuora (Settings -> Payments -> Setup Hosted Page)
| Field | Description | example |
|---|---|---|
| Hosted Domain | Set the hosted domain of web page | http://localhost:3000 |
| Callback Path | Set the callback url | /payment_page/callback |
to set HPM configurations. Here are the descriptions of the properties in it:
| Field | Description |
|---|---|
| Authorization | This sample page provides two types of authorization namely Basic Auth and OAuth2 to interact with Zuora. Either of these two can be used to run this sample code. Zuora recomments to configure the oauth2_token |
| username | Zuora username |
| password | Zuora password |
| oauth_token | OAuth Token generated using API: /oauth/token |
| rsa_signature | Zuora's RSA Signature path which is fixed at /v1/rsa-signatures |
| zuora_base_url | Zuora's RSA Signature API end point: For the production environment: https://www.zuora.com, For the API Sandbox environment: https://apisandbox.zuora.com |
| payment_page_url | Zuora's Hosted Page URL, For the Production Environment: https://www.zuora.com/apps/PublicHostedPageLite.do , For the API Sandbox Environment: https://apisandbox.zuora.com/apps/PublicHostedPageLite.do |
| pageId | Page Id of the Hosted Page, it can be retrieved in Zuora application through the following path: (Settings -> Payments -> Setup Hosted Page -> Page List -> Show Page Id) |
| accountId (Optional) | The ID of the customer account present at Zuora's side. Whenever we perform any transaction using this sample code, we can associate it with account Id using this field. |
| publicKey | Public key, it can be retrieved in Zuora application through the following path: (Settings -> Payments -> Setup Hosted Page -> Security Keys -> Get HPM2.0 Key). |
| Example: |
"us_sandbox":{
"username" : "abd",
"password" : "*****",
"oauth_token" : "a8bc1f351e6e43f68fd5e7eb76fcab23",
"rsa_signature": "/v1/rsa-signatures",
"zuora_base_url": "https://rest.apisandbox.zuora.com",
"payment_page_url": "https://apisandbox.zuora.com/apps/PublicHostedPageLite.do",
"pageId": "8ad0877b82126d1c018214b14ff515e1",
"accountId":"40289da98233ea23018233f79044000f",
"publicKey": "*****"
}
Modify the file payment-page-samples/conf/prepopulate.json to set the values for pre-populating fields in HPM page.
npm start
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent