Tilled.js

/* Example assumptions:
* The card fields have divs defined in the DOM
* <div id="card-number-element"></div>
* <div id="card-expiration-element"></div>
* <div id="card-cvv-element"></div>
* A submit button is defined
* <button id='submit-btn'></button>
*/
const tilled = new Tilled('pk_...', 'acct_...');
const form = await tilled.form({
  payment_method_type: 'card',
});
const fieldOptions = {
  styles: {
    base: {
      fontFamily: 'Helvetica Neue, Arial, sans-serif',
      color: '#304166',
      fontWeight: '400',
      fontSize: '16px',
    },
    invalid: {
      ':hover': {
        textDecoration: 'underline dotted red',
      },
    },
    valid: {
      color: '#00BDA5',
    },
  },
};
form.createField('cardNumber', fieldOptions).inject('#card-number-element');
form.createField('cardExpiry', {...fieldOptions, selector: '#card-expiration-element'});
form.createField('cardCvv', fieldOptions).inject('#card-cvv-element');
await form.build();
const submitButton = document.getElementById('submit-btn');
submitButton.onclick = () => {
  tilled.confirmPayment(paymentIntentClientSecret, {
    payment_method: {
      billing_details: {
        name: 'John Doe',
        address: {
          zip: '80021',
          country: 'US',
        },
      },
    },
  })
  .then((paymentIntent) => {
    if (paymentIntent.status === 'succeeded') {
      alert('Payment successful');
    } else {
      const errMsg = paymentIntent.last_payment_error?.message;
      alert('Payment failed: ' + errMsg);
    }
  })
  .catch((error) => {
    alert('An error occurred: ' + error.message);
  });

/**
* Example assumptions:
* The ach_debit fields have divs defined in the DOM
* <div id="bank-account-number-element"></div>
* <div id="bank-routing-number-element"></div>
*
* A submit button is defined
* <button id='submit-btn'></button>
*/
const tilled = new Tilled('pk_…', 'acct_…');

const form = await tilled.form({
  payment_method_type: 'ach_debit',
});

const fieldOptions = {
  styles: {
    base: {
      fontFamily: 'Helvetica Neue, Arial, sans-serif',
      color: '#304166',
      fontWeight: '400',
      fontSize: '16px',
    },
    invalid: {
      ':hover': {
        textDecoration: 'underline dotted red',
      },
    },
    valid: {
      color: '#00BDA5',
    },
  },
};

form
  .createField('bankAccountNumber', fieldOptions)
  .inject('#bank-account-number-element');
form
  .createField('bankRoutingNumber', fieldOptions)
  .inject('#bank-routing-number-element');

await form.build();

const submitButton = document.getElementById('submit-btn');
submitButton.on('click', () => {
// A payment intent will be created on your backend server and the
// payment_intent.client_secret will be passed to your frontend to
// be used below.
tilled
  .confirmPayment(paymentIntentClientSecret, {
    payment_method: {
      billing_details: {
        name: 'John Doe',
        address: {
          street: '370 Interlocken Blvd',
          city: 'Broomfield',
          state: 'CO',
          zip: '80021',
          country: 'US',
        },
      },
      ach_debit: {
        account_type: 'checking',
        account_holder_name: 'John Doe',
      },
    },
  })
  .then(
    (paymentIntent) => {
      // Be sure to check the `status` and/or `last_payment_error`
      // properties to know if the charge was successful
      if (
        paymentIntent.status === 'succeeded' ||
        paymentIntent.status === 'processing'
      ) {
        alert('Payment successful');
      } else {
        const errMsg = paymentIntent.last_payment_error?.message;
        alert('Payment failed: ' + errMsg);
      }
    },
    (err) => {
      // Typically an error with the request (>400 status code)
    }
  );
});

/**
 * Example assumptions:
 * The paymentRequestButton field has a div defined in the DOM
 * <div id="native-payment-element"></div>
 *
 */
const form = tilled.form({
	payment_method_type: 'card',
});

const paymentRequest = tilled.paymentRequest({
	total: {
		label: 'Tilled tee',
		amount: secretData.amount,
	},
});

const prButton = form.createField('paymentRequestButton', {
	paymentRequest: paymentRequest,
});

paymentRequest.canMakePayment().then((result) => {
	if (result) {
		prButton.inject('#native-payment-element');
	} else {
		document.getElementById('native-payment-element').style.display = 'none';
	}
});

paymentRequest.on('paymentmethod', (ev) => {
	let paymentMethod = ev.paymentMethod;
	tilled
		.confirmPayment(paymentIntentClientSecret, {
			payment_method: paymentMethod.id,
		})
		.then(
			(paymentIntent) => {
				// The payment intent confirmation occurred, but the
				// actual charge may still have failed. Check
				if (
					paymentIntent.status === 'succeeded' ||
					paymentIntent.status === 'processing'
				) {
					ev.complete('success');
					alert('Successul payment');
				} else {
					ev.complete('fail');
					const errMsg = paymentIntent.last_payment_error?.message;
					alert('Payment failed: ' + errMsg);
				}
			},
			(err) => {
				ev.complete('fail');
			}
		);
});