43 Accelerated Checkout

Di 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B kita nempelin banner Shop Pay Installments ke form. Bab ini soal tombol yang ada di sebelahnya: accelerated checkout, alias tombol “Buy it now” dan wallet (Shop Pay, Apple Pay, Google Pay, PayPal) yang ngelewatin cart dan langsung ke pembayaran.

Accelerated checkout (di admin disebut dynamic checkout buttons) ngasih pembeli jalur lebih cepat: dari halaman produk atau cart langsung ke checkout yang udah terisi data pembayaran dan alamat dari wallet mereka. Konversinya lebih tinggi, jadi hampir semua theme ndukung ini.

Di Mana Bisa Dipasang

Di mana aja: template cart atau produk, section di dalamnya, atau cart drawer. Saran Shopify: taruh dekat tombol checkout biasa di form cart, biar pembeli bisa milih checkout reguler atau accelerated.

Kalau kamu pakai Section Rendering API (misalnya buat nyegarin cart drawer), tombolnya dirender ulang setiap section-nya diminta. Render pertama lebih lambat (library JavaScript-nya di-download dan web component-nya didaftarin), render berikutnya cepat.

Di Halaman Produk

Di halaman produk, Shopify milih satu tombol secara dinamis, yang paling cocok buat pembeli itu (Shop Pay kalau dia punya akun Shop, Apple Pay kalau di Safari iOS, dan seterusnya). Pasangnya lewat filter payment_button dari 20 Filters Money, Metafield, Cart, Customer, dan Localization > 1. payment_button di dalam form produk:

{% form 'product', product %}
  <!-- form content -->
  <input type="submit" value="Add to cart" />
  {{ form | payment_button }}
{% endform %}

Urutannya penting: Add to cart dulu, baru tombol accelerated. Add to cart itu aksi utama, accelerated itu alternatif. Dan tombolnya ngikutin varian dari input name="id" di form yang sama, sama kaya banner installments.

Ingat dari 41 Produk Recommendations, Gift Card, dan Bundles > 2. Masukin ke Form Produk: validasi form penerima gift card gak jalan lewat tombol accelerated, jadi di produk gift card sembunyiin tombol ini.

❌ tombol accelerated di luar form, gak tau varian mana

{% form 'product', product %}
  <input type="submit" value="Add to cart" />
{% endform %}
{{ form | payment_button }}

✅ di dalam form, setelah add to cart

{% form 'product', product %}
  <input type="submit" value="Add to cart" />
  {{ form | payment_button }}
{% endform %}

Di Cart

Di cart, tampilin semua tombol accelerated yang diaktifin toko. Dua object dari 13 Objects Global > 4. additional_checkout_buttons dan content_for_additional_checkout_buttons:

1. additional_checkout_buttons, true kalau toko punya tombol accelerated yang aktif.
2. content_for_additional_checkout_buttons, markup tombol-tombolnya.

{% if additional_checkout_buttons %}
  {{ content_for_additional_checkout_buttons }}
{% endif %}

Taruh dekat tombol checkout di form cart.

Kustomisasi Tampilan

Ini bagian yang sering bikin frustrasi: tombol accelerated nyembunyiin HTML-nya di custom element dengan shadow DOM tertutup. Artinya CSS apapun yang nargetin struktur HTML di dalamnya gak jalan, dan event listener di elemen dalamnya juga gak nangkep apa-apa. Yang bisa: CSS custom property buat styling, dan elemen tertentu buat pelacakan.

Kenapa ditutup? Karena tombol wallet punya persyaratan branding dari Apple, Google, PayPal (bentuk, warna, teks) yang gak boleh diubah sembarangan, dan Shopify harus bisa ngupdate implementasinya tanpa ngerusak theme.

1. CSS Custom Property

Yang tersedia:

1. --shopify-accelerated-checkout-button-block-size, tinggi tombol, minimal 25px, maksimal 55px. Default 44px di produk, 42px di cart layout vertikal.
2. --shopify-accelerated-checkout-button-inline-size (cart aja), tinggi tombol di layout horizontal, 25–55px, default 54px.
3. --shopify-accelerated-checkout-button-border-radius, radius sudut, default 0px di produk, 4px di cart.
4. --shopify-accelerated-checkout-button-box-shadow, bayangan, default none.
5. --shopify-accelerated-checkout-skeleton-background-color, warna skeleton loading sebelum tombol bisa dirender, default #dedede.
6. --shopify-accelerated-checkout-skeleton-animation-opacity-start dan -end, opasitas awal dan akhir animasi skeleton (fade bolak-balik), default 1 dan 0.5.
7. --shopify-accelerated-checkout-skeleton-animation-duration, durasi animasi (dari awal ke akhir dan balik), default 4s.
8. --shopify-accelerated-checkout-skeleton-animation-timing-function, timing function-nya, default ease.
9. --shopify-accelerated-checkout-inline-alignment (cart aja), posisi tombol di wadah waktu layout horizontal, nilai justify-content apapun, default start.
10. --shopify-accelerated-checkout-row-gap (cart aja), jarak vertikal antar tombol di layout vertikal, default 8px.

Terapin di dua custom element yang ngerender tombolnya: shopify-accelerated-checkout (produk) dan shopify-accelerated-checkout-cart (cart):

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: 0px;
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 42px;
  --shopify-accelerated-checkout-button-inline-size: 54px;
  --shopify-accelerated-checkout-button-border-radius: 4px;
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-inline-alignment: flex-start;
  --shopify-accelerated-checkout-row-gap: 8px;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}

Praktik bagusnya: samain block-size dan border-radius sama tombol Add to cart theme kamu, dan samain warna skeleton sama warna latar tombol, biar transisi dari skeleton ke tombol asli gak “loncat”.

❌ nargetin elemen dalam, gak jalan karena shadow DOM tertutup

.shopify-payment-button__button { border-radius: 8px; }

✅ lewat custom property

shopify-accelerated-checkout { --shopify-accelerated-checkout-button-border-radius: 8px; }

2. Layout di Cart

Bawaannya di cart tombol disusun horizontal rata kiri. Kalau ruangnya gak cukup buat semua berjajar, otomatis jadi vertikal dan tiap tombol selebar wadahnya. Kalau mau vertikal sejak awal, tambahin class additional-checkout-buttons--vertical di wadah content_for_additional_checkout_buttons:

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons--vertical">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

Vertikal biasanya lebih cocok di cart drawer yang sempit.

Ngelacak Klik

Jangan bergantung ke markup di dalam tombol buat ngelacak pemakaian, karena shadow DOM tertutup cuma ngelewatin composed event (event yang composed: true, kaya click). Pasang listener di elemen wallet ini:

1. Shop Pay: <shop-pay-wallet-button>
2. Amazon Pay: <shopify-amazon-pay-button>
3. Apple Pay: <shopify-apple-pay-button>
4. Google Pay: <shopify-google-pay-button>
5. PayPal: <shopify-paypal-button>

document.addEventListener('click', (event) => {
  const wallet = event.target.closest('shop-pay-wallet-button, shopify-apple-pay-button, shopify-google-pay-button, shopify-paypal-button, shopify-amazon-pay-button');
  if (wallet) {
    // kirim event analitik dengan wallet.tagName
  }
});

Pakai event delegation di document karena elemennya dirender belakangan (dan dirender ulang lewat Section Rendering API).

Checkout Banyak Produk

Dari halaman produk, kamu bisa nyertain produk tambahan bareng produk utama waktu pembeli checkout lewat tombol accelerated. Contohnya: garansi yang disarangin di bawah TV, atau aksesori yang dicentang pembeli. Tanpa fitur ini, tombol accelerated cuma bawa satu varian.

1. Batasan

1. Cuma didukung di online store, bukan custom storefront.
2. Wallet Buy with Prime gak ndukung lebih dari satu varian, item tambahan diabaikan.

2. Tambahin Hidden Input ke Form Produk

Tambahin field tersembunyi ke form produk dengan konvensi nama shopify-additional-items[index][attribute]. Dua syarat:

1. Index mulai dari 1 (index 0 buat produk utama).
2. Kalau mau nyarangin item tambahan di bawah produk utama, set parent_id ke ID varian produk utama biar di cart mereka terhubung (nested cart lines).

<input type="hidden" name="shopify-additional-items[1][id]" value="20">
<input type="hidden" name="shopify-additional-items[1][parent_id]" value="25">

Biasanya ini ditambahin lewat JavaScript waktu pembeli nyentang “Tambahkan garansi”, bukan statis.

3. Properti per Item

1. shopify-additional-items[i][id] (wajib), ID varian item tambahan.
2. shopify-additional-items[i][quantity] (opsional), jumlahnya, default 1.
3. shopify-additional-items[i][parent_id] (opsional), ID varian induk buat nyarangin.
4. shopify-additional-items[i][properties] (opsional), line item properties item tambahan.
5. shopify-additional-items[i][selling_plan] (opsional), ID selling plan (langganan, dari 44 Subscriptions) buat item tambahan.

Contoh garansi bersarang dengan properti:

{% form 'product', product %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <label>
    <input type="checkbox" id="add-warranty">
    Add 2-year warranty
  </label>
  <div id="warranty-fields" hidden>
    <input type="hidden" name="shopify-additional-items[1][id]" value="{{ warranty_variant_id }}" disabled>
    <input type="hidden" name="shopify-additional-items[1][parent_id]" value="{{ product.selected_or_first_available_variant.id }}" disabled>
    <input type="hidden" name="shopify-additional-items[1][properties][Covers]" value="{{ product.title | escape }}" disabled>
  </div>
  <input type="submit" value="Add to cart">
  {{ form | payment_button }}
{% endform %}

Input-nya diset disabled dulu biar gak ikut terkirim, dan JavaScript ngaktifinnya waktu checkbox dicentang. Ingat parent_id harus ikut diupdate waktu varian utama berubah.

Ringkasan

1. Accelerated checkout bisa dipasang di mana aja (produk, cart, cart drawer), sebaiknya dekat tombol checkout biasa. Dirender ulang lewat Section Rendering API, render pertama lebih lambat.
2. Produk: {{ form | payment_button }} di dalam form 'product' setelah Add to cart, Shopify milih satu tombol paling cocok, ngikutin input name="id". Sembunyiin di produk gift card.
3. Cart: {% if additional_checkout_buttons %}{{ content_for_additional_checkout_buttons }}{% endif %}.
4. Shadow DOM tertutup: styling cuma lewat CSS custom property --shopify-accelerated-checkout-* (tinggi 25–55px, radius, shadow, skeleton, alignment, gap) di shopify-accelerated-checkout dan shopify-accelerated-checkout-cart.
5. Layout cart horizontal → vertikal otomatis kalau sempit, atau paksa vertikal dengan class additional-checkout-buttons--vertical.
6. Pelacakan klik lewat elemen wallet (shop-pay-wallet-button, shopify-apple-pay-button, dan seterusnya) dengan event delegation, bukan markup dalamnya.
7. Banyak produk: hidden input shopify-additional-items[i][id|quantity|parent_id|properties|selling_plan] mulai index 1, parent_id buat nyarangin, cuma online store, Buy with Prime ngabaikannya.

---

Bab selanjutnya kita bahas langganan: selling plan dan selling plan group, pemilih opsi pembelian (sekali beli vs langganan), harga langganan, cara ngirim selling_plan di form, tampilan di cart, dan pedoman UX-nya.