Integrate Payment Gateway in Power Pages

Introduction

In today's online world, it's really important for businesses that sell things or offer services online to have a smooth way for people to pay them. Power Pages is a well-liked tool for making websites because it's easy to use and helps you make websites fast. But if you want to use it for online shopping or selling stuff, you need to add a way for people to pay you. This article will show you how to do that, so you can take payments on your Power Pages website.

Use Cases

Adding a payment gateway to Power Pages can bring lots of benefits for different types of businesses:

1. Online shops: If you sell things online, adding a payment gateway lets customers buy directly from your website, making shopping easier.
2. Service providers: People who offer services like advice, coaching, or freelance work can get paid online, which makes it simpler for clients.
3. Donation pages: Charities and non-profits can collect donations smoothly through their Power Pages websites, making it easier for people to give money for good causes.
4. Event Sign-ups: Businesses that organize events or workshops can let people sign up and pay for tickets online, making the whole process of registering simpler.

Step-by-step process to integrate payment gateway

Step 1. For this article, we will use 'Stripe' as our payment gateway. Go to STRIPE and create an account for yourself. Navigate to the developer's page and copy Publishable and Secret keys under API keys as shown below.

Step 2. Create a Power Pages Site or use an existing one. Click on the edit button as shown below.

Step 3. Add a blank payment page on the site created in Step 2 as shown below.

Step 4. Click on the 'Set up' tab on the left navigation. Go to External apps -> Install 'Stripe' integration -> Click on manage.

Step 5. A new pop-up will appear. Paste the Publishable and Secret keys copied in Step 1 and save.

Step 6. Go to Data Tab -> Click on New Table -> Create a table with the name 'Payment' -> Click on Primary Column.

Step 7. Under Primary Column -> Update column name to Payment Number -> Set column requirement Business Recommended-> Click on save as shown below.

Step 8. In the Payments table, make the following changes

• Change the datatype of Payment Number: Auto Number
• Create a new column Amount with datatype: Currency
• Create a new column Customer Name with datatype: Text as shown in the image below.
  

Step 9. Now edit the 'Information' form in the payment table. Update the form as shown below.

Step 10. Create a new form named 'Payment' and update the form as shown below.

Publish all the changes and come back to the payment page.

Step 11. On the payment page, select the Multistep form as shown below.

Step 12. Provide the form name and click on done.

Step 13. Now click on Add Step as shown below.

Step 14. Update details in step 1 as shown below and click ok.

Step 15. Now add another step update details as shown below and click ok.

Step 16. Now sync the changes on the power pages site. After syncing is complete, click on step settings for Step 2 and update details as shown below.

Step 17. After the above changes are made, the form will look as shown below.

Step 18. Now restart the power page's site before opening it in real time.

Step 19. Open Power Pages Site -> Go to the payments page -> Fill in the details as shown below and click next.

Step 20. On the Payment Page, fill in the credit card details and click on Pay Now.

Step 21. The user will get a success message as shown in the image below.

Conclusion

Adding a payment gateway to Power Pages helps businesses take online payments, creating new chances for selling things and making money. By following this article, you can easily set up a payment system on your Power Pages site. Whether you're selling items, providing services, collecting donations, or managing event sign-ups, integrating a payment gateway improves your website's features and makes it more professional. Please feel free to reach out in case of any concerns.