LogoLogo
  • User Guide
    • Getting Started
      • Building a Usage-Based Product in Revenium
      • Setting Up & Using API Analytics & Observability
      • Setting Up & Using Product Analytics
      • Sending Data to Revenium's Metering API
      • Key Concepts & Relationships
    • Connect Your Data
      • cURL Commands for Testing
      • Container-Native Metering
      • Kong
        • Kubernetes Installation
      • Salesforce
        • Revenium Unmanaged Package
          • Anypoint API Experience Hub (AEH)
            • Anypoint API Experience Hub Unmanaged Package Post Installation Instructions
          • Anypoint Community Manager (ACM)
            • Anypoint Community Manager Package Post Installation Instructions
        • Revenium Lightning Web Components
          • Add Components to Experience Cloud site
          • Drop-In Storefront
          • Product Card
          • Product Card (Anypoint)
          • Product Checkout
          • Product Details Button
          • Usage History
          • API Access Requester
      • MuleSoft
        • Metering Policy Configuration
        • Offline Metering Policy Configuration
        • Anypoint API & API Group Synchronization
        • Revenium Connector
        • Disable Default Anypoint Community Manager (ACM) Email Notifications
      • Gravitee
      • Istio
      • Envoy
      • AWS API Gateway
      • Python & Django
      • Golang
      • Spring Boot
      • .Net
      • NodeJs
      • Java/JVM
      • Snowflake
      • Azure API Management
      • IBM
      • Custom Integrations Using Metering Beacons
        • JWT Enrichment
      • Offline Metering via Log Parsing
    • Sources
      • Metering Elements
      • Alerts
        • Alert History
    • API Keys
    • Products & Pricing
      • Product Lines
      • Pricing Rules
        • Revenium Scripting Language
          • RSL Reference
        • Execution Logs
      • SLA Definitions
      • SLA Violation Review
    • Customers
      • Customers
      • Subscribers
      • Subscriptions
      • Subscribers Credentials
      • Subscribers Notifications
    • Billing and Invoicing
      • Manage Refunds
    • Analytics
      • Revenue Analytics
      • Product Analytics
        • Custom Reports (Products)
      • Subscriber Analytics
        • New Subscribers
        • (Daily/Weekly/Monthly) Active Subscribers
        • Most Engaged Subscribers & Customers
        • Historical Usage
      • API Analytics
        • Performance & Availability
        • Compare Periods
        • Traffic by Geography
        • Advanced Search
        • Custom Reports
    • Profile
      • Profile
      • Revenium API Documentation
    • Settings
      • Revenium Users & Organizations
        • Access Permissions by User Type
      • Revenium Subscription
      • Revenium Organizations
      • Notification Templates
      • Transactions Logs
        • Analytics Transaction Log
        • Product Transaction Log
        • Subscription Audit Log
        • No Code Transaction Testing
      • Integrations
        • Data Sync
        • Export Configurations
        • Notification Providers
        • Payment Configurations
          • Customer VAT ID Support
        • ERP Configurations
        • External Integration Logs
        • Identity Providers
      • System Logs
      • Default Configuration Limits
Powered by GitBook

© Revenium - www.revenium.io

On this page
  • 1. Configure your Stripe Account
  • 2. Create a Payment Configuration
  • 3. Component Properties
  • 4. Use component programmatically
  1. User Guide
  2. Connect Your Data
  3. Salesforce
  4. Revenium Lightning Web Components

Product Checkout

Last updated 10 months ago

The Product Checkout Component is designed to display a payment form to buy a Revenium Product (depending on the transaction type). This allows subscribers to set up a subscription or make a one-time payment for access to a given Revenium product.

Note that this same functionality is built into the , which is our recommended method for API commerce, though this component may be used on a standalone basis for specialized use-cases.

1. Configure your Stripe Account

Before you can use the Revenium Product Checkout Component, you need to setup your Stripe credentials.

  1. Create a Stripe account, go to the and fill the required details (Figure 1).

  2. Go to your Stripe Dashboard > Developers > API keys (Figure 2) and save your Publishable and Secret keys, you will need them in the next step.

2. Create a Payment Configuration

  1. Access the Revenium app.

  2. Click on 'Payment Configurations' in the navigation menu (Figure 3).

  3. After clicking on the Payment Configurations Link, the Payment Configurations dashboard appears (Figure 4).

  4. Click on the Payment Configuration create button, located in the upper right corner of the screen (Figure 5).

  5. After clicking on the create button, the Payment Configuration create form appears (Figure 6a, Figure 6b).

  6. The fields available on the "Properties" step are determined by the Payment Provider that was selected. All these fields are required by the chosen provider.

  7. Fill in the required inputs and click on Save to create a new Payment Configuration.

  8. After clicking on the Save button, the changes will be saved.

3. Component Properties

