Product Checkout

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 Drop-In Storefront, 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 registration link 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.

Figure 1. Stripe Registration Form.

Figure 2. Stripe API keys.

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.

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)

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 Variant. Controls the Checkout button style, based on the Lightning Design System directives.

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

6. Button Align. Controls the Checkout button alignment.

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

8. 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).

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

Figure 7. Product Checkout One-time charge Blueprint.

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="[e-mail]"
    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="[e-mail]"
    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'
}