Gift cards
Usage
-
Initialize the Square Payments object
Initialize the Square Payments object with your application ID and the ID of the seller location where the payment is taken.
const payments = Square.payments(APPLICATION_ID, LOCATION_ID); -
Create a GiftCard object
const giftCard = await payments.giftCard();This creates a new GiftCard instance with all of the behaviors and properties needed to take a Gift Card payment.
-
Attach the GiftCard object to your page
Attach the GiftCard object to an empty DOM element on your page. The Gift Card form renders into the empty element, turning it into a secure gift card form.
await giftCard.attach('#gift-card'); -
Get the one-time payment token from the GiftCard object
Get the payment token from the
GiftCardobject when the buyer completes the form by calling the tokenize method.this.elements.token.value = await giftCard.tokenize();If the Gift Card information is valid, it returns a one-time use token to make a call to the Payments API CreatePayment endpoint to charge a customer. Otherwise, it will return an error that you can present to the customer.
<!-- Provide a target element for the Card form -->
<form>
<div id="gift-card-container"></div>
<button id="gift-card-button" type="button">Pay with Gift Card</button>
</form>
<!-- Configure the Web Payments SDK and Gift Card payment method -->
<script type="text/javascript">
async function main() {
const payments = Square.payments(APPLICATION_ID, LOCATION_ID);
const giftCard = await payments.giftCard();
await giftCard.attach('#gift-card');
async function eventHandler(event) {
event.preventDefault();
try {
const result = await giftCard.tokenize();
if (result.status === 'OK') {
console.log(`Payment token is ${result.token}`);
}
} catch (e) {
console.error(e);
}
};
const giftCardButton = document.getElementById('gift-card-button');
giftCardButton.addEventListener('submit', eventHandler);
}
main();
</script>
#
Payments
Returned by Square.payments(appId, locationId).
Use this object to instantiate Payment methods. Learn more on the Payments page.
Methods
const payments = Square.payments(appId, locationId);#
GiftCard
An object with the methods to create and set up a Gift Cards payment.
Created by calling the payments.giftCard() method.
Methods
const payments = Square.payments(appId, locationId);
const giftCard = await payments.giftCard();
await giftCard.attach('#gift-card');
const form = document.querySelector('#gift-card-payment');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const result = await giftCard.tokenize(); // the gift card nonce
});