Use Payment Links as an embedded button
Tags: stripe, paymentlinks, lowcode, javascript
Published: 2023-03-01 18:19:00

---
title: Use Payment Links as an embedded button
published: true
description: Learn how to use Stripe Payment Links as customizable embedded buttons on your website.
tags: stripe, paymentlinks, lowcode, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbd1eq1x4m5lqzmepwgv.png
---

We recently released a new way to use [Stripe Payment Links](https://stripe.com/payments/payment-links) on your website. You can now easily turn them into customizable [embedded buttons](https://stripe.com/docs/payment-links/share#embed-button) using the Dashboard, generating a custom piece of code that you can add to your codebase so you can sell your products online with minimal effort. 

## Creating the Buy button

In the [Stripe Dashboard](https://dashboard.stripe.com/), select a product you have generated a Payment Link for. Under the Pricing section, click on the “View payment link” button to be redirected to the details page.

![Screenshot of the pricing section on the payment link's details page showing the "View payment link" button.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19mmcmwxoeger0i0bwnp.png)

You’ll then click on “Buy button,” which is located to the right of the payment link.

![Screenshot of the payment link's details page showing the "Buy button"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09adzeuwseau1zbn66i8.png)

A panel will appear on the right to let you customize your button’s appearance and content.

![Screenshot of the Buy button panel with the generated code sample and fields that can be edited to update the look and feel.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54q2oybug4k1m3qxckok.png)

## Embedding the button

When your button is ready, copy the code sample provided and paste it into the part of your codebase responsible for rendering the UI where you’d like the button to be displayed.
You will notice that the button is made of a script tag that imports a JavaScript library dedicated to handling how these buttons work, in addition to a custom `<stripe-buy-button>` tag with a button ID and your publishable key as attributes.

```html
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<stripe-buy-button
 buy-button-id="buy_btn_1MgEyoDNsVQ3fzInaHTBBhYR"
 publishable-key="pk_test_51ABC" // replace with your publishable key
>
</stripe-buy-button>
```

The code sample above works well to display a button that sells a single product. However, if you want to use a Buy button for multiple products and your UI is built using a component-based front-end framework such as React, you will have to adapt this code sample to be more dynamic.
For example, if you are rendering a list of your products and you want to display a Buy button for each product using a reusable custom component, you could adapt the code sample to something like this:

```js
export default function App() {
// The list of your Buy button IDs
 const buttonIds = [
   "buy_btn_123ABC",
   "buy_btn_234DEF",
   "buy_btn_567GHI"
 ]
// The component to display the button that receives a single button ID as parameter
 const BuyButtonComponent = (buttonId) => {
   return (
     <stripe-buy-button
       buy-button-id={buttonId}
  publishable-key="pk_test_51ABC" // replace with your publishable key
     >
     </stripe-buy-button>
   );
 }
// Loop through the IDs and display a button for each product
 return (
   <>
   {buttonIds.map(b => BuyButtonComponent(b))}
   </>
 );
}
```

If you are building your website using this component-based approach, you will need to add the script tag separately in the `head` tag of your main HTML file.
That’s it. No additional change is necessary to start using this feature.

## Conclusion

Using Buy buttons can simplify the implementation of Stripe Payment Links into your website by providing a short auto-generated code sample that you can copy and paste into your codebase and display buttons that are customized to your brand’s look and feel.

We hope you’ll share how you’re planning to use them. 

You can also follow Stripe developer updates on the following platforms:
📣 Follow [@StripeDev](https://twitter.com/stripedev) and [our team](https://twitter.com/i/lists/1459720002567868418) on [Twitter](https://twitter.com/StripeDev)
📺 Subscribe to our [YouTube channel](https://www.youtube.com/StripeDevelopers)
💬 Join the official [Discord server](https://discord.com/invite/RuJnSBXrQn)
📧 Sign up for the [Dev Digest](https://go.stripe.global/dev-digest)


## About the author

![Charlie's profile picture. She is a caucasian woman with long brown hair, wearing glasses. She is standing in front of a white wall with purple lights.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pn6ccfoqvg7a18a9pev.png)

[Charlie Gerard](https://twitter.com/@devdevcharlie) is a developer advocate at Stripe, a [published author](https://www.amazon.com/Practical-Machine-Learning-JavaScript-TensorFlow-js/dp/1484264177) and a [creative technologist](https://charliegerard.dev/). She loves researching and [experimenting with technologies](https://charliegerard.dev/). When she’s not coding, she enjoys spending time outdoors, reading, and setting random challenges for herself.