The Gift Card payment method via Mollie and PayNL allows for additional customization to its button; above that which is already available via the style object.
This means that you can provide your customers with a gift card experience that matches your branding 🎉
<aside> 🎨 If you want to know more about customizing Universal Checkout’s styling, take a look at the Web SDK’s customization guide.
</aside>
The giftCard object should be provided to the checkout and be configured according to your preferences. Below is an example of a giftCard configuration and the resulting buttons:
primer.showUniversalCheckout({
...
giftCard: {
logoSrc: "<https://dummyimage.com/120X50/ffffff/ffffff.png>", // The link to the logo which should be displayed
background: "#ff8c78", // The button background color in HEX or RGB
logoAlt: 'Gift card button', // Optional logoAlt which improves accessibility
text: 'My text', // Optional text to display next to the logo
}
...
});
Button with logoSrc and text
Button logoSrc without text
<aside> 📋 Feel free to copy the snippet above and to try it out! Your gift card button should look like one of the buttons displayed above.
</aside>
We recommend supplying logoSrc with a link to a logo which has been created to fit an aspect ratio of 2.4:1 . The SDK will be using the logoSrc to populate the src attribute that belongs to the img element defined in the button.
If no logoSrc is provided or if the link is bad, no image will be displayed on the button.
If no background is provided, no default color will be assigned to the background and the button will be transparent.
If no giftCard option is provided to the checkout, a default styling will be applied to the gift card button:
