Will a feature be implemented faster if a copy/paste documentation here?

(Sam D) #1

Hehe I know it will take longer then that but I was just repeating what I read on blogs that said it would take only 1 minute. But for you who is more of an expert I don’t think it would take long.

Add apple pay button to product page and checkout.

#Step 1: Add an Apple Pay button to your site

Start by adding a button to the HTML on your product page. Safari now ships with built-in Apple Pay images; you can use them with Safari’s -webkit-named-image feature. This button should be hidden by default.

product.html

<style> #apple-pay-button { display: none; background-color: black; background-image: -webkit-named-image(apple-pay-logo-white); background-size: 100% 100%; background-origin: content-box; background-repeat: no-repeat; width: 100%; height: 44px; padding: 10px 0; border-radius: 10px; } </style> <button id="apple-pay-button"></button>

(You can, of course, build and style this input however you like; the above snippet renders a black Apple Pay button identical to the one in the demo above.)
Next, ensure Stripe.js is included on your page.

product.html
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

After you set your publishable key, you can use the checkAvailability function to determine whether or not to show an Apple Pay button.

product.js
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

Stripe.applePay.checkAvailability(function(available) { if (available) { document.getElementById('apple-pay-button').style.display = 'block'; } });

Note that this function executes asynchronously; you must pass it a callback function. When using the Apple Pay Sandbox as described above, this will always callback with true. Otherwise it will callback with false until you verify your domain as explained in Going Live below.

#Step 2: Start an Apple Pay Session
Assuming Apple Pay is available, when the user taps this payment button, show the Apple Pay sheet. This must be done in response to a tap or click event, so we’ll do this by adding an event listener to the button’s click event.

product.js
document.getElementById('apple-pay-button').addEventListener('click', beginApplePay);

Within the event listener, first create a PaymentRequest object. The total, countryCode, and currencyCode properties are all required; Stripe will set sane defaults for everything else. Note that unlike with other Stripe APIs that use an integer amount in cents to represent prices (e.g., 1999), Apple uses a formatted string for total.amount(e.g., ‘19.99’).

product.js
function beginApplePay() { var paymentRequest = { countryCode: 'US', currencyCode: 'USD', total: { label: 'Stripe.com', amount: '19.99' } }; var session = ...; // continued below }
Next, use another helper function in Stripe.js, buildSession, to turn this PaymentRequest into an ApplePaySession.

The second argument to buildSession is a function that will be called when the user has authorized the payment. This function takes two arguments. The first, result, will contain a Stripe token. You should pass this token to your server and create a charge (the example below uses jQuery to POST the token to a hypothetical /charges API on your server). If you’re looking to make a recurring payment, you can instead attach the token to a Customer and then subscribe them to a Plan. When you’re done doing this work on your server, call the second parameter, completion, with ApplePaySession.STATUS_SUCCESS or ApplePaySession.STATUS_FAILURE depending on if your charge succeeded or failed. This will then show the user a success or failure animation in the payment sheet and dismiss it.

The third argument to buildSession is optional; it is a function that will be called if Stripe encounters an error with your configuration or has a problem with your user’s payment information.

product.js
`function beginApplePay() {
var paymentRequest = ...;// see above
var session = Stripe.applePay.buildSession(paymentRequest,
    function(result, completion) {
$.post('/charges', { token: result.token.id }).done(function() {
      completion(ApplePaySession.STATUS_SUCCESS);
      // You can now redirect the user to a receipt page, etc.
      window.location.href = '/success.html';
    }).fail(function() {
      completion(ApplePaySession.STATUS_FAILURE);
    });
  }, function(error) {
    console.log(error.message);
  });
  session.begin();
}`

Finally, after building your ApplePaySession using the buildSession helper, call begin() on it to show the user the payment sheet!

0 Likes

I want to integrate Apple Pay with Stripe
(Sam D) #2
0 Likes

(Dmitry Fedyuk) #3

What is the sense to copy/paste documentation here?

0 Likes