The component properties displayed depend on the Product selected. Look at the component blueprint in the Figure 7 to identify how the properties are displayed in the Product Checkout Component for one-time charge products, if the Product selected has Subscription & Overage as Transaction Type, look at the component blueprint in the Figure 8. Use the following properties to customize the component display:

  1. Record Id. This field returns the current Salesforce Object ID.

  2. Organization. The list of Products displayed in the in the Product combobox depends on the organization selected in this field.

  3. Product. Lists the available Products, select one to make the payment available for this product. The Subscriptions, Sources and table columns shown are based on the Product selected in this field.

  4. Button Label. Label shown in the Checkout button.

  5. Button Align. Controls the Checkout button alignment.

  6. Visualforce Page URL. Fill this field with the Add_Stripe_Payment page URL (you can find it in your Salesforce Organization > Setup > Visualforce pages).

  7. Redirect URL on successful payment. URL to redirect to when a Stripe payment is successful (this will not be used but it's required by Stripe for security reasons).

  8. Organization name. Name of the organization to display in the Stripe terms of service.

4. Use component programmatically

The component can be displayed in two ways, toggled by the show-only-form boolean attribute. When this property is set to false, a button is shown following the configuration attributes, clicking on this button will initiate the payment process. If this property is set to true, the button is not shown and the payment process is started when the component is loaded, displaying the Stripe form. Note that if the Payment Configuration associated with the Product to pay, the show-only-form property is ignored and the address input field will always be shown and should be filled by the subscriber in order to start the payment process. The following attributes are required in order to use the Product Checkout Button programmatically:

  1. selected-organization-id required: organization ID of the product selected.

  2. product-id required: ID of the product to pay.

  3. record-id: a valid GUID to use as external ID.

  4. visualforce-stripe-page-url required: Add_Stripe_Payment page URL.

  5. success-redirect-url required: URL to redirect to when a Stripe payment is successful (this will not be used but it's required by Stripe for security reasons).

  6. show-only-form: toggles the component appearance as explained above.

  7. full-width: boolean property to make the component fill the parent container width.

  8. suscriber-email-address: the Subscription created on a successful payment will be assigned to this email address.

  9. button-variant required only if show-only-form is not set to true: variant of the checkout button, based on SLDS guidelines.

  10. button-label required only if show-only-form is not set to true: label of the checkout button.

  11. button-alignment: valid values are “left”, “center”, or “right”.

  12. organization-name: name of the organization to display in the Stripe terms of service.

  13. cancel-button-color: determines the color of the "Cancel" button in the Payment form, the values should be in RGB string format, i.e. rgb(89, 89, 89).

  14. pay-button-color: determines the color of the "Pay now" button in the Payment form, the values should be in RGB string format, i.e. rgb(89, 89, 89).

When a successful or cancelled payment occurs, the following events will be triggered:

  1. successfulpayment: will be triggered after a successful payment, the event details will contain the payment status, a message and the product paid details.

  2. paymentcancellation: will be triggered after a payment is cancelled, the event details will contain the payment status and a message.

Code example of the programmatically use of the Product Checkout Component:

  <!-- Basic usage case -->
  <hypercurrent-community-product-checkout
    selected-organization-id="abc123"
    product-id="zyx987"
    user-email-address="user@example.com"
    record-id="29c31d09-b098-47ea-ba44-e4c39fbedf89"
    organization-name="Revenium"
    cancel-button-color="rgb(89, 89, 89)"
    pay-button-color="rgb(167,88,162)"
    button-alignment="center"
    button-label="Product Checkout"
    button-variant="brand"
    organization-name="Revenium"
    visualforce-stripe-page-url="https://hypercurrent--hypercurrent.visualforce.com/apex/Add_Stripe_Payment"
    success-redirect-url="https://hypercurrent.builder.salesforce-communities.com/"
    onsuccessfulpayment={handleSuccessfulPayment}
    onpaymentcancellation={handlePaymentCancellation}>
  </hypercurrent-community-product-checkout>

  <!-- show-only-form="true" usage case -->
  <hypercurrent-community-product-checkout
    show-only-form="true"
    selected-organization-id="abc123"
    product-id="zyx987"
    user-email-address="user@example.com"
    record-id="29c31d09-b098-47ea-ba44-e4c39fbedf89"
    organization-name="Revenium"
    cancel-button-color="rgb(89, 89, 89)"
    pay-button-color="rgb(167,88,162)"
    visualforce-stripe-page-url="https://hypercurrent--hypercurrent.visualforce.com/apex/Add_Stripe_Payment"
    success-redirect-url="https://hypercurrent.builder.salesforce-communities.com/"
    onsuccessfulpayment={handleSuccessfulPayment}
    onpaymentcancellation={handlePaymentCancellation}>
  </hypercurrent-community-product-checkout>

Structure of the events triggered by the component:

// Success event
detail: {
  status: 'success',
  message: 'Payment was successful',
  product: {} // Object with the paid product details.
}

// Cancel event
detail: {
  status: 'cancelled',
  message: 'Payment was cancelled'
}

Button Variant. Controls the Checkout button style, based on the .

Lightning Design System directives
Drop-In Storefront
registration link
Figure 1. Stripe Registration Form.
Figure 2. Stripe API keys.
Figure 3. Payment Configurations Link
Figure 4. Payment Configurations Dashboard
Figure 5. Payment Configurations Create Button
Figure 6a. Payment Configurations Create Form (Step 1)
Figure 6b. Payment Configurations Create Form (Step 2)
Figure 7. Product Checkout One-time charge Blueprint.