How to Create a Payment Button

How to create a Payment Button

Create the button from your FiatPe dashboard in three guided stages. Keep the preview open while configuring it so you can confirm how the purchase action will appear to customers before publishing.

STEP 1

Enter the basic details

Select the store that will own the button, then configure the product and purchase action.

1. Choose the Store.
2. Enter a customer-facing Button title.
3. Set the Button label, such as Pay Now or Buy Now.
4. Enter the product Amount.
5. Choose unlimited stock or enter the available quantity.

STEP 2

Configure customer and order fields

Email and phone number are available as core contact fields. Add more fields for the information required to process or fulfil the order.

1. Select Add field.
2. Choose the field type and enter a clear label.
3. Decide whether the field is required or optional.
4. Add a description when customers need guidance.
5. Reorder, duplicate, or remove custom fields as needed.

STEP 3

Preview, test, and publish

Review the final configuration and run the checkout in Test mode. When everything is correct, publish the button and copy its generated embed code.

1. Confirm the title, amount, label, and customer fields.
2. Select the preview button and complete a Test checkout.
3. Copy the generated script after the button is published.
4. Paste it into your product page or a compatible custom HTML block.

Configure customer and order fields

Email and phone number provide the core contact details. Add custom fields for information such as an attendee name, delivery note, booking reference, size, or other fulfilment detail. Each custom field can have its own label, description, and required or optional state.

Embed the generated script

Paste the exact generated code into the page where the payment action should appear.

<script
  src="https://checkout.fiatpe.com/v1/payment-button.js"
  data-button_id="btn_test_b81f293906d84804"
  async>
</script>

• Place the script once for each button placement.
• Do not change the generated data-button_id.
• Your website or CMS must permit third-party JavaScript embeds.
• The async attribute lets the rest of the page continue loading while the button script downloads.

Customer payment flow