This guide will explain how you can utilize your own domain to collect customer details and collect payments through a striped down payment element.
1.1. What is a Payment Widget?
1.2. How to Use a Payment Widget
Type 1: Hosted Payment Page (HPP) Payment Widget for Self Checkout
Type 2: Shopping Cart Payment Widget for Self Checkout
Type 4: Public Payment Method Page Widget to Collect Payment Details for Future Payments
What is a Payment Element/Widget?
A payment element is a UI component for the web that can accept payments through multiple (enabled) payment methods. It is the widget at the end of a typical checkout form that can also be used alone or with other elements in your web app’s frontend.
Collect billing, shipping and contact details from your customers through your storefront on Shopify, WooCommerce, WordPress or any domain and simply embed the payment element into a button on your website in the final step.
Your customer’s billing, shipping and account details are passed on as URLs parameters from your website checkout form with only the payment element visible to your end consumer. Customers can simply enter their payment details into this widget and complete their purchase.
How to Use a Payment Widget
Step 1: Locating the Checkout URL
- From your dashboard click on ‘Products’ in the navigation bar on the left.
- Select the product whose checkout you want to set up through a payment element. Let's select a CloudAppFlow product as an example.
- Locate the ‘Web Checkout’ button on the top right of the plan associated with this product.
- The URL displayed here can be linked to any button on your website to open up the default checkout created for each product plan at the time of its creation.
Step 2: Enabling the Payment Element View
- Next, assign all relevant URL parameters to this base URL to pass any relevant information from the website checkout form to the payment widget. Learn about what information is passed by which URL parameters through this checkout URL parameters guide. Some typical checkout URL parameters are listed as follows:
Input Field Title | Parameters |
Account Information Section | |
First Name | ai_firstName |
Last Name | ai_lastName |
ai_email | |
Billing Details |
|
Country | ai_billing_country |
Address Line 1 | ai_billing_address1 |
Address Line 2 | ai_billing_address2 |
State | ai_billing_state |
City | ai_billing_city |
Zip | ai_billing_zip |
Order Summary |
|
Coupon | coupon_code |
Currency | currency |
Hide currency | hide_currency |
Payment Widget | payment_widget |
- To enable the payment widget view that hides the rest of the information being passed, you must set the payment_widget parameter to true i.e. payment_widget=true within your base URL.
- This following checkout form is opened when the the following URL is clicked:
- Now, let’s assign the payment_widget parameter to this checkout URL and set it to ‘true.’
https://demo.subscriptionflow.com/en/hosted-page/subscribe/sample-6c6a-4689-b917-f82710f8e515/product/sample-0628-46e1-8dd6-1e00980fc8a1?&payment_widget=true.
Now only the payment section opens where customers can enter only their payment details and complete a purchase.
- Finally, embed this payment element URL (with relevant URL parameters) into a ‘Buy Now’ button in your website to offer checkout with payment widget.
Payment Widget Implementation
Type 1: Hosted Payment Page (HPP) Payment Widget for Self Checkout
In this implementation, the customer lands on the hosted payment page linked to the specific plan they are purchasing, enters their payment details into the payment widget and completes checkout.
- This is a checkout form on a website. At this stage the customer is still on the organization's storefront where the fields, formatting and look-and-feel is customized to their needs.
- After the customer enters their details, they click on a CTA such as ‘Checkout’ or 'Donate Now' on your website. This summons the payment widget in the form of a hosted payment page.
- The payment widget offers payment methods made available through your default payment gateway. Customers simply enter their card details and complete their order.
Type 2: Shopping Cart Payment Widget for Self Checkout
A payment widget can also be implemented with a shopping cart functionality which differs from hosted payment pages (HPPs) tied to singular plans.
1. Here is a dummy storefront on Shopify. Customers can add a product into their cart.
2. They can then click on view my cart.
3. When they click the ‘Subscribe Now’ button they are redirected to checkout linked to this shopping cart.
4. If this checkout URL has the relevant payment widget parameter enabled i.e. set to true, the checkout is initiated through a standalone payment widget. Customers may enter payment details and complete their purchase.
And that’s how you can set up a payment element and embed it into a button on your own website both through a hosted payment page and a CommerceFlow shopping cart.
Type 3: Invoice Payment Widget to Collect Customer Payment Details to Pay an Invoice for a new Subscription
The third implementation is when the client creates a subscription for a customer and then sends them an invoice payment widget to complete their purchase.
1. Navigate to Invoices > {Your Customer Invoice}. Then click on the hamburger icon and select 'Public Checkout'.
2. This checkout URL corresponds to an invoice checkout page shown below it.
3. By adding the payment_widget parameter at the end and setting it to true, an invoice payment widget can be sent to the customer after subscription creation.
Type 4: Public Payment Method Page Widget to Collect Payment Details for Future Payments
The fourth and final implementation is when the client creates a subscription and sends a payment widget in the form of a public payment page to record the customer's payment details and charge them for future payments due.
1. Go to Customers > {Your Customer Name} > Public Payment Method Page.
2. This opens up a public payment method page where customers can enter their payment details to be charged for future payments.
3. Set the payment_widget parameter to send this in the form of a payment widget as shown below.
And those are the 4 ways you can use a payment widget to collect customer payment details.
Comments
0 comments
Please sign in to leave a comment.